同じタグを何個も打つのが面倒なら、Emmetの出番です。たとえばli*3からli要素を3個作れます。この記事では、省略記法と展開結果を並べ、最後に「Tabを押しても展開されない」ときの調べ方を説明します。
VS CodeにはEmmetが組み込まれています。まだエディタを用意していない場合は、VS Codeのインストールから進めてください。
Emmetとは何か？
Emmetは、省略記法をHTMLやCSSへ展開する入力補助です。VS Codeには組み込まれているため、基本機能のために別の拡張を入れる必要はありません。短いCSSのような構文（通称「エメット記法」）で記述し、VS Codeではコマンドパレットの「Emmet: Expand Abbreviation」で展開できます。TabやEnterで確定できるかは、候補表示やキーバインドの設定によって異なります。
例：
- 短縮記法:
div.container - 展開後のHTML:
<div class="container"></div>
繰り返すタグの入力を短くできますが、展開後の階層と属性は自分でも確認します。
Emmetの基本的な使い方
Emmetの記法は、CSSセレクタの書き方と非常によく似ています。
要素の生成
HTMLファイルにタグ名を入力し、コマンドパレットで「Emmet: Expand Abbreviation」を実行します。
header→<header></header>footer→<footer></footer>
クラスとIDの付与
.（ドット）でクラスを、#（ハッシュ）でIDを簡単に追加できます。
div.main→<div class="main"></div>p#intro→<p id="intro"></p>div#header.container→<div id="header" class="container"></div>
子要素と兄弟要素
>(子)：子要素を作成します。+(兄弟)：同じ階層に兄弟要素を作成します。ul>li→
<ul>
<li></li>
</ul>h1+p→
<h1></h1>
<p></p>div>h2+p→
<div>
<h2></h2>
<p></p>
</div>複数要素の生成
* (乗算)を使うことで、同じ要素を複数生成できます。
li*3
<li></li>
<li></li>
<li></li>属性の付与
[] (角括弧)を使って属性を追加します。
a[href="#"]→<a href="#"></a>img[src="logo.png" alt="ロゴ"]→<img src="logo.png" alt="ロゴ">
連番の付与
$ (ドルマーク)を使うと、要素に連番を振ることができます。
li.item$*3
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>Emmetでできること（応用編）
基本の展開を確かめたら、これらの記法を組み合わせて、さらに複数の要素をまとめて展開できます。
複合的なHTML構造の展開
div.wrapper>header.main-header+main.content>ul>li.item$*4
<div class="wrapper">
<header class="main-header"></header>
<main class="content">
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
</ul>
</main>
</div>CSSの展開
EmmetはCSSでも使えます。プロパティの短縮名を入力するだけで、完全なルールに展開されます。
m10→margin: 10px;p20→padding: 20px;bgc#fff→background-color: #fff;d:f→display: flex;
EmmetのCSS記法は、略語（m for margin）や、値（10 for 10px）の組み合わせで成り立っています。詳細な記法は、Emmetの公式ドキュメントで確認できます。
最初は、よく使う記法を一つだけ
Emmetは、HTMLとCSSの定型の入力を補助する、必要に応じて使える入力補助です。
- 短縮記法を覚える：
>、+、*、$、[]など、基本的な記号を覚えるだけで、ほとんどの構造を生成できます。 - 反復練習する： 最初のうちは慣れないかもしれませんが、何度も使って体に覚えさせましょう。
- 公式ドキュメントを活用する： 困ったときはEmmetの公式ドキュメントを調べれば、ほとんどの疑問は解決します。
まずは自分のページで繰り返し入力しているタグを一つ選び、展開前後の階層を比べてみてください。
展開されないときの確認
コマンドでは展開できるのに、Tabではできない場合
まずindex.htmlでul>li*3を入力し、コマンドパレットのEmmet: Expand Abbreviationを実行します。これで展開できるなら、入力した記法よりもTabの設定を調べる段階です。
VS Codeの設定を開き、emmet.triggerExpansionOnTabを検索して有効にします。JSONで管理している場合の設定は次のとおりです。既存のsettings.jsonを丸ごと置き換えず、同じキーがないか確認して追加してください。
{
"emmet.triggerExpansionOnTab": true
}コマンドでも展開しない場合は、右下の言語モードがHTMLか、入力位置がHTMLを書ける場所かを先に見ます。設定を増やす前に、別の空のHTMLファイルでも同じ結果か比べると、問題を絞れます。
展開する前のタグの意味はHTMLの基本構造、繰り返す項目を実際に配置する例はギャラリーへ。
補完や整形の道具を整理したい場合は、VS Codeの標準機能と拡張機能の選び方へ進めます。
