Visual Studio Code における Emmet

Emmet スニペットと展開のサポートは Visual Studio Code に組み込まれており、拡張機能は不要です。Emmet 2.0 は、Emmet の省略記法とスニペットの展開を含む、ほとんどの Emmet アクションをサポートしています。

Emmet の省略記法とスニペットを展開する方法

Emmet の省略記法とスニペットの展開は、html、haml、pug、slim、jsx、xml、xsl、css、scss、sass、less、stylus ファイル、および handlebars や php のようにこれらを継承する言語でデフォルトで有効になっています。

Emmet in suggestion/auto-completion list

Emmet の省略記法を入力し始めると、候補リストにその省略記法が表示されます。候補のドキュメントのフライアウトが開いている場合は、入力に合わせて展開後のプレビューが表示されます。スタイルシートファイルの場合、展開された省略記法は他の CSS 候補と並んで候補リストに表示されます。

Tab キーによる Emmet 展開の使用

Emmet の省略記法を展開するために Tab キーを使用したい場合は、以下の設定を追加してください。

"emmet.triggerExpansionOnTab": true

この設定により、テキストが Emmet の省略記法ではない場合に、Tab キーをインデントに使用できるようになります。

quickSuggestions が無効な場合の Emmet

editor.quickSuggestions Open in VS Code Open in VS Code Insiders 設定を無効にしている場合、入力時に候補は表示されません。しかし、⌃Space (Windows, Linux では Ctrl+Space) を押すことで手動で候補をトリガーし、プレビューを表示することができます。

候補での Emmet を無効にする

候補に Emmet の省略記法を一切表示したくない場合は、以下の設定を使用してください。

"emmet.showExpandedAbbreviation": "never"

引き続き、Emmet: Expand Abbreviation コマンドを使用して省略記法を展開できます。また、コマンド ID editor.emmet.action.expandAbbreviation にキーボードショートカットを割り当てることも可能です。

Emmet 候補の順序

Emmet の候補を常に候補リストの先頭に表示させるには、以下の設定を追加してください。

"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top"

他のファイルタイプでの Emmet 省略記法

デフォルトで利用できないファイルタイプで Emmet の省略記法の展開を有効にするには、 emmet.includeLanguages Open in VS Code Open in VS Code Insiders 設定を使用します。マッピングの両側に言語識別子を使用し、右側には Emmet がサポートする言語の識別子（上記のリストを参照）を指定してください。

例えば

"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "razor": "html",
  "plaintext": "pug"
}

Emmet はこれらの新しい言語を認識していないため、HTML/CSS 以外のコンテキストで Emmet の候補が表示される可能性があります。これを避けるには、以下の設定を使用できます。

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

注: 以前に新しいファイルタイプをマッピングするために emmet.syntaxProfiles Open in VS Code Open in VS Code Insiders を使用していた場合、VS Code 1.15 以降では emmet.includeLanguages Open in VS Code Open in VS Code Insiders 設定を使用してください。 emmet.syntaxProfiles Open in VS Code Open in VS Code Insiders は、最終的な出力のカスタマイズ専用です。

マルチカーソルでの Emmet

ほとんどの Emmet アクションはマルチカーソルでも使用できます。

Emmet with multi cursors

フィルターの使用

フィルターは、展開された省略記法がエディターに出力される前にそれを変更する特別なポストプロセッサーです。フィルターを使用するには 2 つの方法があります。グローバルに emmet.syntaxProfiles Open in VS Code Open in VS Code Insiders 設定を介するか、現在の省略記法内で直接指定します。

以下は、HTML ファイル内のすべての省略記法に対して bem フィルターを適用するために emmet.syntaxProfiles Open in VS Code Open in VS Code Insiders 設定を使用する例です。

"emmet.syntaxProfiles": {
  "html": {
    "filters": "bem"
  }
}

現在の省略記法のみにフィルターを提供するには、省略記法にフィルターを付加します。例えば、div#page|c は div#page の省略記法に comment フィルターを適用します。

BEM フィルター (bem)

HTML を記述する方法として Block Element Modifier (BEM) を使用している場合、bem フィルターは非常に便利です。bem フィルターの使用方法の詳細については、Emmet の BEM フィルターをお読みください。

Emmet の環境設定に記載されているように、bem.elementSeparator と bem.modifierSeparator プリファレンスを使用してこのフィルターをカスタマイズできます。

コメントフィルター (c)

このフィルターは、重要なタグの周囲にコメントを追加します。デフォルトでは、「重要なタグ」とは id または class 属性を持つタグのことです。

例えば div>div#page>p.title+p|c は次のように展開されます。

<div>
    <div id="page">
        <p class="title"></p>
        <!-- /.title -->
        <p></p>
    </div>
    <!-- /#page -->
</div>

Emmet の環境設定に記載されているように、filter.commentTrigger、filter.commentAfter、filter.commentBefore プリファレンスを使用してこのフィルターをカスタマイズできます。

filter.commentAfter プリファレンスの形式は、VS Code の Emmet 2.0 では異なります。

例えば、以下ではなく

"emmet.preferences": {
  "filter.commentAfter": "\n<!-- /<%= attr('id', '#') %><%= attr('class', '.') %> -->"
}

VS Code では、よりシンプルな以下を使用します。

"emmet.preferences": {
  "filter.commentAfter": "\n<!-- /[#ID][.CLASS] -->"
}

トリムフィルター (t)

このフィルターは、Emmet: Wrap with Abbreviation コマンドに省略記法を提供する場合にのみ適用されます。ラップされた行から行マーカーを削除します。

カスタム Emmet スニペットの使用

カスタム Emmet スニペットは、snippets.json という名前の json ファイルで定義する必要があります。 emmet.extensionsPath Open in VS Code Open in VS Code Insiders 設定に、このファイルが含まれるディレクトリへのパスを指定する必要があります。

以下は、この snippets.json ファイルの内容の例です。

{
  "html": {
    "snippets": {
      "ull": "ul>li[id=${1} class=${2}]*2{ Will work with html, pug, haml and slim }",
      "oll": "<ol><li id=${1} class=${2}> Will only work in html </ol>",
      "ran": "{ Wrap plain text in curly braces }"
    }
  },
  "css": {
    "snippets": {
      "cb": "color: black",
      "bsd": "border: 1px solid ${1:red}",
      "ls": "list-style: ${1}"
    }
  }
}

Emmet 2.0 における snippets.json ファイルを介したカスタムスニペットの作成は、以前の方法といくつか異なります。

トピック	旧 Emmet	Emmet 2.0
スニペット vs 省略記法	`snippets` と `abbreviations` という 2 つの別々のプロパティで両方をサポート	これら 2 つは `snippets` という単一のプロパティに結合されました。デフォルトの HTML スニペットと CSS スニペットを参照してください。
CSS スニペット名	`:` を含めることができる	スニペット名を定義する際に `:` を使用しないでください。これは、Emmet が指定された省略記法をスニペットのいずれかにあいまい一致させようとする際に、プロパティ名と値を分離するために使用されます。
CSS スニペット値	`;` で終わることができる	スニペット値の末尾に `;` を追加しないでください。Emmet はファイルタイプ（css/less/scss vs sass/stylus）または `css.propertyEnd`、`sass.propertyEnd`、`stylus.propertyEnd` 用に設定された Emmet プリファレンスに基づいて末尾の `;` を追加します。
カーソル位置	`${cursor}` または `\|` が使用可能	タブストップとカーソル位置には `${1}` のような Textmate 構文のみを使用してください。

HTML Emmet スニペット

HTML カスタムスニペットは、haml や pug などの他のすべてのマークアップフレーバーに適用可能です。スニペット値が省略記法であり実際の HTML ではない場合、適切な変換が適用され、言語タイプに応じた正しい出力が得られます。

例えば、リストアイテムを持つ順序なしリストの場合、スニペット値が ul>li ならば、html、haml、pug、slim で同じスニペットを使用できますが、スニペット値が <ul><li></li></ul> であれば、html ファイルでのみ機能します。

プレーンテキストのスニペットが必要な場合は、テキストを {} で囲んでください。

CSS Emmet スニペット

CSS Emmet スニペットの値は、完全なプロパティ名と値のペアである必要があります。

CSS カスタムスニペットは、scss、less、sass などの他のすべてのスタイルシートフレーバーに適用可能です。したがって、スニペット値の末尾に末尾の ; を含めないでください。言語が必要とするかどうかに基づいて、Emmet が必要に応じて追加します。

スニペット名に : を使用しないでください。: は、Emmet が省略記法をスニペットのいずれかにあいまい一致させようとする際に、プロパティ名と値を分離するために使用されます。

カスタムスニペット内のタブストップとカーソル

カスタム Emmet スニペットのタブストップ構文は、Textmate スニペット構文に従います。

タブストップには ${1}、${2} を、プレースホルダー付きのタブストップには ${1:placeholder} を使用します。
以前は、カスタム Emmet スニペット内のカーソル位置を示すために | または ${cursor} が使用されていました。これは現在サポートされていません。代わりに ${1} を使用してください。

Emmet の設定

VS Code で Emmet エクスペリエンスをカスタマイズするために使用できる Emmet 設定を以下に示します。

emmet.includeLanguages Open in VS Code Open in VS Code Insiders

この設定を使用して、選択した言語と Emmet 対応言語の間のマッピングを追加し、後者の構文を使用して前者の言語で Emmet を有効にします。マッピングの両側に言語 ID を使用してください。

例えば
```
"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "plaintext": "pug"
}
```
emmet.excludeLanguages Open in VS Code Open in VS Code Insiders

Emmet の展開を表示したくない言語がある場合は、言語 ID 文字列の配列を受け取るこの設定に追加してください。
emmet.syntaxProfiles Open in VS Code Open in VS Code Insiders

HTML 省略記法の出力をカスタマイズする方法については、Emmet の出力プロファイルのカスタマイズを参照してください。

例えば
```
"emmet.syntaxProfiles": {
  "html": {
    "attr_quotes": "single"
  },
  "jsx": {
    "self_closing_tag": true
  }
}
```
emmet.variables Open in VS Code Open in VS Code Insiders

Emmet スニペットで使用される変数をカスタマイズします。

例えば
```
"emmet.variables": {
  "lang": "de",
  "charset": "UTF-16"
}
```

emmet.showExpandedAbbreviation Open in VS Code Open in VS Code Insiders

候補/補完リストに表示される Emmet の候補を制御します。

設定値	説明
`never`	どの言語でも、候補リストに Emmet の省略記法を表示しません。
`inMarkupAndStylesheetFilesOnly`	純粋にマークアップとスタイルシートに基づく言語（'html'、'pug'、'slim'、'haml'、'xml'、'xsl'、'css'、'scss'、'sass'、'less'、'stylus'）に対してのみ Emmet の候補を表示します。
`always`	すべての Emmet サポートモード、および emmet.includeLanguages Open in VS Code Open in VS Code Insiders 設定にマッピングがある言語で Emmet の候補を表示します。

注: always モードでは、新しい Emmet 実装はコンテキストを認識しません。例えば、JavaScript React ファイルを編集している場合、マークアップを書いているときだけでなく、JavaScript を書いているときにも Emmet の候補が表示されます。

emmet.showAbbreviationSuggestions Open in VS Code Open in VS Code Insiders

可能な Emmet の省略記法を候補として表示します。デフォルトは true です。

例えば、li と入力すると、link、link:css、link:favicon など、li で始まるすべての Emmet スニペットの候補が得られます。これは、Emmet チートシートを暗記していない限り知らなかったような Emmet スニペットを学ぶのに役立ちます。

スタイルシート内や、 emmet.showExpandedAbbreviation Open in VS Code Open in VS Code Insiders が never に設定されている場合は適用されません。
emmet.extensionsPath Open in VS Code Open in VS Code Insiders

カスタムスニペットが含まれる snippets.json ファイルを格納するディレクトリの場所を指定します。
emmet.triggerExpansionOnTab Open in VS Code Open in VS Code Insiders

Tab キーで Emmet の省略記法を展開できるようにするには、これを true に設定します。この設定を使用して、展開する省略記法がない場合にインデントを提供する適切なフォールバックを提供します。
emmet.showSuggestionsAsSnippets Open in VS Code Open in VS Code Insiders

true に設定すると、Emmet の候補が他のスニペットとグループ化され、 editor.snippetSuggestions Open in VS Code Open in VS Code Insiders 設定に従って順序を付けることができます。Emmet の候補が常に他の候補の先頭に表示されるようにするには、これを true に設定し、 editor.snippetSuggestions Open in VS Code Open in VS Code Insiders を top に設定してください。
emmet.preferences Open in VS Code Open in VS Code Insiders

この設定を使用して、Emmet の環境設定に記載されているように Emmet をカスタマイズできます。以下のカスタマイズが現在サポートされています。
- css.propertyEnd
- css.valueSeparator
- sass.propertyEnd
- sass.valueSeparator
- stylus.propertyEnd
- stylus.valueSeparator
- css.unitAliases
- css.intUnit
- css.floatUnit
- bem.elementSeparator
- bem.modifierSeparator
- filter.commentBefore
- filter.commentTrigger
- filter.commentAfter
- format.noIndentTags
- format.forceIndentationForTags
- profile.allowCompactBoolean
- css.fuzzySearchMinScore
filter.commentAfter プリファレンスの形式は、Emmet 2.0 では異なり、よりシンプルになっています。

例えば、古い形式ではなく
```
"emmet.preferences": {
  "filter.commentAfter": "\n"
}
```
以下のように使用します。
```
"emmet.preferences": {
  "filter.commentAfter": "\n"
}
```
Emmet の環境設定に記載されている他のプリファレンスのサポートが必要な場合は、機能リクエストをログしてください。

次のステップ

Emmet は、VS Code の優れた Web 開発者向け機能の 1 つにすぎません。以下について読み進めてください。

HTML - VS Code は、IntelliSense、終了タグ、フォーマットを使用して HTML をサポートしています。
CSS - CSS、SCSS、Less の豊富なサポートを提供しています。

トラブルシューティング

カスタムタグが候補リストで展開されない

MyTag>YourTag や MyTag.someclass のような式で使用されるカスタムタグは候補リストに表示されます。しかし、MyTag のようにそれらだけで使用される場合、候補リストには表示されません。これは、すべての単語が潜在的なカスタムタグであり、候補リストがノイズで溢れるのを防ぐための設計です。

Tab を使用して Emmet の省略記法を展開できるようにするには、以下の設定を追加してください。これにより、すべての場合でカスタムタグが展開されます。

"emmet.triggerExpansionOnTab": true

`+` で終わる HTML スニペットが機能しない

Emmet チートシートの select+ や ul+ のように + で終わる HTML スニペットはサポートされていません。これは Emmet 2.0 の既知の問題です。Issue: emmetio/html-matcher#1。回避策は、そのようなシナリオのために独自のカスタム Emmet スニペットを作成することです。

省略記法が展開されない

まず、カスタムスニペットを使用しているかどうかを確認してください（ emmet.extensionsPath Open in VS Code Open in VS Code Insiders 設定によって読み込まれる snippets.json ファイルがある場合）。VS Code リリース 1.53 でカスタムスニペットの形式が変更されました。カーソル位置を示すために | を使用する代わりに、${1}、${2} などのトークンを使用してください。emmetio/emmet リポジトリのデフォルトの CSS スニペットファイルに、新しいカーソル位置形式の例が示されています。

省略記法がまだ展開されない場合

組み込みの拡張機能を確認して、Emmet が無効になっていないか確認してください。
コマンドパレットで Developer: Restart Extension Host (workbench.action.restartExtensionHost) コマンドを実行して、拡張機能ホストを再起動してみてください。

Emmet の環境設定に記載されているすべてのプリファレンスをどこで設定できますか？

設定 emmet.preferences Open in VS Code Open in VS Code Insiders を使用してプリファレンスを設定できます。Emmet の環境設定に記載されているプリファレンスのサブセットのみがカスタマイズ可能です。Emmet の設定の下のプリファレンスセクションをお読みください。

何かヒントやコツはありますか？

もちろんです！

CSS の省略記法で : を使用すると、左側が CSS プロパティ名とのあいまい一致に使用され、右側が CSS プロパティ値との一致に使用されます。pos:f、trf:rx、fw:b などの省略記法を使用して、これを最大限に活用してください。
Emmet アクションに記載されている他のすべての Emmet 機能を探索してください。
独自のカスタム Emmet スニペットを気軽に作成してください。

5/28/2026