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 键进行缩进。

禁用 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 将对 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: 使用缩写包装 命令提供缩写时适用。它会从包装的行中删除行标记。

使用自定义 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` 中都支持。	两者已合并为一个名为 snippets 的属性。请参阅默认的 HTML 代码片段和 CSS 代码片段
CSS 代码片段名称	可以包含 `:`	定义代码片段名称时，请勿使用 `:`。当 Emmet 尝试将给定的缩写模糊匹配到某个代码片段时，它用于分隔属性名称和值。
CSS 代码片段值	可以以 `;` 结尾	请勿在代码片段值的末尾添加 `;`。Emmet 将根据文件类型（css/less/scss 与 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:占位符} 作为带有占位符的制表符停止位。
以前，| 或 ${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 支持带有 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 代码片段。

缩写无法展开

首先，检查你是否正在使用自定义代码片段（如果 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 代码片段。

12/11/2024