Emmetは各種テキストエディタ向けにHTMLコーディングを効率化してくれるプラグインを提供します。

CSSセレクタを駆使すると隣接や子要素、最初だけなどこだわった要素選択ができます。それに似た文法を使ってHTMLを一気に記述できるツールキットがEmmetです。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.01.39_thumb.1368592610.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.01.39.1368592610.png)
例えばこんな感じに入力します。TextMate版で試しています。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.01.51_thumb.1368592613.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.01.51.1368592613.png)
Ctrl+Eで実行すると一気にHTMLに展開されます。


メニュー。

EmmetはSublime Text、Eclipse、TextMate、Coda、Espresso、Chocolat、Komodo Edit、Notepad++、PSPad、CodeMirror、Brackets、NetBeans、Vimなど様々なエディタ向けにプラグインを提供しています。さらにテキストエリアでも使用できます。記法はCSSセレクタに似ていますが習得に多少の時間は要しそうです。また、ショートカットキーも数多いですが一旦覚えてしまえば強力なコーディングツールになりそうです。

Emmetは各種テキストエディタ向けのソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

MOONGIFTはこう見る

Emmetを使いこなすコツとしては、まず自分がよく使うであろう機能だけを使ってみることです。あまりに機能が多いために使いこなせるか、習得するのに時間がかかるのではないかと躊躇してしまいがちですが、そこは自分が使うものだけに割り切って使い始めるのが良いでしょう。

あくまでも自分の作業を効率化するためのツールであると考えれば、使わない機能を覚えても意味がありません。導入してかえって作業が遅くなってしまった、なんてことがないように一つ一つステップを歩みながら機能を覚えていくのがお勧めです。

Emmet — the essential toolkit for web-developers

emmetio (Emmet.io)