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 缩写时,您将在建议列表中看到该缩写。如果您打开了建议文档浮出控件,您将在键入时看到展开的预览。如果您在样式表文件中,展开的缩写会显示在建议列表中,并与其他 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.syntaxProfiles 设置全局应用,或直接在当前缩写中应用。
以下是第一种方法的示例,使用 emmet.syntaxProfiles 设置为 HTML 文件中的所有缩写应用 bem
过滤器
"emmet.syntaxProfiles": {
"html": {
"filters": "bem"
}
}
若要仅为当前缩写提供过滤器,请将过滤器附加到您的缩写。例如,div#page|c
将 comment
过滤器应用于 div#page
缩写。
BEM 过滤器 (bem)
如果您使用 块元素修饰符 (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: 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 vs 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 支持的语言之一之间添加映射,以使前者能够使用后者的语法启用 Emmet。请确保映射的两侧都使用语言 ID。
例如
"emmet.includeLanguages": { "javascript": "javascriptreact", "plaintext": "pug" }
-
如果您不希望在某种语言中看到 Emmet 展开,请将其添加到此设置中,该设置接受语言 ID 字符串数组。
-
请参阅 Emmet 输出配置文件定制,了解如何自定义 HTML 缩写的输出。
例如
"emmet.syntaxProfiles": { "html": { "attr_quotes": "single" }, "jsx": { "self_closing_tag": true } }
-
自定义 Emmet 片段使用的变量。
例如
"emmet.variables": { "lang": "de", "charset": "UTF-16" }
-
emmet.showExpandedAbbreviation
控制在建议/完成列表中显示的 Emmet 建议。
设置值 描述 从不
从不在任何语言的建议列表中显示 Emmet 缩写。 仅在标记和样式表文件中
仅对纯粹基于标记和样式表的语言('html'、'pug'、'slim'、'haml'、'xml'、'xsl'、'css'、'scss'、'sass'、'less'、'stylus')显示 Emmet 建议。 总是
在所有 Emmet 支持的模式以及 emmet.includeLanguages 设置中具有映射的语言中显示 Emmet 建议。 注意:在
always
模式下,新的 Emmet 实现不具备上下文感知能力。例如,如果您正在编辑 JavaScript React 文件,您不仅在编写标记时会获得 Emmet 建议,在编写 JavaScript 时也会获得。 -
emmet.showAbbreviationSuggestions
将可能的 Emmet 缩写显示为建议。默认为
true
。例如,当您键入
li
时,您会获得所有以li
开头的 Emmet 片段建议,例如link
、link:css
、link:favicon
等。这对于学习您以前可能不知道的 Emmet 片段很有帮助,除非您熟记 Emmet 备忘单。在样式表中不适用,或当 emmet.showExpandedAbbreviation 设置为
never
时不适用。 -
提供包含
snippets.json
文件(该文件又包含您的自定义片段)的目录位置。 -
将其设置为 true 以使用 Tab 键启用 Emmet 缩写展开。我们使用此设置在没有可展开的缩写时提供适当的回退以提供缩进。
-
emmet.showSuggestionsAsSnippets
如果设置为
true
,则 Emmet 建议将与其他片段一起分组,允许您根据 editor.snippetSuggestions 设置对其进行排序。将其设置为true
并将 editor.snippetSuggestions 设置为top
,以确保 Emmet 建议始终在其他建议中显示在顶部。 -
您可以使用此设置自定义 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
在 Emmet 2.0 中,
filter.commentAfter
首选项的格式不同且更简单。例如,不是旧格式
"emmet.preferences": { "filter.commentAfter": "\n<!-- /<%= attr('id', '#') %><%= attr('class', '.') %> -->" }
您将使用
"emmet.preferences": { "filter.commentAfter": "\n<!-- /[#ID][.CLASS] -->" }
后续步骤
Emmet 只是 VS Code 中出色的 Web 开发功能之一。继续阅读以了解更多信息
故障排除
自定义标签不会在建议列表中展开
当自定义标签在像 MyTag>YourTag
或 MyTag.someclass
这样的表达式中使用时,它们会显示在建议列表中。但当它们单独使用时,例如 MyTag
,它们不会出现在建议列表中。这是为了避免建议列表中的干扰,因为每个单词都可能是潜在的自定义标签。
添加以下设置以启用使用 Tab 键展开 Emmet 缩写,这将在所有情况下展开自定义标签。
"emmet.triggerExpansionOnTab": true
我的以 +
结尾的 HTML 片段不起作用
来自 Emmet 备忘单 的以 +
结尾的 HTML 片段,如 select+
和 ul+
,不受支持。这是 Emmet 2.0 中一个已知问题 问题:emmetio/html-matcher#1。一个解决方法是为此类场景创建自己的自定义 Emmet 片段。
缩写无法展开
首先,检查您是否正在使用自定义片段(如果 emmet.extensionsPath 设置正在使用 snippets.json
文件)。自定义片段的格式在 VS Code 1.53 版本中发生了变化。现在不再使用 |
来指示光标位置,而是使用诸如 ${1}
、${2}
等标记。emmetio/emmet
仓库中的默认 CSS 片段文件显示了新光标位置格式的示例。
如果缩写仍然无法展开
- 检查内置扩展,查看 Emmet 是否已被禁用。
- 尝试通过在命令面板中运行 Developer: Restart Extension Host (
workbench.action.restartExtensionHost
) 命令来重启扩展宿主。
我可以在哪里设置 Emmet 首选项 中记载的所有首选项?
您可以使用 emmet.preferences 设置来设置首选项。只有 Emmet 首选项 中记载的首选项子集可以自定义。请阅读Emmet 配置下的首选项部分。
有什么技巧和窍门吗?
当然!
- 在 CSS 缩写中,当您使用
:
时,左侧部分用于与 CSS 属性名称进行模糊匹配,右侧部分用于与 CSS 属性值进行匹配。充分利用这一点,使用像pos:f
、trf:rx
、fw:b
等缩写。 - 探索 Emmet 操作 中记载的所有其他 Emmet 功能。
- 不要犹豫创建您自己的自定义 Emmet 片段。