Vim で HTML タグを素早く閉じるにはどうすればよいでしょうか?

https://stackoverflow.com/questions/130734

02-07-2019
|

質問

HTML のようなコードを実行する必要がなくなってからしばらく時間が経ちました。 Vim, しかし、最近またこのことに気づきました。簡単なことを書いているとしましょう HTML:

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

title、head、html の終了タグを素早く書くにはどうすればよいでしょうか?ここでは、すべてを 1 つずつ書き留める必要のない、非常に簡単な方法が欠けているように感じます。

もちろん使えますよ CtrlP 個々のタグ名を自動補完するためですが、ラップトップのキーボードで私が実際に苦労しているのは、括弧とスラッシュを正しく入力することです。

解決

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

closetag.vim

Functions and mappings to close open HTML/XML tags

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

私も似たようなものを使っています。

他のヒント

を使用するとわかります xml編集かなり便利なプラグイン。2 つの機能が追加されます。

タグを開くと (例えば タイプ <p>)、終了を入力するとすぐにタグが展開されます。 > の中へ <p></p> 挿入モードでタグ内にカーソルを置きます。
その後すぐに別の文字を入力すると、 > (例えば あなたが入力します <p>>)、それを次のように拡張します。

<p>

</p>

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

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

もちろん、HTML コンテンツを次のように記述する場合は、終了タグについてまったく心配する必要はありません。マークダウンそして使用します %! 選択した Markdown プロセッサを通じて Vim バッファをフィルタリングします:)

ミニマルなものが好きなので、

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

vim に終了タグだけを書くのではなく、開始タグと終了タグの両方を書かせた方が便利だと思います。優秀な使い方ができるラグタグプラグインティム・ポープ著。使用法は次のように見えます（|マークカーソル位置）と入力してください。

span|

プレス CTRL+バツ 空間

そしてあなたは得ます

<span>|</span>

も使用できます CTRL+バツ 入力 の代わりに CTRL+バツ 空間, 、そしてあなたは得ます

<span>
|
</span>

Ragtag はそれだけではありません (例:<%= をこの %> または DOCTYPE の周囲に挿入します)。おそらく、他のプラグインをチェックしてみるとよいでしょう。ラグタグの作者, 、特に囲む.

何か凝ったことをやっていると、火をつけるとても良い。

彼らのサイトからの例:

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>

zencoding vim プラグインもあります。 https://github.com/mattn/zencoding-vim

チュートリアル： https://github.com/mattn/zencoding-vim/blob/master/TUTORIAL

アップデート： これは現在呼ばれています エメット: 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 手段カーソルを 1 つ右に移動します (開始山かっこをコピーしないでください)
yt> 手段カーソル位置から次の閉じ山かっこの前までヤンクします (すなわち、タグの内容をコピー)
o</ 手段挿入モードで新しい行を開始し、開始山括弧とスラッシュを追加します。
<C-r>" 手段挿入モードでデフォルトのレジスタから貼り付けます (")
><Esc> 手段終了タグを閉じて挿入モードを終了します。
O<Space> 手段カーソルの上で挿入モードで新しい行を開始し、スペースを挿入します

allml（現在のラグタグ）とオムニの完了（u003CC-X>u003CC-O> ）.pyや.javaのようなファイルでは機能しません。

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

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

( ^R は Ctrl+R です:このように入力できます Control+v 、次に Control+r )

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

<p>abcde|

^j と入力します

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

<p>abcde</p>|

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

HTMLタグを自動で閉じる

:iabbrev </ </<C-X><C-O>
補完をオンにする

autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

チェックアウト `vim-closetag`

これは非常に単純なスクリプトです ( vundle (X)HTML タグを閉じてくれるプラグイン)。それから README:

これが現在のコンテンツの場合:
<table|
今、あなたは押します >, 、内容は次のようになります。
<table>|</table>
そして今、あなたが押すと > 繰り返しになりますが、内容は次のようになります。
<table>
   |
</table>

注記： | ここにカーソルがあります

@KeithPinsonによる優れた回答（申し訳ありませんが、回答にコメントするにはまだ十分な評判ポイントがありません）を基にして構築されたこの代替案は、オートコンプリートがHTMLタグ内にある可能性のある余分なものをコピーするのを防ぎます（例：クラス、ID など) を終了タグにコピーしないでください。

アップデート と協力するための応答を更新しました filename.html.erb ファイル。
私の元の応答が、Rails ビューで一般的に使用されるファイルでは機能しないことに気付きました。 some_file.html.erb 埋め込み Ruby を使用していたとき (例: <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] そしてインラインスタイルは >>.

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow

Vim で HTML タグを素早く閉じるにはどうすればよいでしょうか?

マッピング

使用例

説明

チェックアウト vim-closetag

チェックアウト `vim-closetag`