HTMLを書いていると、<、>、閉じタグ……と、同じ記号を何度も打つのがだんだん面倒になってきます。そこで登場するのが Emmet（エメット）。短い合言葉を打って Tab を押すと、長いタグにパッと展開してくれる魔法です。しかも VSCodeには最初から入っているので、何も入れなくてすぐ使えます。
まずはこれ！ HTMLの雛形を一発で
新しい .html ファイルで、半角の ! を1文字だけ打って Tab。すると——
! → Tab<!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><!DOCTYPE html> から <html>・<head>・<body> まで、HTMLの“骨組み”がまるごと出てきます。毎回手で書いていた雛形が、たった1文字で完成です。
中身の文字も一緒に
{} の中に書いた文字は、そのままタグの中身になります。
h1{はじめての見出し}→<h1>はじめての見出し</h1>a{もっと見る}→<a href="">もっと見る</a>
つなげて、まとめて作る
Emmetの本領は、記号でタグを“組み立て”られること。
| 記号 | 意味 | 例 |
|---|---|---|
> | 子（中に入れる） | ul>li |
+ | 兄弟（となりに並べる） | h1+p |
* | くり返し | li*3 |
() | グループ | (li>a)*3 |
たとえば ul>li*3 と打って Tab：
ul>li*3 → Tab<ul>
<li></li>
<li></li>
<li></li>
</ul>リストの箱と中身3つが、一瞬で出そろいます。
クラスやIDも記号で付けられる
CSSと同じ書き方で、class や id も一緒に指定できます。
| 記号 | 意味 | 例 |
|---|---|---|
. | class | div.card |
# | id | div#header |
div.card → Tab<div class="card"></div>. と # は組み合わせもできます。div.card#main なら <div class="card" id="main"></div> が一発で出ます。タグ名は省略もOKで、.card とだけ打っても div.card と同じ結果になります。
連番をつけて一気に量産する
$ を使うと、繰り返しの中で連番を振れます。
li.item$*3 → Tab<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>同じクラス名を1つずつ手で打ち直す必要がなくなります。$$（$を重ねる）にすると item01 のように0埋めの連番になります。
最初から全部おぼえなくて大丈夫。まずは「! で雛形」と「ul>li*3」の2つだけ使ってみてね。手が勝手におぼえるよ〜
まとめ
!→TabでHTMLの雛形を一発で出せるh1{...}のように{}でタグの中身も一緒に書けるul>li*3のように>*でタグを組み立てられるdiv.card#mainでクラス・IDも、li.item$*3で連番も一発で出せる
タグ打ちの手間が減ると、その分「何を作るか」に集中できます。