Emmet 在 Visual Studio Code 中

支持Emmet片段和扩展直接内置在Visual Studio Code中，不需要扩展。Emmet 2.0支持大部分的Emmet操作，包括扩展Emmet缩写和片段。

如何扩展 Emmet 缩写和片段

默认情况下，Emmet 缩写和片段扩展在HTML，哈姆尔，哈巴狗，Svelte，jsx，输入：xml，xsl，层叠样式表，scss，萨斯，更少和触笔文件，以及从上述任何一种语言继承的任何语言，例如车把和PHP输入：.

Emmet在建议/自动完成列表中

当您开始输入一个Emmet缩写时，您将在建议列表中看到该缩写。如果建议文档弹出Windows是打开的，您在输入时将看到扩展的预览。如果您在样式表文件中，扩展的缩写将显示在建议列表中，并与其他CSS建议一起排序。

使用Tab键进行Emmet扩展

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

"emmet.triggerExpansionOnTab"：真

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

Emmet，当快速建议被禁用时

如果你已禁用

设置，你不会在输入时看到建议。你仍然可以通过按⌃Space（Windows, Linux Ctrl+Space）来手动触发建议并查看预览。

在建议中禁用 Emmet

如果你不想在建议中看到Emmet的缩写，那么使用以下设置：

"emmet.showExpandedAbbreviation"："从不"

您仍然可以使用命令Emmet: 展开缩写来展开您的缩写。您还可以将任何键盘快捷键绑定到命令id编辑器.Emmet.展开缩写动作也。

Emmet建议订购

为了确保Emmet建议始终在建议列表的顶部，添加以下设置：

"emmet.showSuggestionsAsSnippets"：真，
"editor.snippetSuggestions"："顶部"

Emmet在其他文件类型中的缩写

要在一个默认情况下不支持Emmet缩略词扩展的文件类型中启用Emmet缩略词扩展，请使用

设置。请确保在映射的两侧都使用语言标识符，右侧是受支持语言的标识符（请参见上面的列表）。

例如：

"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "razor": "html",
  "plaintext": "pug"
}

Emmet对这些新语言一无所知，因此可能会在非HTML/CSS上下文中出现Emmet的建议。为了避免这种情况，您可以使用以下设置。

"emmet.showExpandedAbbreviation"："仅在标记和样式文件中"

注意： 如果你使用了
emmet.syntaxProfiles
在 VS Code 中打开
在 VS Code Insiders 中打开
之前要映射新文件类型，从 VS Code 1.15 版本开始，你应该使用设置
emmet.includeLanguages
在 VS Code 中打开
在 VS Code Insiders 中打开
相反。
emmet.syntaxProfiles
在 VS Code 中打开
在 VS Code Insiders 中打开
仅用于定制最终输出。

Emmet使用多光标

您还可以使用多光标来使用大部分Emmet动作：

Emmet与多光标

使用过滤器

过滤器是特殊的后处理器，它们在将展开的缩略词输出到编辑器之前进行修改。有两种使用过滤器的方法；一种是通过全局配置，另一种是通过特定的

设置或直接在当前缩写中。

以下是使用第一种方法的第一个示例

设置应用好过滤HTML文件中的所有缩写：

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

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

BEM 过滤器 (bem)

如果你使用块元素修饰器 (BEM) 的 HTML 编写方式，那么好过滤器对你来说非常方便。要了解更多关于如何使用好 过滤器，阅读 Emmet中的BEM过滤器.

您可以使用此过滤器进行自定义bem.元素分隔符和bem.修饰符分隔符 偏好设置如文档中所述 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>

您可以使用此过滤器进行自定义过滤器.评论触发器，过滤评论后和过滤评论之前 偏好设置如文档中所述 Emmet 偏好设置.

格式为过滤评论后偏好在 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 模板需要定义在名为的 json 文件中snippets.json。

设置应包含此文件的目录路径。

以下是此内容的一个示例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
片段 vs 缩写	支持在两个单独的属性中，分别称为`片段`和`缩写`	这两个已被合并为一个名为snippets的属性。请参见默认的HTML片段和CSS片段
CSS片段名称	可以包含`输入：`	不要使用`输入：`在定义片段名称时。当 Emmet 尝试将给定的缩写模糊匹配到其中一个片段时，它用于分隔属性名称和值。
CSS片段值	可以结束于`输入：;`	不要添加`输入：;`在片段值的末尾。Emmet将添加 trailing`输入：;`基于文件类型 (css/less/scss vs sass/stylus) 或者为该文件设置的 emmet 首选项`css.属性结束`，`属性结束`，`触控笔.属性结束`
光标位置	`${光标}`或`输入：\|`可以使用	仅使用 Textmate 语法，例如`${1}`用于制表位和光标位置

HTML Emmet 模板

HTML 自定义片段适用于所有其他Markdown，如哈姆尔或哈巴狗当片段值是缩写而不是实际的HTML时，可以应用适当的转换以根据语言类型获得正确的输出。

例如，对于一个无序列表和一个列表项，如果您的片段值是ul>li，你可以在HTML，哈姆尔，哈巴狗或Svelte，但如果你的片段值是，那么它将仅在HTML文件。

如果你想要纯文本的片段，那么用来包围文本。输入：{}输入：.

CSS Emmet 模板

CSS Emmet片段的值应为完整的属性名和值对。

CSS 自定义片段适用于所有其他样式表语言，例如scss，更少或萨斯因此，不要包含尾随空格输入：;在片段值的末尾。Emmet将根据语言是否需要它来按需添加它。

不要使用输入：在片段名称中。输入：当 Emmet 尝试将缩写模糊匹配到其中一个片段时，用于分隔属性名和值。

自定义片段中的制表位和光标

自定义 Emmet 模板中的制表位语法遵循 Textmate 模板语法。

使用${1}，${2}对于制表位和${1:占位符}用于带有占位符的制表位。
之前，输入：|或${光标}以前用于表示自定义 Emmet 模板中光标位置的。此功能不再支持。请使用${1}相反。

Emmet配置

以下是 Emmet 设置，您可以使用这些设置来自定义在 VS Code 中的 Emmet 体验。

emmet.includeLanguages
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
使用此设置将您选择的语言与Emmet支持的语言之一映射，以使用后者的语法在前者中启用Emmet。请确保在映射的双方都使用语言ID。

例如：
```
"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "plaintext": "pug"
}
```
emmet.excludeLanguages
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
如果有一种语言你不希望看到Emmet扩展，请在该设置中添加它，该设置接受语言ID字符串数组。
emmet.syntaxProfiles
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
参见Emmet 自定义输出配置文件，了解如何自定义 HTML 缩写词的输出。

例如：
```
"emmet.syntaxProfiles": {
  "html": {
    "attr_quotes": "single"
  },
  "jsx": {
    "self_closing_tag": true
  }
}
```
emmet变量
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
自定义 Emmet 模板使用的变量。

例如：
```
"emmet:variables": {
  "lang": "德语",
  "charset": "UTF-16"
}
```

控制在建议/完成列表中显示的Emmet建议。

设置值	描述
`从不`	不要在任何语言的建议列表中显示Emmet缩写。
`仅在标记和样式表文件中`	仅在纯标记和样式表语言（'html'，'pug'，'slim'，'haml'，'xml'，'xsl'，'css'，'scss'，'sass'，'less'，'stylus'）中显示 Emmet 建议。
`总是`	在所有支持Emmet的模式以及具有映射的语言中显示Emmet建议 emmet.includeLanguages 在 VS Code 中打开在 VS Code Insiders 中打开设置。

注意： 在 总是模式下，新的 Emmet 实现没有上下文感知能力。例如，如果你正在编辑一个 JavaScript React 文件，你不仅在编写标记时会得到 Emmet 建议，而且在编写 JavaScript 时也会得到建议。

emmet.显示缩写建议
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
显示可能的 emmet 缩写作为建议。它是真默认情况下。

例如，当你输入李你将获得所有以开头的emmet片段建议李喜欢链接，链接:css，链接:图标 等等。这在学习Emmet片段时很有帮助，除非你熟记Emmet速查表，否则你永远不会知道它们的存在。

在样式表中或当不适用
emmet.显示扩展的缩写
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
设置为从不输入：.
emmet.extensionsPath
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
提供包含该目录的位置snippets.json文件中包含您的自定义片段。
emmet.在按Tab键时自动展开
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
将此设置为 true 以启用使用 Tab 键扩展 Emmet 缩写。我们使用此设置在没有可扩展的缩写时提供适当的回退以提供缩进。
emmet.显示建议片段
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
如果设置为真，然后Emmet的建议将与其他片段分组，允许您根据
编辑器.片段建议
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
设置。将其设置为真和
编辑器.片段建议
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
至顶部，以确保Emmet建议在其他建议中始终显示在顶部。
emmet.偏好设置
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
您可以使用此设置来自定义 Emmet，具体文档见 Emmet 首选项。以下自定义设置目前是支持的：
- css.属性结束
- css.值分隔符
- 属性结束
- sass.值分隔符
- 触控笔.属性结束
- 笔值分隔符
- css.单位别名
- css.intUnit
- css.floatUnit
- bem.元素分隔符
- bem.修饰符分隔符
- 过滤评论之前
- 过滤器.评论触发器
- 过滤评论后
- 格式.无缩进标签
- 格式强制对齐标签
- 配置文件.允许紧凑型布尔值
- css.模糊搜索最低分数
格式为过滤评论后偏好在 Emmet 2.0 中是不同的并且更简单。

例如，而不是使用较旧的格式
```
"emmet.preferences": {
  "filter.commentAfter": "\n"
}
```
你会使用
```
"emmet.preferences": {
  "filter.commentAfter": "\n"
}
```
如果您需要任何其他偏好设置的支持，请记录一个Emmet偏好设置中的问题。功能请求。

下一步

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

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

故障排除

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

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

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

"emmet.triggerExpansionOnTab"：真

我的HTML片段以结尾`输入：+`不工作

HTML片段以结尾输入：+喜欢选择+和ul+ from the Emmet cheatsheet 不支持。这是 Emmet 2.0 中已知的问题问题: emmetio/html-matcher#1。解决方法是为这种情况创建自己的自定义 Emmet 模板。

缩写无法展开

首先，检查你是否使用了自定义片段（如果有snippets.json文件被提取

设置）。自 VS Code 1.53 版本发布后，自定义片段的格式发生了变化。不再使用输入：|要指示光标位置，请使用诸如${1}，${2}，等等。默认的CSS片段文件来自 埃梅蒂奥/埃梅代码库展示了新光标位置格式的示例。

如果缩写仍然无法展开：

检查内置扩展以确定是否禁用了Emmet。
尝试通过运行开发者：重启扩展主机来重启扩展主机工作台.操作.重启扩展主机) 在命令面板中使用命令。

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

您可以使用设置来更改偏好设置

。只有 Emmet 首选项中文档记录的一部分首选项可以自定义。请阅读 Emmet 配置中的首选项部分。

有什么技巧和窍门吗？

当然可以！

在CSS缩写中，当你使用输入：左边部分用于与CSS属性名进行模糊匹配，右边部分用于与CSS属性值进行匹配。通过使用缩写如位置：f，trf:rx，fw:b，等等。
探索所有其他Emmet功能，请参阅 Emmet Actions。
不要犹豫，创建你自己的自定义 Emmet 模板。