VS Codeのエージェントモードを拡張するには、を試してください！

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

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 設定を通じてグローバルに、または現在の省略形に直接使用することです。

以下は、emmet.syntaxProfiles 設定を使用して HTML ファイルのすべての省略形に bem フィルターを適用する最初の方法の例です。

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

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

BEM フィルター (bem)

HTML を記述する際に Block Element Modifier (BEM) 方式を使用する場合、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 の設定を使用してこのフィルターをカスタマイズできます。

VS Code Emmet 2.0 では、filter.commentAfter 設定の形式が異なります。

たとえば、以下のようにする代わりに

"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
スニペットと省略形 snippets と abbreviations という 2 つの別々のプロパティで両方をサポート この 2 つは snippets という単一のプロパティに統合されました。既定のHTML スニペットとCSS スニペットを参照してください。
CSS スニペット名 : を含むことができる スニペット名を定義するときに : を使用しないでください。Emmet が指定された省略形をいずれかのスニペットにファジーマッチングしようとするときに、プロパティ名と値を区切るために使用されます。
CSS スニペット値 ; で終えることができる スニペット値の末尾に ; を追加しないでください。Emmet は、ファイルタイプ (css/less/scss 対 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

    この設定を使用して、選択した言語と Emmet がサポートする言語の間にマッピングを追加し、後者の構文を使用して前者の言語で 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

    この値を true に設定すると、Tab キーで Emmet の省略形を展開できるようになります。展開する省略形がない場合に、適切な代替手段としてインデントを提供するためにこの設定を使用します。

  • emmet.showSuggestionsAsSnippets

    true に設定すると、Emmet の提案は他のスニペットと一緒にグループ化され、editor.snippetSuggestions 設定に従って順序付けできるようになります。Emmet の提案が常に他の提案の中で最上位に表示されるようにするには、これを true に、editor.snippetSuggestions を top に設定してください。

  • 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

    Emmet 2.0 では、filter.commentAfter 設定の形式が異なり、よりシンプルです。

    たとえば、古い形式の代わりに

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

    以下を使用します。

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

    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 Actions に記載されている他のすべての Emmet 機能を探索してください。
  • 独自のカスタム Emmet スニペットを気軽に作成してください。
07/09/2025