Visual Studio Code 中的 Emmet
Visual Studio Code 内置了对 Emmet 代码片段和展开的支持,无需安装扩展。Emmet 2.0 支持大多数 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 键进行缩进。
当 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)
如果您使用编写 HTML 的 块元素修饰符 (BEM) 方法,那么 bem
过滤器对您来说非常方便。要了解有关如何使用 bem
过滤器的更多信息,请阅读 Emmet 中的 BEM 过滤器。
您可以使用 bem.elementSeparator
和 bem.modifierSeparator
首选项自定义此过滤器,如 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>
您可以使用 filter.commentTrigger
、filter.commentAfter
和 filter.commentBefore
首选项自定义此过滤器,如 Emmet 首选项 中所述。
filter.commentAfter
首选项的格式在 VS Code Emmet 2.0 中有所不同。
例如,而不是
"emmet.preferences": {
"filter.commentAfter": "\n<!-- /<%= attr('id', '#') %><%= attr('class', '.') %> -->"
}
在 VS Code 中,您将使用更简单的
"emmet.preferences": {
"filter.commentAfter": "\n<!-- /[#ID][.CLASS] -->"
}
Trim 过滤器 (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 |
---|---|---|
代码片段与缩写 | 在 2 个单独的属性(名为 snippets 和 abbreviations )中均支持 |
这两者已合并为一个名为 snippets 的属性。请参阅默认的 HTML 代码片段 和 CSS 代码片段 |
CSS 代码片段名称 | 可以包含 : |
定义代码片段名称时,请勿使用 : 。当 Emmet 尝试将给定的缩写模糊匹配到其中一个代码片段时,它用于分隔属性名称和值。 |
CSS 代码片段值 | 可以以 ; 结尾 |
请勿在代码片段值的末尾添加 ; 。Emmet 将根据文件类型(css/less/scss 与 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 建议。
注意: 在
always
模式下,新的 Emmet 实现不具有上下文感知能力。例如,如果您正在编辑 JavaScript React 文件,您不仅会在编写标记时获得 Emmet 建议,而且在编写 JavaScript 时也会获得。 -
emmet.showAbbreviationSuggestions
将可能的 emmet 缩写显示为建议。默认情况下为
true
。例如,当您键入
li
时,您会获得以li
开头的所有 emmet 代码片段的建议,例如link
、link:css
、link:favicon
等。这有助于学习您从未知道存在的 Emmet 代码片段,除非您熟记了 Emmet 速查表。 -
提供包含
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
filter.commentAfter
首选项的格式在 Emmet 2.0 中有所不同且更简单。例如,而不是旧格式
"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 是否已被禁用。
- 尝试通过在 命令面板 中运行 开发人员: 重启扩展主机 (
workbench.action.restartExtensionHost
) 命令来重启扩展主机。
在哪里可以设置 Emmet 首选项 中记录的所有首选项?
您可以使用 emmet.preferences 设置来设置首选项。只有 Emmet 首选项 中记录的首选项的子集可以自定义。请阅读 Emmet 配置 下的首选项部分。
有什么技巧和窍门吗?
当然!
- 在 CSS 缩写中,当您使用
:
时,左侧部分用于与 CSS 属性名称进行模糊匹配,右侧部分用于与 CSS 属性值进行匹配。通过使用诸如pos:f
、trf:rx
、fw:b
等缩写来充分利用这一点。 - 探索 Emmet 操作 中记录的所有其他 Emmet 功能。
- 不要犹豫创建您自己的 自定义 Emmet 代码片段。