VisualStudioCodeのEmmet機能を使う
2015/07/08
Emmetとは
Emmetは、HTMLを高速コーディングするための入力補完機能です。HTMLの入力補完機能というよりは、HTML記述の超簡略化機能という表現のほうが近いかもしれません。(一昔前までは、ZenCodingと呼ばれていました。)
VisualStudioCodeのEmmet機能を使う
このEmmetの補完機能はSublimeなどのエディタにはプラグイン形式で提供されており、エディタ導入後にパッケージをインストール必要があります。
VisualStudioCodeの場合、Emmetの機能が組み込みで提供されています。VisualStudioCodeと聞くと、重厚なIDEというイメージを持たれる方も多いと思いますが、実際は重厚なIDEとメモ帳の中間くらいの使用感です。
VisualStudioCodeのインストール
VisualStudioCodeは次のURLからダウンロードできます
https://code.visualstudio.com/
Macでbrew caskを使ってインストールする場合は次のコマンドを実行してください。
[shell]
brew cask install visual-studio-code
[/shell]
Emmetの使い方
HTMLの雛形を入れる
HTMLのテンプレートを作るのは「!」を入力したあとに、Tabキーを押します。結果は次の通りです。
エディタの設定によっては、lang=”en”のままになっていることに注意してください。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
</head>
<body></body>
</html>
タグのなかにタグを入れる
HTMLのテンプレートを作るのは「a>img」を入力したあとに、Tabキーを押します。aタグの中にimgタグを入れるという意味と考えてください。
結果は次の通りです。
画像を埋め込むときにリンクも追加するという手法はよく使いますね。
<a href=””><img src=”” alt=””></a>
記法を組み合わせて使う
たとえば「(h3#postlin3{h3タイトルを書く}+p{文章})*3>(h4#postline4{h4タイトルを書く}+p{文章})*2」を入力したあとTabキーを押すことで、次のHTMLコードを書くことができます。
<h3 id=”postlin3″>h3タイトルを書く</h3>
<p>文章</p>
<h4 id=”postline4″>h4タイトルを書く</h4>
<p>文章</p>
<h4 id=”postline4″>h4タイトルを書く</h4>
<p>文章</p>
<h3 id=”postlin3″>h3タイトルを書く</h3>
<p>文章</p>
<h4 id=”postline4″>h4タイトルを書く</h4>
<p>文章</p>
<h4 id=”postline4″>h4タイトルを書く</h4>
<p>文章</p>
<h3 id=”postlin3″>h3タイトルを書く</h3>
<p>文章</p>
<h4 id=”postline4″>h4タイトルを書く</h4>
<p>文章</p>
<h4 id=”postline4″>h4タイトルを書く</h4>
<p>文章</p>
少しこの記述の解説をします。「（ ）」と「>」に注目してみると、先ほどのaタグの中にimgタグが入っている構造と同じです。
さらに、この記法には繰り返しが含まれいてます。先ほどのaタグに相当する部分「(h3#poslin3{h3タイトルを書く}+p{文章})」は３回繰り返され、それぞれの繰り返しに対して「(h4#postline4{h4タイトルを書く}+p{文章})」が２回繰り返されます。
そして、「#」「.」「{ }」の記号を使うことで、指定したタグのクラス指定や属性指定などもできます。
その他の補完機能/h4>
たくさんの補完機能があるため、ここではその全てを紹介しきれません。下のリンクからチートシートをご覧頂き、少しずつ使える補完機能を増やしていくと良いと思います。
http://docs.emmet.io/cheat-sheet/
まとめ
以上、VisualStudioCodeとEmmetの紹介でした。HTMLの記述を理解されているかたであれば、Emmetを使うことで冗長なHTML記述を簡略化できると思います。
