VS CodeでのEmmetの使い方ガイド

カテゴリー: 中級 タグ: , , ,

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の生成

入力出力
m10margin: 10px;
p10-20padding: 10px 20px;
bgc#cccbackground-color: #ccc;
w100width: 100px;
pos-aposition: absolute;

Emmetの設定方法

  1. 設定ファイルを開く
    • VS Codeのコマンドパレット（Ctrl + Shift + P / Cmd + Shift + P）で Preferences: Open Settings (JSON) を選択します。
  2. 設定を追加する 以下を設定ファイルに追加することで、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記法でラップできます。

  1. コードを選択。
  2. Ctrl + Shift + P / Cmd + Shift + P を押して、Emmet: Wrap with Abbreviation を選択。
  3. ラップするEmmet記法を入力。

自動補完

VS CodeではEmmetの補完が入力中に自動的に表示されます。補完を有効にするには、Tabキーで展開を行えます。

チートシート

Emmetの全機能を網羅したチートシートは以下のリンクから確認できます：

Emmet Cheat Sheet

まとめ

Emmetは、HTMLやCSSの作業を大幅に効率化する便利なツールです。慣れるまではチートシートを参考にしつつ、自分のプロジェクトで活用してみてください！