タイトル盛りすぎました。すいません;-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に以下を追記
.vimrc
NeoBundle 'mattn/emmet-vim'
そして:NeoBundleInstallでインストール
以上 ・・・・・・えっΣ(ﾟДﾟ)
ちょっとだけカスタマイズ
emmet-vimはを使います。
キーバインドかぶっちゃったりする人は変更しましょう。
.vimrc
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もあります。
手軽にお勉強してみたい方は以下も参考になります。