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 候補の中でソートされて候補リストに表示されます。

Emmet 展開に Tab キーを使用する

Emmet の省略形の展開に Tab キーを使用する場合は、次の設定を追加します。

"emmet.triggerExpansionOnTab": true

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

quickSuggestions が無効になっている場合の Emmet

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

候補で Emmet を無効にする

候補に Emmet の省略形をまったく表示したくない場合は、次の設定を使用します。

"emmet.showExpandedAbbreviation": "never"

Emmet: 省略形の展開コマンドを使用して、省略形を展開することもできます。また、コマンド ID editor.emmet.action.expandAbbreviation に任意のキーボードショートカットをバインドすることもできます。

Emmet 候補の順序

Emmet 候補を常に候補リストの一番上に表示するには、次の設定を追加します。

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

他のファイル形式での Emmet の省略形

デフォルトで使用できないファイル形式で Emmet の省略形展開を有効にするには、emmet.includeLanguages 設定を使用します。マッピングの両側で言語識別子を使用し、右側を Emmet がサポートする言語の言語識別子にします (上記のリストを参照)。

例:

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

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

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

注: 新しいファイル形式をマッピングするために以前に emmet.syntaxProfiles を使用した場合、VS Code 1.15 以降では、代わりに emmet.includeLanguages 設定を使用する必要があります。emmet.syntaxProfiles は、最終出力のカスタマイズのみを目的としています。

マルチカーソルでの Emmet

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

Emmet with multi cursors

フィルターの使用

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

以下は、HTML ファイル内のすべての省略形に bem フィルターを適用するために emmet.syntaxProfiles 設定を使用する最初のアプローチの例です。

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

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

BEM フィルター (bem)

Block Element Modifier (BEM) の HTML の書き方を使用している場合は、bem フィルターが非常に役立ちます。bem フィルターの使用方法の詳細については、Emmet の BEM フィルターをお読みください。

このフィルターは、Emmet Preferences で文書化されている 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 Preferences で文書化されている 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: 省略形でラップコマンドの省略形を提供する場合にのみ適用できます。これは、ラップされた行から行マーカーを削除します。

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

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

以下は、この 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}"
    }
  }
}

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

トピック	古い Emmet	Emmet 2.0
スニペット vs 省略形	`snippets` および `abbreviations` という 2 つの独立したプロパティで両方をサポート	2 つは、snippets という単一のプロパティに結合されました。デフォルトのHTML スニペットとCSS スニペットを参照してください。
CSS スニペット名	`:` を含めることができます	スニペット名を定義するときは `:` を使用しないでください。これは、Emmet が指定された省略形をスニペットの 1 つにファジーマッチしようとするときに、プロパティ名と値を区切るために使用されます。
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 が省略形をスニペットの 1 つにファジーマッチしようとするときに、プロパティ名と値を区切るために使用されます。

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

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

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

Emmet の構成

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

emmet.includeLanguages

この設定を使用して、任意の言語と Emmet がサポートする言語の 1 つの間のマッピングを追加し、後者の構文を使用して前者の言語で Emmet を有効にします。マッピングの両側で言語 ID を使用してください。

例:
```
"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "plaintext": "pug"
}
```
emmet.excludeLanguages

Emmet 展開を表示したくない言語がある場合は、言語 ID 文字列の配列を受け取るこの設定に追加します。
emmet.syntaxProfiles

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

例:
```
"emmet.syntaxProfiles": {
  "html": {
    "attr_quotes": "single"
  },
  "jsx": {
    "self_closing_tag": true
  }
}
```
emmet.variables

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

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

emmet.showExpandedAbbreviation

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

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

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

emmet.showAbbreviationSuggestions

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

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

スタイルシートでは適用できません。また、emmet.showExpandedAbbreviation が never に設定されている場合は適用できません。
emmet.extensionsPath

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

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

true に設定すると、Emmet 候補は他のスニペットと一緒にグループ化され、editor.snippetSuggestions 設定に従って順序付けられるようになります。これを true に設定し、editor.snippetSuggestions を top に設定すると、Emmet 候補が常に他の候補の中で一番上に表示されるようになります。
emmet.preferences

この設定を使用すると、Emmet Preferences で文書化されているように 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 Preferences で文書化されている他の設定のいずれかのサポートが必要な場合は、機能リクエストをログに記録してください。

次のステップ

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

HTML - VS Code は、IntelliSense、閉じタグ、およびフォーマットで HTML をサポートしています。
CSS - CSS、SCSS、および Less を豊富にサポートしています。

トラブルシューティング

カスタムタグは候補リストに展開されません

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

すべての場合においてカスタムタグを展開するタブを使用して Emmet 省略形の展開を有効にするには、次の設定を追加します。

"emmet.triggerExpansionOnTab": true

`+` で終わる HTML スニペットが機能しません

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

省略形が展開に失敗する

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

省略形がまだ展開に失敗する場合

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

Emmet preferences で文書化されているすべての設定はどこで設定できますか?

設定は、emmet.preferences 設定を使用して設定できます。Emmet preferences で文書化されている設定のサブセットのみをカスタマイズできます。Emmet 構成の「設定」セクションをお読みください。

ヒントとテクニックはありますか?

もちろんあります!

CSS 省略形では、: を使用すると、左側の部分は CSS プロパティ名とのファジーマッチに使用され、右側の部分は CSS プロパティ値とのマッチに使用されます。pos:f、trf:rx、fw:b などの省略形を最大限に活用してください。
Emmet アクションで文書化されている他のすべての Emmet 機能を探求してください。
独自のカスタム Emmet スニペットを作成することを躊躇しないでください。

04/03/2025