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在建议/自动完成列表中

当你开始输入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多光标操作

使用过滤器

过滤器是特殊的后处理器，它们在扩展的缩写输出到编辑器之前对其进行修改。有两种使用过滤器的方法；一种是通过emmet.syntaxProfiles设置全局使用，另一种是直接在当前的缩写中使用。

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

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

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

BEM 过滤器 (bem)

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

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

评论过滤器 (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 Preferences中所述。

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

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

Topic	Old Emmet	Emmet 2.0
Snippets vs Abbreviations	Supports both in 2 separate properties called `snippets` and `abbreviations`	The 2 have been combined into a single property called snippets. See default HTML snippets and CSS snippets
CSS snippet names	Can contain `:`	Do not use `:` when defining snippet names. It is used to separate property name and value when Emmet tries to fuzzy match the given abbreviation to one of the snippets.
CSS snippet values	Can end with `;`	Do not add `;` at end of snippet value. Emmet will add the trailing `;` based on the file type (css/less/scss vs sass/stylus) or the emmet preference set for `css.propertyEnd`, `sass.propertyEnd`, `stylus.propertyEnd`
Cursor location	`${cursor}` or `\|` can be used	Use only textmate syntax like `${1}` for tab stops and cursor locations

HTML Emmet 片段

HTML自定义片段适用于所有其他标记风格，如haml或pug。当片段值是缩写而不是实际的HTML时，可以根据语言类型应用适当的转换以获得正确的输出。

例如，对于一个包含列表项的无序列表，如果你的代码片段值是ul>li，你可以在html、haml、pug或slim中使用相同的代码片段，但如果你的代码片段值是

，那么它只能在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建议。

Setting Value	Description
`never`	Never show Emmet abbreviations in the suggestion list for any language.
`inMarkupAndStylesheetFilesOnly`	Show Emmet suggestions only for languages that are purely markup and stylesheet based ('html', 'pug', 'slim', 'haml', 'xml', 'xsl', 'css', 'scss', 'sass', 'less', 'stylus').
`always`	Show Emmet suggestions in all Emmet supported modes as well as the languages that have a mapping in the emmet.includeLanguages setting.

注意： 在 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 Preferences中所述。目前支持以下自定义设置：
- 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"
}
```
你会使用
```
"emmet.preferences": {
  "filter.commentAfter": "\n"
}
```
如果您希望支持Emmet Preferences中记录的任何其他偏好设置，请提交一个功能请求。

下一步

Emmet 只是 VS Code 中众多出色的网页开发者功能之一。继续阅读以了解更多内容：

HTML - VS Code 支持 HTML 的智能感知、标签闭合和格式化。
CSS - 我们为CSS、SCSS和Less提供丰富的支持。

故障排除

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

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

添加以下设置以启用使用Tab键扩展Emmet缩写，在所有情况下扩展自定义标签。

"emmet.triggerExpansionOnTab": true

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

以+结尾的HTML片段，如select+和ul+，来自Emmet速查表，不被支持。这是Emmet 2.0中的一个已知问题问题：emmetio/html-matcher#1。一个解决方法是为此类场景创建你自己的自定义Emmet片段。

缩写无法展开

首先，检查您是否正在使用自定义代码片段（如果有emmet.extensionsPath设置正在使用的snippets.json文件）。自定义代码片段的格式在VS Code 1.53版本中发生了变化。不再使用|来指示光标位置，而是使用诸如${1}、${2}等标记。默认的CSS代码片段文件来自emmetio/emmet仓库，展示了新光标位置格式的示例。

如果缩写仍然无法展开：

检查内置扩展，看看Emmet是否已被禁用。
尝试通过在命令面板中运行开发者：重启扩展主机 (workbench.action.restartExtensionHost) 命令来重启扩展主机。

我可以在哪里设置所有在Emmet preferences中记录的偏好设置？

您可以使用设置 emmet.preferences 来设置偏好。只有 Emmet 偏好中记录的一部分偏好可以自定义。请阅读 Emmet 配置下的偏好部分。

有什么技巧和建议吗？

当然！

在CSS缩写中，当你使用:时，左边部分用于与CSS属性名称进行模糊匹配，右边部分用于与CSS属性值匹配。充分利用这一点，使用像pos:f、trf:rx、fw:b等缩写。
探索所有其他Emmet功能，如Emmet Actions中所述。
不要犹豫，创建你自己的自定义Emmet片段。

12/11/2024