🚀 在 VS Code 中！

Visual Studio Code 中的 Emmet

Visual Studio Code 内置了对 Emmet 代码片段和展开的支持，无需安装扩展。Emmet 2.0 支持大多数 Emmet 操作，包括展开 Emmet 缩写和代码片段。

如何展开 Emmet 缩写和代码片段

默认情况下，在 html、haml、pug、slim、jsx、xml、xsl、css、scss、sass、less 和 stylus 文件以及任何继承自上述语言的语言（如 handlebars 和 php）中，Emmet 缩写和代码片段展开功能均已启用。

Emmet in suggestion/auto-completion list

当您开始键入 Emmet 缩写时，您将在建议列表中看到显示的缩写。如果您打开了建议文档浮出控件，您将在键入时看到展开的预览。如果您在样式表文件中，则展开的缩写会显示在建议列表中，并与其他 CSS 建议一起排序。

使用 Tab 键进行 Emmet 展开

如果您想使用 Tab 键展开 Emmet 缩写，请添加以下设置

"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 设置，或直接在当前缩写中。

以下是第一种方法的示例，使用 emmet.syntaxProfiles 设置为 HTML 文件中的所有缩写应用 bem 过滤器

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

要仅为当前缩写提供过滤器，请将过滤器附加到您的缩写。例如，div#page|c 将把 comment 过滤器应用于 div#page 缩写。

BEM 过滤器 (bem)

如果您使用编写 HTML 的 块元素修饰符 (BEM) 方法，那么 bem 过滤器对您来说非常方便。要了解有关如何使用 bem 过滤器的更多信息，请阅读 Emmet 中的 BEM 过滤器。

您可以使用 bem.elementSeparator 和 bem.modifierSeparator 首选项自定义此过滤器，如 Emmet 首选项 中所述。

注释过滤器 (c)

此过滤器在重要标签周围添加注释。默认情况下，“重要标签”是指具有 id 和/或 class 属性的标签。

例如，div>div#page>p.title+p|c 将展开为

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

您可以使用 filter.commentTrigger、filter.commentAfter 和 filter.commentBefore 首选项自定义此过滤器，如 Emmet 首选项 中所述。

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] -->"
}

Trim 过滤器 (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
代码片段与缩写 在 2 个单独的属性（名为 snippets 和 abbreviations）中均支持 这两者已合并为一个名为 snippets 的属性。请参阅默认的 HTML 代码片段 和 CSS 代码片段
CSS 代码片段名称 可以包含 : 定义代码片段名称时，请勿使用 :。当 Emmet 尝试将给定的缩写模糊匹配到其中一个代码片段时，它用于分隔属性名称和值。
CSS 代码片段值 可以以 ; 结尾 请勿在代码片段值的末尾添加 ;。Emmet 将根据文件类型（css/less/scss 与 sass/stylus）或为 css.propertyEnd、sass.propertyEnd、stylus.propertyEnd 设置的 emmet 首选项添加尾随 ;
光标位置 可以使用 ${cursor} 或 | 仅使用 textmate 语法（如 ${1}）用于制表位和光标位置

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} 作为带有占位符的制表位。
  • 以前，| 或 ${cursor} 用于表示自定义 Emmet 代码片段中的光标位置。不再支持此功能。请改用 ${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 建议。

    设置值 描述
    从不 永远不要在任何语言的建议列表中显示 Emmet 缩写。
    仅在标记和样式表文件中 仅针对纯粹基于标记和样式表的语言（“html”、“pug”、“slim”、“haml”、“xml”、“xsl”、“css”、“scss”、“sass”、“less”、“stylus”）显示 Emmet 建议。
    始终 在所有 Emmet 支持的模式以及在 emmet.includeLanguages 设置中具有映射的语言中显示 Emmet 建议。

    注意： 在 always 模式下，新的 Emmet 实现不具有上下文感知能力。例如，如果您正在编辑 JavaScript React 文件，您不仅会在编写标记时获得 Emmet 建议，而且在编写 JavaScript 时也会获得。

  • emmet.showAbbreviationSuggestions

    将可能的 emmet 缩写显示为建议。默认情况下为 true。

    例如，当您键入 li 时，您会获得以 li 开头的所有 emmet 代码片段的建议，例如 link、link:css、link:favicon 等。这有助于学习您从未知道存在的 Emmet 代码片段，除非您熟记了 Emmet 速查表。

    不适用于样式表或当 emmet.showExpandedAbbreviation 设置为 never 时。

  • emmet.extensionsPath

    提供包含 snippets.json 文件的目录的位置，该文件又包含您的自定义代码片段。

  • emmet.triggerExpansionOnTab

    将其设置为 true 以启用使用 Tab 键展开 Emmet 缩写。我们使用此设置提供适当的回退，以便在没有要展开的缩写时提供缩进。

  • emmet.showSuggestionsAsSnippets

    如果设置为 true，则 Emmet 建议将与其他代码片段分组在一起，允许您根据 editor.snippetSuggestions 设置对其进行排序。将此设置为 true，并将 editor.snippetSuggestions 设置为 top，以确保 Emmet 建议始终显示在其他建议的顶部。

  • 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

    filter.commentAfter 首选项的格式在 Emmet 2.0 中有所不同且更简单。

    例如，而不是旧格式

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

    您将使用

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

    如果您想要支持 Emmet 首选项 中记录的任何其他首选项，请记录 功能请求。

后续步骤

Emmet 只是 VS Code 中出色的 Web 开发人员功能之一。请继续阅读以了解有关以下内容的更多信息

  • HTML - VS Code 支持 HTML，并提供 IntelliSense、闭合标签和格式化功能。
  • CSS - 我们为 CSS、SCSS 和 Less 提供丰富的支持。

故障排除

自定义标记不会在建议列表中展开

当在诸如 MyTag>YourTag 或 MyTag.someclass 之类的表达式中使用自定义标记时，它们会显示在建议列表中。但是，当这些标记像 MyTag 一样单独使用时，它们不会出现在建议列表中。这样设计的目的是为了避免建议列表中的噪音，因为每个单词都可能是一个自定义标记。

添加以下设置以启用使用 Tab 键展开 Emmet 缩写，这将展开所有情况下的自定义标记。

"emmet.triggerExpansionOnTab": true

我的以 + 结尾的 HTML 代码片段不起作用

来自 Emmet 速查表 的以 + 结尾的 HTML 代码片段（如 select+ 和 ul+）不受支持。这是 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 代码片段。
02/06/2025