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: 略語の展開コマンドを使用して略語を展開できます。また、コマンド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設定を使用する方法と、現在の略語で直接使用する方法です。

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

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

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

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で同じスニペットを使用できますが、スニペット値が

の場合、htmlファイルでのみ機能します。

プレーンテキストのスニペットが必要な場合は、テキストを{}で囲みます。

CSS Emmetスニペット

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

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

スニペット名に:を使用しないでください。Emmetが略語をスニペットの1つにファジーマッチさせようとするときに、プロパティ名と値を分離するために:が使用されます。

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

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

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

    TabキーでEmmetの略語を展開できるようにするには、これを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<!-- /<%= 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のように単独で使用される場合、提案リストには表示されません。これは、すべての単語が潜在的なカスタムタグであるため、提案リストのノイズを避けるために設計されています。

以下の設定を追加して、tabによる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スニペットを作成することをためらわないでください。
08/07/2025