web-dev-qa-db-ja.com

VimでHTMLタグをすばやく閉じるにはどうすればよいですか？

VimでHTMLに似たコードを実行しなければならなかったのでしばらく経ちましたが、最近、これに再び遭遇しました。簡単なHTMLを書いているとしましょう：

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

タイトル、ヘッド、HTMLの終了タグをすばやく書き留めるにはどうすればよいですか？私はここで本当に簡単な方法を見逃しているように感じます。

もちろん使用できます CtrlP 個々のタグ名をオートコンプリートしますが、ラップトップのキーボードで実際に得られるのは、実際に括弧とスラッシュを正しく取得することです。

htmlxmlvimautocomplete
111
wds

これをチェックしてください。

closetag.vim

Functions and mappings to close open HTML/XML tags

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

似たようなものを使用します。

38
Ian P

xmledit プラグインを使用すると非常に便利です。次の2つの機能が追加されます。

  1. タグを開くと（egタイプ<p>）、終了>を入力するとすぐにタグが展開されます<p></p>および挿入モードでタグ内にカーソルを置きます。

  2. その後すぐに別の>（e.g。を入力すると<p>>）と入力すると、

    <p>

    </p>

挿入モードで、カーソルをタグ内に1回インデントして配置します。

xml vimプラグインは、これらの機能にコードの折りたたみとネストされたタグのマッチングを追加します。

もちろん、HTMLコンテンツを Markdown で記述し、%!を使用して、選択したMarkdownプロセッサーでVimバッファーをフィルター処理する場合、タグを閉じることを心配する必要はありません。 ）

73
hakamadare

私は最小限のものが好きです、

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

Vimに終了タグだけでなく、開始タグと終了タグの両方を書き込む方が便利だと思います。 Tim Popeの優れた ragtag plugin を使用できます。入力方法は次のようになります（let | markカーソル位置）。

スパン|

押す CTRL+xSPACE

そしてあなたは得る

<span> | </ span>

使用することもできます CTRL+xENTER の代わりに CTRL+xSPACE、そしてあなたは得る

<span> 
 | 
 </ span>

Ragtagはそれ以上のことを行うことができます（たとえば、<％=をこの％>またはDOCTYPEの周りに挿入します）。他のプラグインを ragtagの作成者 、特に サラウンド でチェックアウトしたいでしょう。

45
Krzysiek Goj

精巧なことをしているなら、 sparkup はとても良いです。

彼らのサイトからの例：

ul > li.item-$*3は次のように展開されます。

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

とともに <C-e>。

質問にある例を実行するには、

html > head > title{This is a title}

利回り

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

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>
  ---------------------
17
Preet Kukreti

マッピング

私はブロックタグを（インラインではなく）すぐに閉じて、できるだけ簡単なショートカットを使用するのが好きです（のような特別なキーを避けるのが好きです） CTRL 可能であれば、closetag.vimを使用してインラインタグを閉じます。）タグのブロックを開始するときにこのショートカットを使用するのが好きです（@kimilheeに感謝します。これは彼の答えの離陸です）。

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

サンプル使用法

タイプ-

<p>[Tab]

結果-

<p>
 |
</p>

ここで、|はカーソル位置を示します。

説明

  • inoremapmeans挿入モードでマッピングを作成します
  • ><Tab>手段閉じ山括弧とタブ文字;これは一致するものです
  • ><Esc>手段最初のタグを終了し、挿入から通常モードにエスケープします
  • F<手段最後の開き山かっこを見つける
  • lmeansカーソルを右に移動します（開き山かっこをコピーしないでください）
  • yt>手段カーソル位置から次の閉じ山括弧の前までヤンクする（つまり、タグの内容をコピーする）
  • o</means挿入モードで新しい行を開始し、開き山括弧とスラッシュを追加します
  • <C-r>"手段デフォルトレジスタから挿入モードで貼り付けます（"）
  • ><Esc>手段終了タグを閉じて挿入モードからエスケープする
  • O<Space>手段カーソルの上に挿入モードで新しい行を開始し、スペースを挿入します
11
Keith Pinson

allml（現在はRagtag）およびOmni-completion（<C-X> <C-O>）は、.pyや.Javaなどのファイルでは機能しません。

これらのファイルでタグを自動的に閉じる場合は、次のようにマッピングできます。

 imap <C-j> <ESC> F <lyt> $ a </ ^ R ">

（^ RはContrl + Rです。次のように入力できますControl + v次にControl + r）

（|はカーソル位置です）入力すると..

<p> abcde |

^ jと入力します

次に、このようにタグを閉じます。

<p> abcde </ p> |

6
kimilhee

チェックアウト - vim-closetag

これは（X）HTMLタグを閉じる非常に単純なスクリプト（vundleプラグインとしても利用可能）です。 READMEから：

これが現在のコンテンツの場合：

<table|

今、あなたは押します >、コンテンツは次のようになります。

<table>|</table>

そして今、あなたが押すと > 再び、コンテンツは次のようになります。

<table>
   |
</table>

注：|はここのカーソルです

5
Sheharyar

簡単に見つけられるWebライティングに基づいた、もう1つの簡単なソリューションを次に示します。

  1. HTMLタグを自動的に閉じる

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

  2. 完了をオンにする

    autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

5
mloskot