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

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

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

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

이것 좀 봐..

closetag.vim

Functions and mappings to close open HTML/XML tags

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

비슷한 것을 사용합니다.

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

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

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

   <p>

   </p>

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

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

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

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

imap ,/ </<C-X><C-O>

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

스팬 |

CTRL+ 누르기x SPACE

그리고 당신은 얻는다

<span> | </ span>

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

<span>
|
</ span>

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

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

해당 사이트의 예 :

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>

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>
  ---------------------

매핑

나는 블록 태그 (인라인이 아닌)를 즉시 닫고 가능한 한 간단한 단축키를 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> 수단은 커서 위 삽입 모드에서 새 줄을 시작하고 공백을 삽입

체크 아웃 vim-closetag

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

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

<table|

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

<table>|</table>

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

<table>
   |
</table>

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

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> |

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

1. HTML 태그 자동 닫기

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

2. 완료 켜기

   autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

@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]인라인 스타일을 >>.