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 建议一起排序。

使用 Tab 键扩展 Emmet

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

"emmet.triggerExpansionOnTab": true

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

禁用快速建议时的 Emmet

如果您禁用了 editor.quickSuggestions 设置，您将不会在输入时看到建议。您仍然可以通过按下 ⌃Space (Windows、Linux Ctrl+Space) 手动触发建议，并查看预览。

在建议中禁用 Emmet

如果您根本不想在建议中看到 Emmet 缩写，请使用以下设置

"emmet.showExpandedAbbreviation": "never"

您仍然可以使用命令**Emmet: Expand Abbreviation** 来扩展您的缩写。您也可以将任何键盘快捷键绑定到命令 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 设置，或者直接在当前缩写中。

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

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

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

BEM 过滤器 (bem)

如果您使用块元素修饰符 (BEM) 方法编写 HTML，那么 bem 过滤器非常方便使用。要详细了解如何使用 bem 过滤器，请阅读 Emmet 中的 BEM 过滤器。

您可以使用 bem.elementSeparator 和 bem.modifierSeparator 偏好设置自定义此过滤器，如 Emmet 偏好设置中所述。

注释过滤器 (c)

此过滤器在重要标签周围添加注释。默认情况下，"重要标签" 是具有 ID 和/或类属性的那些标签。

例如 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 偏好设置中所述。

在 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: Wrap with 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}"
    }
  }
}

通过 snippets.json 文件在 Emmet 2.0 中创作自定义代码片段与旧方法在几个方面有所不同

主题	旧 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 配置

以下是您可以用来在 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`	仅为纯标记和样式表语言显示 Emmet 建议（'html'、'pug'、'slim'、'haml'、'xml'、'xsl'、'css'、'scss'、'sass'、'less'、'stylus'）。
`always`	在所有 Emmet 支持的模式以及在 emmet.includeLanguages 设置中具有映射的语言中显示 Emmet 建议。

注意： 在always 模式下，新的 Emmet 实现不具有上下文感知能力。例如，如果您正在编辑 JavaScript React 文件，您将在编写标记时以及编写 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 支持带有 IntelliSense、闭合标签和格式化的 HTML。
CSS - 我们为 CSS、SCSS 和 Less 提供丰富的支持。

故障排除

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

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

添加以下设置以启用使用制表符展开 Emmet 缩写，这将在所有情况下展开自定义标签。

"emmet.triggerExpansionOnTab": true

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

以+ 结尾的 HTML 代码片段（如 Emmet 速查表中的select+ 和ul+）不受支持。这是 Emmet 2.0 中的已知问题问题：emmetio/html-matcher#1。解决方法是为这种情况创建您自己的自定义 Emmet 代码片段。

缩写无法展开

首先，检查您是否正在使用自定义代码片段（如果有snippets.json 文件被 emmet.extensionsPath 设置拾取）。自定义代码片段的格式在 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 代码片段。

10/29/2024