emmet-vimの使い方

emmet-vimとは

emmet-vimとは, HTMLCSSの構造を簡略化して書き, それを展開することでコードを書けるというプラグインです. うまく使うことができれば, 高速かつ楽にコーディングできるようになると思います.

emmet-vimのインストール

NeoBundleを使ってのインストールについてです. .vimrcに以下の一文を追加し, 保存します.

NeoBundle 'mattn/emmet-vim'
            

その後, 以下の2つのコマンドを打ちましょう.

:source ~/.vimrc
:NeoBundleInstall
            

emmet-vimの基本操作

emmet-vim使い方をまとめてみました. emmet-vimはzencoding-vimの後継らしいので, 基本的な操作はあまり変わらないようです.

タグへの展開は, <C-Y>,(Ctrl-yの直後にカンマを入力)になります.

>

div>ul>li

↓

<div>
  <ul>
    <li></li>
  </ul>
</div>
            

+

p+a+p

↓

<p></p>
<a href=""></a>
<p></p>
            

*

ul>li*3

↓

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
            

^

div>ul>li^^div>p^div

↓

<div>
  <ul>
    <li></li>
  </ul>
</div>
<div>
  <p></p>
</div>
<div></div>
            

( )

div>(ul>li*3)+p>a

↓

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <p><a href=""></a></p>
</div>
            

#, .

div#id+div.class+div#id.class1.class2.class3

↓

<div id="id"></div>
<div class="class"></div>
<div id="id" class="class1 class2 class3"></div>
            

$

ul>li.list$*3

↓

<ul>
  <li class="list1"></li>
  <li class="list2"></li>
  <li class="list3"></li>
</ul>

--------------------------------------------------

ul>li.list$$$*3

↓

<ul>
  <li class="list001"></li>
  <li class="list002"></li>
  <li class="list003"></li>
</ul>
            

{ }

p>{Hello}+a{world}+{!!!}

↓

<p>
  Hello
  <a href="">world</a>
  !!!
</p>

--------------------------------------------------

p{Hello}+a{world}+{!!!}

↓

<p>Hello</p>
<a href="">world</a>
!!!
            

未入力の場所にカーソルを移動する

一度にたくさんのタグを展開すると, 入力する場所がたくさん出てきます. 入力する場所を移動するのには, <C-Y>nというコマンドが便利です. 次に入力すべき場所に移動してくれます. 逆方向に移動するには, <C-Y>Nというコマンドでできます. 例えば, 以下のコードでは, "(*0)"を始点として, "(*1)", "(*2)",...というように移動していきます.

(*0) ← ここから
<div>
  <p>(*1)</p>
  <p>(*2)</p>
  <p>(*3)</p>
</div>
            

複数行をまとめる

Jを押せば, 一行ずつ繋がっていきます. ビジュアルモードで範囲を選択中に<C-Y>mを押せば, 選択範囲が一行にまとめられます.

すでにある文字をタグで囲む

タグで囲みたい部分をビジュアルモードで選択する. その後, <C-Y>,を押すと, コマンドバーにTag: と表示されるので, 囲みたいタグ名を入力し, enterを押すことですでにある文字をタグで囲むことができます.

コメントのon/off

<C-Y>/を押すと, カーソル上のタグがコメント化/解除されます.

タグ変換の一覧

HTMLは, ここ. CSSは, ここが参考になると思います.