Vim에서 HTML 태그를 어떻게 빨리 닫을 수 있습니까?

117

에서 HTML과 유사한 코드를 작성해야했던 Vim지 오래되었지만 최근에 다시이 문제를 발견했습니다. 내가 간단한 글을 쓰고 있다고 해보자 HTML.

<html><head><title>This is a title</title></head></html>

제목, 헤드 및 HTML에 대한 닫는 태그를 어떻게 빠르게 작성합니까? 하나 하나 적어 두지 않는 정말 간단한 방법을 놓치고있는 것 같습니다.

물론 CtrlP개별 태그 이름을 자동 완성하는 데 사용할 수 있지만 랩톱 키보드에서 실제로 괄호와 슬래시를 올바르게 사용하는 것입니다.

html  xml  vim  autocomplete 
— wds
소스

답변:

38

이것 좀 봐..

closetag.vim 

Functions and mappings to close open HTML/XML tags

https://www.vim.org/scripts/script.php?script_id=13

비슷한 것을 사용합니다.

— 이안 P
소스
나는 이것을 설치했다. 태그 닫기가 자동으로 완료되지 않는데 단축키가 무엇인가요? 나는 시도 Ctrl-_하지만 이것은 내 터미널의 작은 글꼴을 만듭니다.
— alhelal
74

xmledit 플러그인을 사용하면 매우 유용합니다. 두 가지 기능을 추가합니다.

  1. 태그를 열면 ( 예 : type <p>) 닫기 >를 입력하자마자 태그가 확장 <p></p>되고 삽입 모드에서 태그 내부에 커서가 배치됩니다.

  2. 그런 다음 즉시 다른 것을 입력하면 >( 예 : 입력 <p>>)

    <p>

    </p>

삽입 모드에서 한 번 들여 쓴 태그 안에 커서를 놓습니다.

XML 정력 플러그인은 이러한 기능 코드 폴딩 및 중첩 된 태그 매칭을 추가합니다.

물론, Markdown 에서 HTML 콘텐츠를 %!작성하고 원하는 Markdown 프로세서를 통해 Vim 버퍼를 필터링 하는 데 사용 한다면 태그를 닫는 것에 대해 전혀 걱정할 필요가 없습니다. :)

— Hakamadare
소스
이 플러그인은 '</'를 입력하면 태그를 자동으로 닫을 수 있습니까? 아니면 키 입력으로 닫는 태그를 삽입 하시겠습니까? 때때로 당신은 ... 닫는 태그를 삭제하고 나중에 삽입합니다
— bzx
7
이 플러그인은 커서가 생성 된 태그를 지나칠 수있는 쉬운 방법을 제공하지 않기 때문에 마음에 들지 않습니다. 예를 들어 "Have a <b> nice </ b> day"를 작성하려면 "Have a <b> nice | </ b"로 렌더링되는 "Have a <b> nice"를 입력하여 시작합니다. > ". 그런 다음 나머지 문장을 계속하려면 오른쪽 화살표를 가로 지르거나 삽입 모드를 종료해야합니다. 그렇기 때문에 키를 눌러 종료 태그를 삽입하는 솔루션이 더 좋습니다.
— 2011 년
1
@exclipy Vim에는이를 수행 할 수있는 많은 내장 방법이 있습니다. 우선 'E', 'f', 'A'명령을 사용해보십시오.
— user456584 2013
3
.NET과 함께 xmledit 플러그인을 설치했습니다 git clone https://github.com/sukima/xmledit.git ~/.vim/bundle/xmledit. 그러나 .xml 파일을 편집 할 때만 작동합니다. ext 파일이 .html 또는 .htm이면 작동하지 않습니다.
— Chad
2
@Chad 현재, 내 해결책은 동일한 디렉토리에 파일을 복사하여 붙여 넣는 것이 었습니다. 정확히 이름을 "html.vim"으로 바꾸어 HTML 파일에도 영향을줍니다. 이제 ~ / .vim / ftplugin (xml.vim 및 html.vim)에 정확히 동일한 두 개의 파일이 있습니다.
— user2719875
56

나는 최소한의 것을 좋아합니다. 

imap ,/ </<C-X><C-O>
— sjh
소스
4
<CX> <CO>는 무엇을합니까? 그것은 나를 위해 아무것도하지 않습니다.
— 2011 년
8
", /"를 쓰고 싶은 경우가 있으므로 다른 단축키를 사용하고 싶습니다. 또 다른 세부 사항은 추가 입력을 기다리지 않고 전체 완성을 닫아야한다는 것입니다. 그래서 :imap <silent> <C-c> </<C-X><C-O><C-X>
1
아주 멋지다. 또한 <Esc>F<i이 끝에 추가 되어 커서를 태그 안에 다시 넣습니다.
— mVChr
이 명령은 삽입 모드로 사용하려면 다음 공격 ,/태그 닫습니다
— thedanotto
위의 솔루션에는 많은 찬성표가 있지만 특히 저와 같은 초보자에게는 설명이 부족합니다. 어떻게 작동하며 어떻게 사용합니까?
— Phemelo Khetho
50

vim이 닫는 태그 대신 여는 태그와 닫는 태그를 모두 작성하도록하는 것이 더 편리합니다. Tim Pope의 우수한 ragtag 플러그인 을 사용할 수 있습니다 . 사용법은 다음과 같습니다 (let | 커서 위치 표시).

스팬 |

CTRL+ 누르기x SPACE

그리고 당신은 얻는다

<span> | </ span>

당신은 또한 사용할 수 있습니다 CTRL+ x ENTER대신 CTRL+ x SPACE, 당신은 얻을

<span>
|
</ span>

Ragtag는 그 이상을 수행 할 수 있습니다 (예 :이 %> 또는 DOCTYPE 주위에 <% = 물건 삽입). ragtag , 특히 서라운드 작성자의 다른 플러그인을 확인하고 싶을 것입니다 .

— Krzysiek Goj
소스
+1 대단해! BTW, 이것은 지금으로 알려져있다 ragtag: vim.org/scripts/script.php?script_id=1896
— neezer
이것은 확실히 가장 간단합니다. Textmate는 좋았지 만 Vim은 Krzysiek에게 감사합니다.
— josemota
23

정교한 작업을한다면 스파크 업 이 아주 좋습니다.

해당 사이트의 예 :

ul > li.item-$*3 확장 :

<ul>
    <li class="item-1"></li>
    <li class="item-2"></li>
    <li class="item-3"></li>
</ul>

A를 <C-e>.

질문에 주어진 예를 수행하려면 

html > head > title{This is a title}

수확량

<html>
  <head>
    <title>This is a title</title>
  </head>
</html>
— 이것보다
소스
sooooo 많이 감사합니다! 이것은 Vim뿐만 아니라 다른 편집자들 중에서 내가 본 것보다 더 멋지다! 감독자!
— 크리스
이것은 훌륭한 플러그인입니다
— DenniJensen
이 플러그인은 젠 코딩에서 발전했습니다. 후자는 이제 emmet으로 알려져 있으며 약간 더 큰 기능 세트를 가지고 있습니다.
— chb
17

zencoding vim 플러그인도 있습니다 : https://github.com/mattn/zencoding-vim

튜토리얼 : https://github.com/mattn/zencoding-vim/blob/master/TUTORIAL

업데이트 : 이제 Emmet 이라고합니다 : http://emmet.io/

튜토리얼에서 발췌 :

1. Expand Abbreviation

  Type abbreviation as 'div>p#foo$*3>a' and type '<c-y>,'.
  ---------------------
  <div>
      <p id="foo1">
          <a href=""></a>
      </p>
      <p id="foo2">
          <a href=""></a>
      </p>
      <p id="foo3">
          <a href=""></a>
      </p>
  </div>
  ---------------------

2. Wrap with Abbreviation

  Write as below.
  ---------------------
  test1
  test2
  test3
  ---------------------
  Then do visual select(line wize) and type '<c-y>,'.
  If you request 'Tag:', then type 'ul>li*'.
  ---------------------
  <ul>
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
  </ul>
  ---------------------

...

12. Make anchor from URL

  Move cursor to URL
  ---------------------
  http://www.google.com/
  ---------------------
  Type '<c-y>a'
  ---------------------
  <a href="http://www.google.com/">Google</a>
  ---------------------
— 프릿 쿠크 레티
소스
워, 루비 제작자가 만든 건가요?
— tjklemz
13

매핑

나는 블록 태그 (인라인이 아닌)를 즉시 닫고 가능한 한 간단한 단축키를 CTRL사용 closetag.vim하는 것을 좋아합니다 (인라인 태그를 닫기 위해 사용하지만 가능한 경우 와 같은 특수 키는 피하는 것을 좋아 합니다.) 나는 이것을 사용하고 싶습니다. 태그 블록을 시작할 때의 지름길 (@kimilhee에게 감사합니다. 이것은 그의 대답을 요약 한 것입니다) :

inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>O<Space>

샘플 사용법

유형-

<p>[Tab]

결과-

<p>
 |
</p>

어디에서 |커서 위치를 나타냅니다.

설명

  • inoremap 삽입 모드에서 매핑을 생성하는 것을 의미 합니다.
  • ><Tab> 닫는 꺾쇠 괄호와 탭 문자를 의미 합니다. 이것이 일치하는 것입니다
  • ><Esc> 첫 번째 태그를 끝내고 삽입에서 일반 모드로 탈출하는 것을 의미 합니다.
  • F< 수단은 지난 개방 각도 브래킷을 찾을 수
  • l 커서를 오른쪽으로 이동하는 것을 의미 합니다 (여는 꺾쇠 괄호를 복사하지 마십시오).
  • yt> 다음 닫는 꺾쇠 괄호 (예 : 태그 내용 복사) 이전까지 커서 위치에서 위로 잡아 당기는 것을 의미합니다.
  • o</ 삽입 모드에서 새 줄을 시작하고 여는 꺾쇠 괄호와 슬래시를 추가하는 것을 의미 합니다.
  • <C-r>" 기본 레지스터 ( ") 에서 삽입 모드로 붙여 넣기를 의미합니다.
  • ><Esc> 닫는 태그를 닫고 삽입 모드에서 벗어나는 것을 의미 합니다.
  • O<Space> 수단은 커서 위 삽입 모드에서 새 줄을 시작하고 공백을 삽입
— 키스 핀슨
소스
@wds 와우, 예, l"왼쪽"이 아니라 "오른쪽" 을 의미한다는 사실에 대해 생각해 본 적이 없습니다. 하하 ... 정말 재미있는 오류입니다. 내 게시물에 대해 어떻게 생각하십니까? 나는 당신이 찬성하지 않았다는 것을 알았습니다.
— Keith Pinson 2012-08-23
물론 좋습니다. 최근에 xml.vim 플러그인을 사용했습니다 (아주 훌륭하게 작동합니다). 파일 au filetype html inoremap <buffer> ...
— 유형별
1
마지막으로 정확히 작동하는 Autoclose 명령-간단히!
— cnp
태그 사이에 커서를두고 싶습니다. 그래서 필요에 맞게 수정했습니다. inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>kJxi나는 제거 0<Space>하고 추가했다 kJxi. 한 단계 위로 이동하고 두 줄을 연결하고 한 문자를 제거한 다음 삽입 모드로 이동합니다.
— Samundra
9

체크 아웃 vim-closetag

vundle(X) HTML 태그를 닫는 정말 간단한 스크립트 ( 플러그인 으로도 사용 가능 )입니다. 그것에서 README:

이것이 현재 콘텐츠 인 경우 :

<table|

이제를 누르면 >내용은 다음과 같습니다.

<table>|</table>

이제 >다시 누르면 내용은 다음과 같습니다.

<table>
   |
</table>

참고 : |여기에 커서가 있습니다.

— Sheharyar
소스
6

allml (현재 Ragtag) 및 Omni-completion (<CX> <CO>)은 .py 또는 .java와 같은 파일에서 작동하지 않습니다.

해당 파일에서 태그를 자동으로 닫으려면 다음과 같이 매핑 할 수 있습니다.

imap <Cj> <ESC> F <lyt> $ a </ ^ R ">

(^ R은 Contrl + R :이 Control + v 다음에 Control + r을 입력 할 수 있습니다)

(|는 커서 위치) 이제 입력하면 ..

<p> abcde |

^ j를 입력합니다.

다음과 같이 태그를 닫습니다 ..

<p> abcde </ p> |

— 김일희
소스
imap <Cj> <ESC> mfF <lyt>`fa </ <CR> ">를 사용하면 복제 태그는 줄 끝 ($) 대신 ^ j를 입력했을 때 커서가 있던 위치입니다.
— Pietro
5

다음은 쉽게 찾을 수있는 웹 작성을 기반으로 한 또 다른 간단한 솔루션입니다.

  1. HTML 태그 자동 닫기

    :iabbrev </ </<C-X><C-O>

  2. 완료 켜기

    autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

— Mloskot
소스
1
굉장한 반응 !!! 플러그인없이 !!! (두 번째 항목에는 linkrot이 있습니다) 플러그인을 처리하는 것보다 .vimrc를 수정하는 것이 더 빠르기 때문에 여전히 최선의 대답 일 것입니다. 게다가 대부분의 미니멀 응답
— nilon
이렇게하면 닫힌 태그 뒤에 공백이 추가됩니다. (
— Vitaly Zdanevich
4

@KeithPinson의 훌륭한 답변을 기반으로 (미안하지만 아직 답변에 대한 평판 포인트가 충분하지 않습니다)이 대안은 자동 완성이 html 태그 내부에있을 수있는 추가 항목 (예 : 클래스, ID 등)을 복사하는 것을 방지합니다. .) 닫는 태그에 복사해서는 안됩니다.

업데이트filename.html.erb 파일 작업을 위해 내 응답을 업데이트했습니다 .
내 원래 응답은 some_file.html.erb내가 임베디드 루비 (예 :)를 사용할 때 와 같이 Rails 뷰에서 일반적으로 사용되는 파일에서 작동하지 않는다는 것을 알았습니다 <p>Year: <%= @year %><p>. 아래 코드 는.html.erb 파일에서 작동 합니다.

inoremap ><Tab> ><Esc>?<[a-z]<CR>lyiwo</<C-r>"><Esc>O

샘플 사용법

유형:

<div class="foo">[Tab]

결과:

<div class="foo">
  |
<div>

어디에서 |커서 위치를 나타냅니다

블록 스타일 대신 인라인으로 닫는 태그를 추가하는 예 :

inoremap ><Tab> ><Esc>?<[a-z]<CR>lyiwh/[^%]><CR>la</<C-r>"><Esc>F<i

샘플 사용법

유형:

<div class="foo">[Tab]

결과:

<div class="foo">|<div>

어디에서 |커서 위치를 나타냅니다

그것은 위의 예제 모두에 의존하는 것은 사실이다 >[Tab](당신이 선택해야 할 것입니다 의미 닫는 태그 신호를 하나 의 인라인 또는 블록 스타일). 개인적으로 나는 블록 스타일과 >[Tab]인라인 스타일을 >>.

— 닉 에르하르트
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.