webdevqa.jp.net

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

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

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

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

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

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


更新:これはと呼ばれるようになりましたEmmethttp://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