タイトル盛りすぎました。すいません;-P
emmetってなに？
HTMLやCSSの入力を効率化してくれるお便利ツール。
似たようなものだとhamlがあります。
hamlはシェルでコマンド叩いてHTMLを生成するのに対して
emmetはエディタ上でショートカット打てば自動でHTML展開する。
個人的にはemmetのほうが便利
Zen-Codingの改良版という位置づけらしいです。
詳細はこちらEmmet
対応するエディタは？
[公式]
- Sublime Text
- Eclipse/Aptana
- TextMate
- Coda
- NetBeans
[サードパーティ]
- Vim
- WebStorm
- PhpStorm
他いろいろと。
具体的に何ができるの？
例えばこんなことを書いてショートカットキーを押すと
table>tr.row*3>td.col$*3
こんなのが一発ででます。
<table>
<tr class="row">
<td class="col1"></td>
<td class="col2"></td>
<td class="col3"></td>
</tr>
<tr class="row">
<td class="col1"></td>
<td class="col2"></td>
<td class="col3"></td>
</tr>
<tr class="row">
<td class="col1"></td>
<td class="col2"></td>
<td class="col3"></td>
</tr>
</table>
このようにHTMLタグ打ちが一気に楽になります。
emmet-vimのインストール
今回はVimでの導入を解説します。
といってもそんなに難しくないです。
NeoBundleが必要なので入れてない人はここ参照
.vimrcに以下を追記
NeoBundle 'mattn/emmet-vim'
そして:NeoBundleInstallでインストール
以上 ・・・・・・えっΣ(ﾟДﾟ)
ちょっとだけカスタマイズ
emmet-vimは<C-y>を使います。
キーバインドかぶっちゃったりする人は変更しましょう。
let g:user_emmet_leader_key='<c-t>'
簡単な使い方
「Emmet式<Leader>,」でHTMLが自動展開されます。
<Leader>はデフォルトなら<C-y>です。
以下<keymap>って略して書きます。
例１：閉じタグ補完
タグ名だけ書けばタグを補完してくれます。
#展開前
div<keymap>
#展開後
<div></div>
例２：子タグ作成
＞ を使えば子タグを作成できます。
#展開前
ul>li<keymap>
#展開後
<ul>
<li></li>
</ul>
例４：classやid属性作成
CSSと同じようにclassやidを指定できます。
#展開前#
div#id1.class1<keymap>
#展開後#
<div id="id1" class="class1"></div>
例５：繰り返しタグ生成
*を使って繰り返し回数を指定できます。
#展開前
div*3<keymap>
#展開後
<div></div>
<div></div>
<div></div>
例６：繰り返しタグ＆連番生成
$が連番に展開してくれます。$$で２桁にもなります。
#展開前
ul>li.item$*3<keymap>
#展開後
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
その他おすすめサイト
Emmet本家ドキュメント。他にもたくさんシンタックスがあります。
HTMLだけでなくCSSもあります。
手軽にお勉強してみたい方は以下も参考になります。