VimのHTML入力補完プラグイン

4週間連続でRuby On Railsの記事というエンジニアにしか伝わらないような記事を書いてきて、自分も若干Ruby On Railsの記事から離れたいので、今日は趣向を変えてvimの便利（そう）なプラグインの記事を書いてみました。

Emmet.vim

こちらはHTMLの入力補完をしてくれるものです。


html:5

1

html:5

などと入力したあとに、insert modeのまま、Ctrl+y+,（カンマ）と入力すると、HTMLを生成してくれるというものです。
上記のものであれば、


&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  
&lt;/body&gt;
&lt;/html&gt;

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

というものを自動生成してくれます。
他にも、


div&gt;li&gt;ul

1

div>li>ul


p+a+p

1

p+a+p

というものであれば、それぞれ、


&lt;div&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;

1

2

3

4

5

<div>

<ul>

</ul>

</div>


&lt;p&gt;&lt;/p&gt;
&lt;a href=""&gt;&lt;/a&gt;
&lt;p&gt;&lt;/p&gt;

1

2

3

<p></p>

<p></p>

というものを生成してくれます。
Sublimeなどでもあるらしいですね。

公式　Emmet-vim – GitHub

参考サイト

VimAwesome

vim

WRITER

スターフィールド編集部

この著者の記事を見る

PREVコンペナビにアドネットワークの広告を貼るよ（２）NEXTプロトタイプ、ワイヤフレーム作成に便利なフリー素材

VimのHTML入力補完プラグイン

Emmet.vim

参考サイト

Related