emmet-vimの使い方
emmet-vimとは
emmet-vimとは, HTMLやCSSの構造を簡略化して書き, それを展開することでコードを書けるというプラグインです. うまく使うことができれば, 高速かつ楽にコーディングできるようになると思います.
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>/を押すと, カーソル上のタグがコメント化/解除されます.