编辑

Visual Studio Code 中的 Emmet

Visual Studio Code 内置支持 Emmet 代码片段和扩展，无需安装任何扩展。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 建议一起排序。

使用 Tab 键进行 Emmet 扩展

如果你想使用 Tab 键来扩展 Emmet 缩写，请添加以下设置

"emmet.triggerExpansionOnTab": true

此设置允许在文本不是 Emmet 缩写时，使用 Tab 键进行缩进。

当快速建议被禁用时使用 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 设置将 bem 过滤器应用于 HTML 文件中的所有缩写

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

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

BEM 过滤器 (bem)

如果你使用块元素修饰符 (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 首选项来定制此过滤器。

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

Emmet 2.0 通过 snippets.json 文件编写自定义代码片段与旧方法有以下几点不同

主题	旧版 Emmet	Emmet 2.0
代码片段与缩写	在名为 `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 配置

以下是 Emmet 设置，你可以使用它们来定制你在 VS Code 中的 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 文件，你不仅会在编写标记时获得 Emmet 建议，还会在编写 JavaScript 时获得 Emmet 建议。

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"
}
```
你会使用
```
"emmet.preferences": {
  "filter.commentAfter": "\n"
}
```
如果您需要 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 Actions 中记录的所有其他 Emmet 功能。
不要犹豫创建您自己的自定义 Emmet 代码片段。

10/09/2025