Emmetとは？
HTMLやCSSのコーディングを効率化するための機能拡張です。
特に、Web開発で頻繁に行うタグやクラスなどの記述を簡潔にし、
素早くコードを書くことができます。
機能拡張のインストール方法はこちらです。
Emmetの基本的な使い方
使い方は簡単。以下のような短文を入力して、Tabキーで決定するだけです。
HTMLの基本雛形が欲しい場合
「!」を入力するだけです。
展開されるコード↓ （注意：en → ja に変更します。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>開始タグと閉じタグも自動で展開される（クラスやID属性も）
入力
div展開されるコード
<div></div>入力
img展開されるコード srcとaltまで入力されるので便利です！
<img src="" alt="">入力
div#test.test展開されるコード
<div id="test" class="test"></div>子要素を自動入力
HTML要素の間に > を記述すると、子要素として展開される。
div>ul>li展開されるコード
<div>
<ul>
<li></li>
</ul>
</div>兄弟要素を自動入力
HTML要素の間に + を記述すると、兄弟要素として展開される。
入力
header+main+footer展開されるコード
<header></header>
<main></main>
<footer></footer>要素を複数展開する
HTML要素の後ろに *3 のように記述すると、複数のHTML要素が展開される。
入力
ul>li*3展開されるコード
<ul>
<li></li>
<li></li>
<li></li>
</ul>以下のように入力すると、あいだにa要素を入れる事も可能。
入力
ul>li*3>a展開されるコード
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>例えば、Bootstrap Icons（ブートストラップ アイコン）を入れたメニューを作りたい時に便利です。
（※ブートストラップアイコンのCDN導入方法は別記事にしたいと思います。）
入力 （※リンクさせないアイコンにしたい場合は「>a」を省く）
ul>li*3>a>i.bi展開されるコード
<ul>
<li><a href=""><i class="bi"></i></a></li>
<li><a href=""><i class="bi"></i></a></li>
<li><a href=""><i class="bi"></i></a></li>
</ul>そして下記のように、iタグのクラス “bi” に自分の入れたいブートストラップアイコンのクラスを追加します。
<i class="bi bi-youtube">最後にaタグのリンク先を入れたら完了です。
<ul>
<li><a href=""><i class="bi bi-instagram"></i></a></li>
<li><a href=""><i class="bi bi-youtube"></i></a></li>
<li><a href=""><i class="bi bi-facebook"></i></a></li>
<li><a href=""><i class="bi bi-twitter"></i></a></li>
</ul>連番を付けて展開する
入力
ul>li.item$*3
展開するコード
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>2桁にしたければ「$$」にします。
CSSでも使える
入力
m
展開されるコード
margin: ;
入力
m1rem
展開されるコード
margin: 1rem;
Emmetが使えない時の対処法
①VSCodeを開く
左下の歯車アイコン⚙をクリックする。
「Settings」（設定）を選ぶ。
②検索窓に「Trigger Expansion On Tab」と入力。
③Emmet:「Trigger Expansion On Tab」の項目をクリック。
④VSCodeを一旦終了させて再起動する。
まとめ
EmmetはWeb開発者にとって非常に便利なツールであり、コードの記述速度と正確性を向上させるために役立ちます。もしWeb開発をしているなら、ぜひ使ってみる価値があります。
Emmetのお勧めチートシートはこちらです
