Emmetとは？
Emmetは、HTMLやCSSを書く際にコードの入力を効率化するための強力なツールです。VS Codeではデフォルトでサポートされており、開発者が短い記法で複雑なコードを簡単に生成できます。
Emmetの基本構文
HTMLの生成
| 入力 | 出力 |
|---|---|
div | <div></div> |
ul>li*5 | <ul><li></li><li></li><li></li><li></li><li></li></ul> |
a[href=""] | <a href=""></a> |
header+main+footer | <header></header><main></main><footer></footer> |
table>tr*3>td*2 | <table><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table> |
CSSの生成
| 入力 | 出力 |
m10 | margin: 10px; |
p10-20 | padding: 10px 20px; |
bgc#ccc | background-color: #ccc; |
w100 | width: 100px; |
pos-a | position: absolute; |
Emmetの設定方法
- 設定ファイルを開く
- VS Codeのコマンドパレット（
Ctrl+Shift+P/Cmd+Shift+P）でPreferences: Open Settings (JSON)を選択します。
- VS Codeのコマンドパレット（
- 設定を追加する 以下を設定ファイルに追加することで、Emmetの動作をカスタマイズできます：
"emmet.includeLanguages": { "javascript": "javascriptreact" }, "emmet.triggerExpansionOnTab": true }
emmet.includeLanguages: Emmetを特定の言語で有効化。
emmet.triggerExpansionOnTab: TabキーでEmmetを展開する。よく使うショートカット
| ショートカット | 説明 |
! | HTML5の基本テンプレートを生成 |
div.classname | 特定のクラス名を持つdivを生成 |
input:checkbox+label | チェックボックスとラベルを生成 |
nav>ul>li*3>a | ナビゲーションのリストを作成 |
便利な機能
ラップウィズアボーション (Wrap with Abbreviation)
選択したコードを特定のEmmet記法でラップできます。
- コードを選択。
Ctrl+Shift+P/Cmd+Shift+Pを押して、Emmet: Wrap with Abbreviationを選択。- ラップするEmmet記法を入力。
自動補完
VS CodeではEmmetの補完が入力中に自動的に表示されます。補完を有効にするには、Tabキーで展開を行えます。
チートシート
Emmetの全機能を網羅したチートシートは以下のリンクから確認できます：
まとめ
Emmetは、HTMLやCSSの作業を大幅に効率化する便利なツールです。慣れるまではチートシートを参考にしつつ、自分のプロジェクトで活用してみてください！