Visual Studio Code 中的 Emmet

对Emmet片段和扩展的支持直接内置于Visual Studio Code中，无需扩展。Emmet 2.0 支持大部分 Emmet 动作，包括扩展的 Emmet 缩写和摘要。

如何扩展Emmet缩写和摘要

Emmet缩写和片段扩展默认启用HTML,哈姆尔,巴哥犬,瘦身,jsx,XML,XSL,CSS,SCSS,萨斯,更少以及唱针文件，以及任何继承自上述任意一种的语言，如车把以及PHP.

Emmet 在建议/自动补全列表中

当你开始输入 Emmet 缩写时，你会在建议列表中看到该缩写。如果你打开了建议文档的跳出窗口，你会在输入时看到扩展包的预览。如果你在样式表文件中，展开后的缩写会显示在建议列表中，与其他CSS建议有序。

使用 Tab 键进行 Emmet 扩展

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

"emmet.triggerExpansionOnTab": true

该设置允许在文本非Emmet缩写时使用Tab键进行缩进。

禁用QuickSuggestions时的Emmet

如果你已经禁用了

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

在建议中禁用Emmet

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

"emmet.showExpandedAbbreviation": "never"

你仍然可以使用命令 Emmet： Expand Abbreviation 来扩展你的缩写。你也可以把任何键盘快捷键绑定到命令ID。editor.emmet.action.expand缩写还有。

Emmet 建议排序

为了确保Emmet的建议始终在建议列表中排在首位，请添加以下设置：

"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top"

其他文件类型中的Emmet缩写

要在默认不支持的文件类型中启用Emmet缩写扩展，请使用

环境。确保映射两侧都使用语言标识符，右侧为 Emmet 支持的语言标识符（见上文列表）。

例如：

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

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

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

注：如果你用
emmet.syntaxProfiles
在VS代码中打开
在VS Code Insiders中开放
之前要映射新的文件类型，从VS Code 1.15开始你应该使用该设置
emmet.include语言
在VS代码中打开
在VS Code Insiders中开放
反而。
emmet.syntaxProfiles
在VS代码中打开
在VS Code Insiders中开放
仅用于定制最终输出。

带有多光标的Emmet

你也可以用多光标使用大部分Emmet动作：

多光标的Emmet

使用滤波器

过滤器是特殊的后处理工具，在扩展缩写输出到编辑器之前对其进行修改。使用滤波器有两种方式;无论是通过

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

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

设置以应用贝姆过滤HTML文件中所有缩写：

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

如果只提供当前缩写的筛选，可以在缩写后加上筛选。例如，div#page|c将应用评论滤波器到div#page缩写。

BEM滤波器（BEM）

如果你用块元素修改器（BEM）来写 HTML 的话，贝姆过滤器对你来说非常方便。了解更多如何使用贝姆在Emmet中读取BEM滤波器。

你可以通过使用bem.elementSesolator以及bem.modifierSedisator偏好见Emmet偏好设置。

评论过滤器（c）

该筛选器会在重要标签周围添加评论。默认情况下，“重要标签”是指带有 id 和/或类属性的标签。

例如：div>div#page>p.title+p|c将扩展至：

<div>
    <div id="page">
        <p class="title"></p>
        <!-- /.title -->
        <p></p>
    </div>
    <!-- /#page -->
</div>

你可以通过使用过滤。评论触发,筛选.comment之后以及filter.comment之前偏好见Emmet偏好设置。

格式筛选.comment之后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： Wrap with Abbreviation 命令提供缩写时。它会去除包裹线上的行标记。

使用自定义 Emmet 片段

自定义 Emmet snippet 需要在名为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}"
    }
  }
}

通过snippets.json文件与旧有的相同方式有几个不同：

主题	老艾米特	艾米特2.0
摘要与缩写	在两个不同的属性中支持这两种功能，称为`片段`以及`缩写`	这两者被合并成一个称为 snippets 的单一属性。参见默认的HTML摘要和CSS摘要
CSS 片段名称	可以包含`:`	请勿使用`:`在定义片段名称时，当Emmet试图模糊匹配给定缩写与其中一个片段时，它用于区分属性名称和值。
CSS 片段值	可以以`;`	不要在摘录值末尾添加内容。Emmet会根据文件类型（css/less/scss vs sass/stylus）或Emmet偏好设置添加尾部`;;css.propertyEnd`,`sass.property结束`,`stylus.property结束`
光标位置	`${光标}`或`\|`可以使用	只用Textmate语法，比如`{1}`用于制表和光标位置

HTML Emmet 片段

HTML 自定义片段适用于所有其他标记类型，比如哈姆尔或巴哥犬.当 snippet 值是缩写而非实际 HTML，可以应用相应的变换，以获得符合语言类型的正确输出。

例如，对于一个无序列表和一个列表项，如果你的片段值是乌尔>里，你可以在中使用相同的片段HTML,哈姆尔,巴哥犬或瘦身，但如果你的片段值为<ul><li></li></ul>，则它只在HTML文件。

如果你想要纯文本的片段，可以用环绕文本。{}

CSS Emmet 摘要

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

CSS 自定义片段适用于所有其他样式表，比如SCSS,更少或萨斯.因此，不要在摘录值末尾加上尾段。Emmet会根据语言是否需要添加。;

请勿使用:在摘录名称中。:当Emmet试图模糊匹配缩写与其中一个片段时，用来区分属性名称和值。

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

自定义 Emmet 片段中制表符的语法遵循 Textmate 片段的语法。

用途{1},{2}对于制表符和${1：占位符}用于带有占位符的制表符。
之前，|或${光标}用于表示自定义Emmet片段中的光标位置。该功能已不再支持。用途{1}反而。

Emmet配置

以下是你可以用来自定义 VS Code 中 Emmet 体验的 Emmet 设置。

emmet.include语言
- 在VS代码中打开
- 在VS Code Insiders中开放
使用此设置添加你选择的语言与 Emmet 支持的语言之间的映射，从而使 Emmet 能够使用前者的语法。确保映射两侧都使用语言ID。

例如：
```
"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "plaintext": "pug"
}
```
emmet.excludeLanguages
- 在VS代码中打开
- 在VS Code Insiders中开放
如果有语言你不想看到 Emmet 扩展，就在这个设置里添加它，这个设置会使用一组语言 ID 字符串。
emmet.syntaxProfiles
- 在VS代码中打开
- 在VS Code Insiders中开放
请参阅Emmet“输出配置文件自定义”，了解如何自定义HTML缩写的输出。

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

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

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

设定价值	描述
`绝不`	绝不要在任何语言的建议列表中显示Emmet缩写。
`仅在标记和样式表文件中`	仅在纯粹基于标记和样式表的语言（如“html”、“pug”、“slim”、“haml”、“xml”、“xsl”、“css”、“scss”、“sass”、“less”、“stylus”）中显示Emmet建议。
`永远`	在所有Emmet支持的模式以及具有映射的语言中显示Emmet建议， emmet.include语言在VS代码中打开在VS Code Insiders中开放环境。

注：在永远新的Emmet实现不具备上下文感知。例如，如果你在编辑JavaScript React文件，你不仅在编写标记时会收到Emmet建议，在编写JavaScript时也会收到。

emmet.show缩写建议
- 在VS代码中打开
- 在VS Code Insiders中开放
显示可能的 Emmet 缩写作为建议。确实如此确实如此默认。

比如，当你输入时李你会获得所有 Emmet 片段的建议，开头是李比如链接,链接：CSS,链接：Favicon等等。这有助于学习那些你除非背得滚瓜烂熟的艾米特速查表否则从未知道存在的片段。

不适用于样式表或
emmet.show扩展缩写
- 在VS代码中打开
- 在VS Code Insiders中开放
设置为绝不.
emmet.extensionsPath
- 在VS代码中打开
- 在VS Code Insiders中开放
请提供存放snippets.json文件里包含了你的自定义片段。
emmet.triggerExpandOnTab
- 在VS代码中打开
- 在VS Code Insiders中开放
将此设置为 true，以启用 Tab 键扩展 Emmet 缩写。我们使用此设置提供适当的缓冲，以便在没有缩写可展开时提供缩进。
emmet.show建议AsSnippets
- 在VS代码中打开
- 在VS Code Insiders中开放
如果设置为确实如此然后 Emmet 建议会与其他摘要一起被分组，方便你按顺序排序
editor.snippet建议
- 在VS代码中打开
- 在VS Code Insiders中开放
环境。将此设为确实如此以及
editor.snippet建议
- 在VS代码中打开
- 在VS Code Insiders中开放
到顶部以确保Emmet的建议总是在其他建议中排在最前面。
emmet.偏好
- 在VS代码中打开
- 在VS Code Insiders中开放
你可以用这个设置自定义Emmet，按照Emmet偏好设置中的文档。以下自定义功能目前支持：
- css.propertyEnd
- css.valueSesolator
- sass.property结束
- sass.valueSesolator
- stylus.property结束
- stylus.valueSesolator
- css.unit别名
- css.int单元
- css.floatUnit
- bem.elementSesolator
- bem.modifierSedisator
- filter.comment之前
- 过滤。评论触发
- 筛选.comment之后
- format.noIndentTags
- format.forceIndentationForTags
- profile.allowCompactBoolean
- css.fuzzySearchMinScore
格式筛选.comment之后Emmet 2.0 的偏好不同且更简单。

例如，取代了旧格式
```
"emmet.preferences": {
  "filter.commentAfter": "\n"
}
```
你会使用
```
"emmet.preferences": {
  "filter.commentAfter": "\n"
}
```
如果您希望支持Emmet偏好设置中文档中其他偏好设置，请提交功能请求。

下一步

Emmet 是 VS Code 中优秀的网页开发者功能之一。继续阅读，了解：

HTML - VS Code 支持 IntelliSense 的 HTML、关闭标签和格式化。
CSS——我们为CSS、SCSS及其他软件提供丰富的支持。

故障排除

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

自定义标签在表达式中使用我的标签>你的标签或我的标签。某类一定要出现在建议列表中。但当这些单独使用时，比如我的标签，它们不出现在建议列表中。这样做是为了避免建议列表中出现杂音，因为每个词都可能是自定义标签。

添加以下设置，使得使用 Tab 键展开 Emmet 缩写，这样在所有情况下都能展开自定义标签。

"emmet.triggerExpansionOnTab": true

我的HTML片段以“Do Goes Work”结尾`+`

HTML片段以like结尾+Select+以及UL+Emmet 的速查表不支持。这是Emmet 2.0 Issue中的已知问题：emmetio/html-matcher#1。一个变通方法是为这种情况创建自定义的Emmet片段。

缩写无法扩展

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

环境）。自定义摘要的格式在 VS Code 1.53 版本中发生了变化。而不是用|为了表示光标位置，可以使用以下令牌{1},{2}等等。默认的CSS片段文件来自Emmetio/Emmet仓库展示了新光标位置格式的示例。

如果缩写仍然无法展开：

检查内置扩展是否禁用了Emmet。
试着通过运行开发者：重启扩展主机来重启扩展主机 (workbench.action.restartExtensionHost）命令。

我在哪里可以按照Emmet偏好设置中文档的所有偏好设置？

你可以用设置偏好设置

.只有Emmet偏好设置中文档中的部分偏好可以自定义。请阅读Emmet配置下的偏好设置部分。

有什么技巧和窍门吗？

当然！

在CSS简略中，当你使用时:左侧用于模糊匹配CSS属性名称，右侧用于匹配CSS属性值。充分利用这一点，使用诸如POS：F,TRF：RX,FW：B，等等。
探索Emmet Actions中所有其他Emmet功能。
别犹豫，制作你自己的定制Emmet片段。