Visual Studio Code 中的 Emmet
对 Emmet 代码片段和展开的支持已内置到 Visual Studio Code 中,无需扩展。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 设置将 bem
过滤器应用于 HTML 文件中所有缩写的第一个方法的示例
"emmet.syntaxProfiles": {
"html": {
"filters": "bem"
}
}
要仅为当前缩写提供过滤器,请将过滤器附加到您的缩写。例如,div#page|c
将对 div#page
缩写应用 comment
过滤器。
BEM 过滤器 (bem)
如果您使用 Block Element Modifier (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
首选项自定义此过滤器。
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 代码片段不起作用
不支持以 +
结尾的 HTML 代码片段,如 Emmet 速查表 中的 select+
和 ul+
。这是 Emmet 2.0 中的已知问题 问题:emmetio/html-matcher#1。一种解决方法是为此类场景创建您自己的自定义 Emmet 代码片段。
缩写无法展开
首先,检查您是否正在使用自定义代码片段(是否有一个 snippets.json
文件被 emmet.extensionsPath 设置拾取)。自定义代码片段的格式在 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 代码片段。