Emmetの記法を利用するために，Vimではemmet-vimプラグインが公開されています．

目次

  1. emmet-vim
  2. Emmet記法の文法
    1. 子要素>
    2. 兄弟+
    3. 1階層上へ^
    4. 乗算*
    5. 連番$
    6. ID#とクラス.
    7. 属性[]
    8. グループ化()
    9. テキスト{}
  3. HTMLのスニペット例
    1. 雛形
    2. タグ
    3. 略記されたタグ
    4. 属性を付ける:
    5. 下位構造まで含めて展開する+
  4. 参考文献

emmet-vim

emmet-vimはインサートモードでの<C-y>を始動キーとしており，直前に置かれたスニペットの展開を

<C-y>,

によって行います．

また，HTMLの編集を容易にするものとして，以下の機能も提供しています．

<C-y>/  # コメントのトグル
<C-y>k  # タグの削除
<C-y>n  # タグを探して次の編集点へ移動

Emmet記法の文法

子要素>

>により，子要素を作ることができます．

h2>div>p
<h2>
    <div>
        <p></p>
    </div>
</h2>

兄弟+

兄弟要素を作るには+で繋ぐだけです．

nav+main+aside
<nav></nav>
<main></main>
<aside></aside>

1階層上へ^

^を使うと，1階層上へ戻ることができます．

div+div>p>span+em^bq
<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

^^とすれば2階層上がることができます．

乗算*

*を使うことで，同じタグを反復して挿入できます．

ul>li*3
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

連番$

連番を作りたいときは，数値の入るところに$を使います．

ul>li.item$*3
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

桁数は$の個数で指定できます．

ul>li.item$$*3
<ul>
    <li class="item01"></li>
    <li class="item02"></li>
    <li class="item03"></li>
</ul>

$を@-で後置修飾することにより逆順をとれます．

ul>li.item$@-*3
<ul>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

@nの形で$を後置修飾することにより，連番を途中から始めることができます．

ul>li.item$@2*3
<ul>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
</ul>

ID#とクラス.

IDとクラスはそれぞれ#と.で設定できます．

form#myid.mycls
<form id="myid" class="mycls"></form>

クラスは列挙することも可能です．

p.cls1.cls2.cls3
<p class="cls1 cls2 cls3"></p>

属性[]

td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>

グループ化()

()で括ることにより，グループ化できます．

div>(header>ul>li*2>a)+footer>p
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

テキスト{}

{}で括ることにより，タグの間にテキストを挿入できます．

a{Click me}
<a href="">Click me</a>

HTMLのスニペット例

雛形

html:5
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title></title>
</head>
<body>
        
</body>
</html>

タグ

foo
<foo></foo>

略記されたタグ

略記できるタグがあります．

bq
<blockquote></blockquote>

属性を付ける:

よく使う属性のために特別に用意されたスニペットがあります．

form:post
<form action="" method="post"></form>

下位構造まで含めて展開する+

下位構造まで含めて展開するスニペットがあります．

table+
<table>
    <tr>
        <td></td>
    </tr>
</table>
select+
<select name="" id="">
    <option value=""></option>
</select>

参考文献

Emmet本家のサイトにチートシートがあります．