がリリースされました！ 11月の新機能と修正についてお読みください。

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

フィルターの使用

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

以下は、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の設定に記載されているように、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設定を使用してカスタマイズできます。

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: Abbreviation で囲むコマンドの省略形を提供する場合にのみ適用されます。囲まれた行から行マーカーを削除します。

カスタム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}"
    }
  }
}

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

    この設定を使用して、選択した言語と Emmet でサポートされている言語のいずれかをマッピングし、後者の構文を使用して前者で Emmet を有効にします。マッピングの両側に言語 ID を使用してください。

    例えば

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

  • emmet.excludeLanguages

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

  • emmet.syntaxProfiles

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

    例えば

    "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 設定に従って順序付けることができます。Emmet 候補が他の候補の中で常に一番上に表示されるようにするには、これをtrueに、editor.snippetSuggestions をtopに設定します。

  • emmet.preferences

    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

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

    たとえば、以前の形式の代わりに

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

    を使用します

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

    Emmet 設定に記載されている他の設定のサポートが必要な場合は、機能リクエストを記録してください。

次の手順

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

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

トラブルシューティング

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

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

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

"emmet.triggerExpansionOnTab": true

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

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

省略形が展開に失敗しています

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

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

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

Emmet の設定 に記載されているすべての設定はどこで設定できますか？

emmet.preferences 設定を使用して設定できます。Emmet の設定 に記載されている設定の一部のみをカスタマイズできます。Emmet の構成 の設定セクションをご覧ください。

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

もちろんです！

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