Visual Studio CodeにはEmmet（エメット）という入力を自動補完する機能が組み込まれています。キーワードの入力だけで対応した正しいコードに展開してくれるため、コーディングの高速化やタイプミスの削減（バグの削減）が望めます。
本記事ではHTMLファイル記述時によく使用するEmmetの記法についてまとめます。
Emmetの自動補完記法と動作例（HTML)
Emmetの自動補完記法（HTML編）
HTMLテンプレートの展開（スニペット）
!を入力しTabキー押下でHTML5のテンプレートが展開されます。
!
↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
HTML要素の展開
HTML要素の展開
基本となるHTML要素の自動補完です。
HTMLタグ名を入力しTabキー押下で<HTMLタグ></HTMLタグ>の形式に自動で補完してくれます。
button
⇒ <button></button>
HTML要素の展開では以下の通り属性の付与を併せて行うことができます。
id属性の付与
HTMLタグ#id名を入力しTabキー押下で<HTMLタグ id=”id名”></HTMLタグ>の形式で展開されます。HTMLタグ名を省略して#id名だけ入力した場合は自動的にdiv要素となります。
button#idname
⇒ <button id="idname"></button>
== HTMLタグを省略した場合はdiv ==
#idname
⇒ <div id="idname"></div>
class属性の付与
HTMLタグ.class名を入力しTabキー押下で<HTMLタグ class=”class名”></HTMLタグ>の形式で展開されます。HTMLタグ名を省略して.class名だけ入力した場合は自動的にdiv要素となります。
button.classname
⇒ <button class="classname"></button>
== HTMLタグを省略した場合はdiv ==
.classname
⇒ <div class="classname"></div>要素内容（文字列）の設定
HTMLタグ{文字列}を入力しTabキー押下で<HTMLタグ>文字列</HTMLタグ>の形式で展開されます。
button{ないよう}
⇒ <button>ないよう</button>id、class、内容は組み合わせて指定可能です。
#idname.classname{あいうえお}
⇒ <div id="idname" class="classname">あいうえお</div>
複数のHTML要素の一括展開
一度に複数のHTML要素を展開する場合は+で結合して記載しTabキーを押下します。
button+span+div
↓
<button></button>
<span></span>
<div></div>
== 一緒にidやclassを付与することも可能 ==
button.classname+span#idname+.classname{divの中身}
↓
<button class="classname"></button>
<span id="idname"></span>
<div class="classname">divの中身</div>
階層構造があるHTML要素の展開
親子関係のあるHTML要素を展開する場合は>で結合して記載しTabキーを押下します。
content>div>span
↓
<content>
<div><span></span></div>
</content>
== 一緒にidやclassを付与する ==
content.classname>.classname>span{内容}
↓
<content class="classname">
<div class="classname"><span>内容</span></div>
</content>
応用：()で複数要素を括って子要素として入れることも可能
content>(div+span)
↓
<content>
<div></div>
<span></span>
</content>
HTML要素の繰り返し
HTMLでは同じHTMLタグを繰り返すことが良くあります。*繰り返し回数をHTMLタグに対して指定することで自動的に繰り返し回数分展開されます。
button.btn*2
↓
<button class="btn"></button>
<button class="btn"></button>
繰り返し要素に対する自動採番
idまたはclassに$記号を付与することで$が番号に自動で置き換わります。桁数を固定とする場合は$$など$の数を増やします。（前0表記となります。）
== idとclass両方に採番 ==
btn#id$$.class$$*2
↓
<button id="id01" class="class01"></button>
<button id="id02" class="class02"></button>
== 親子関係のある要素の子供を繰り返す ==
ul.xxlist>li.item$$*3
↓
<ul class="xxlist">
<li class="item01"></li>
<li class="item02"></li>
<li class="item03"></li>
</ul>
応用：()で複数要素を括って繰り返すことも可能
content>(div>span)*2
↓
<content>
<div><span></span></div>
<div><span></span></div>
</content>
まとめ
Emmetによる自動補完の記法について解説しました。
各記法を自由に組み合わせて使うことが可能ですので、今回説明した以外にも様々なパターンで使うことができます。是非お役立てください。
勉強中の身ですので、誤りや不備等ありましたらご指摘いただけますと幸いです。
