Revlog

HTMLのマークアップ作業ですが、一つ一つ地道にタグを打ち込んでいくと手間がかかり大変だと思います。
そこで、HTMLを高速でマークアップできるようになるEmmetというプラグインをご紹介します。

Emmetのインストール

Sublime Text 3を起動したら、パッケージコントロールのインストールパッケージからEmmetをインストールしてください。
（“Ctrl” + “Shift” + “P”の同時押しでコマンドパレットを開き、入力欄に”Package Control”と入力することでパッケージコントロールにアクセスできます。パッケージコントロールの詳しい解説は前回の記事から確認できます。）

インストール完了後、実際にタグを打ち込んでみましょう。
試しに<h1>、<p>、<img>タグを打ってみた様子が以下のGIFになります。

入力した文字をEmmetが自動補完し、一瞬でタグが挿入されていますね。
（それぞれ、h1、p、imgと入力した後に”Tab”キーを押しています。）

h1タグであれば、<h1></h1>と閉じタグも含めて9文字の入力を行うところ、h1の2文字の入力のみでタグが自動で挿入されます。単純計算で5倍の速さでマークアップ出来ましたね。
imgタグでは、src=”” や alt=””　なども自動で記述されていて、完全な手打ちで入力した場合と比べて何倍もの速さでマークアップできる事が分かりますね。

ul>li*3と入力するとulの中にliを3つ自動で記述してくれたりと大変便利です。

Emmetチートシート

Emmetの公式チートシートが公開されています。
Emmetには無数の省略記法がありこのブログでは紹介しきれないので、是非そちらに目を通してみてください。
よく使うタグだけでも覚えてしまえばマークアップが格段に速くなるかと思います。

最後までご覧頂きありがとうございました。