在 VS Code 中试用

Visual Studio Code 中的 Emmet

Visual Studio Code **内置支持** Emmet 代码片段和展开功能,**无需安装扩展**。Emmet 2.0 支持大多数 Emmet 操作,包括展开 Emmet 缩写和代码片段

如何展开 Emmet 缩写和代码片段

Emmet 缩写和代码片段展开在 htmlhamlpugslimjsxxmlxslcssscsssasslessstylus 文件中默认启用,并且在继承自上述任何语言的文件中也默认启用,例如 handlebarsphp

Emmet in suggestion/auto-completion list

当您开始键入 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 对这些新语言没有了解,因此 Emmet 建议可能会出现在非 HTML/CSS 上下文中。为避免这种情况,您可以使用以下设置。

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

注意:如果您之前使用 emmet.syntaxProfiles 来映射新的文件类型,从 VS Code 1.15 版本开始,您应该改用 emmet.includeLanguages 设置。emmet.syntaxProfiles 仅用于自定义最终输出

与多光标一起使用 Emmet

您也可以将大多数 Emmet 操作与多光标一起使用

Emmet with multi cursors

使用过滤器

过滤器是特殊的后处理器,它们在展开的缩写输出到编辑器之前对其进行修改。使用过滤器有两种方法:通过 emmet.syntaxProfiles 设置全局使用,或直接在当前缩写中使用。

下面是第一种方法的一个示例,使用 emmet.syntaxProfiles 设置将 bem 过滤器应用于 HTML 文件中的所有缩写

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

要仅为当前缩写提供过滤器,请将过滤器附加到您的缩写中。例如,div#page|c 将把 comment 过滤器应用于 div#page 缩写。

BEM 过滤器 (bem)

如果您使用 块元素修饰符 (BEM) 的方式编写 HTML,那么 bem 过滤器将非常有用。要了解有关如何使用 bem 过滤器的更多信息,请阅读Emmet 中的 BEM 过滤器

您可以使用 bem.elementSeparatorbem.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.commentTriggerfilter.commentAfterfilter.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] -->"
}

修剪过滤器 (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
代码片段 vs 缩写 在两个单独的属性 snippetsabbreviations 中都支持 两者已合并到一个名为 snippets 的单个属性中。请参阅默认 HTML 代码片段CSS 代码片段
CSS 代码片段名称 可以包含 : 定义代码片段名称时不要使用 :。当 Emmet 尝试将给定的缩写与其中一个代码片段进行模糊匹配时,: 用于分隔属性名称和值。
CSS 代码片段值 可以以 ; 结尾 不要在代码片段值的末尾添加 ;。Emmet 将根据文件类型(css/less/scss vs sass/stylus)或为 css.propertyEndsass.propertyEndstylus.propertyEnd 设置的 Emmet 首选项添加尾随的 ;
光标位置 可以使用 ${cursor}| 对于制表位和光标位置,仅使用 Textmate 语法,例如 ${1}

HTML Emmet 代码片段

HTML 自定义代码片段适用于所有其他标记语言,例如 hamlpug。当代码片段值为缩写而不是实际 HTML 时,可以应用适当的转换以根据语言类型获得正确的输出。

例如,对于带有列表项的无序列表,如果您的代码片段值为 ul>li,则可以在 htmlhamlpugslim 中使用相同的代码片段,但如果您的代码片段值为

,则它仅适用于 html 文件。

如果您想要一个用于纯文本的代码片段,请将文本用 {} 包围。

CSS Emmet 代码片段

CSS Emmet 代码片段的值应该是一个完整的属性名称和值对。

CSS 自定义代码片段适用于所有其他样式表语言,例如 scsslesssass。因此,不要在代码片段值的末尾包含尾随的 ;。Emmet 将根据语言是否需要按需添加它。

不要在代码片段名称中使用 :。当 Emmet 尝试将缩写与其中一个代码片段进行模糊匹配时,: 用于分隔属性名称和值。

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

自定义 Emmet 代码片段中制表位的语法遵循Textmate 代码片段语法

  • 对于制表位,使用 ${1}${2};对于带有占位符的制表位,使用 ${1:placeholder}
  • 以前,使用 |${cursor} 表示自定义 Emmet 代码片段中的光标位置。这不再受支持。请改用 ${1}

Emmet 配置

下面是一些 Emmet 设置,您可以使用它们来自定义您在 VS Code 中的 Emmet 体验。

  • emmet.includeLanguages

    使用此设置在您选择的语言和 Emmet 支持的语言之间添加映射,以前者使用后者的语法启用 Emmet。请确保映射的两边都使用语言 ID。

    例如

    "emmet.includeLanguages": {
      "javascript": "javascriptreact",
      "plaintext": "pug"
    }
    
  • emmet.excludeLanguages

    如果有一种语言您不希望看到 Emmet 展开,请在此设置中添加它,该设置接受一个语言 ID 字符串数组。

  • emmet.syntaxProfiles

    请参阅Emmet 输出配置文件自定义,了解如何自定义 HTML 缩写的输出。

    例如

    "emmet.syntaxProfiles": {
      "html": {
        "attr_quotes": "single"
      },
      "jsx": {
        "self_closing_tag": true
      }
    }
    
  • emmet.variables

    自定义 Emmet 代码片段使用的变量。

    例如

    "emmet.variables": {
      "lang": "de",
      "charset": "UTF-16"
    }
    
  • emmet.showExpandedAbbreviation

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

    设置值 说明
    never 从不在任何语言的建议列表中显示 Emmet 缩写。
    inMarkupAndStylesheetFilesOnly 仅对纯粹基于标记和样式表的语言显示 Emmet 建议('html'、'pug'、'slim'、'haml'、'xml'、'xsl'、'css'、'scss'、'sass'、'less'、'stylus')。
    always 在所有 Emmet 支持的模式以及在 emmet.includeLanguages 设置中具有映射的语言中显示 Emmet 建议。

    注意:always 模式下,新的 Emmet 实现不是上下文感知的。例如,如果您正在编辑一个 JavaScript React 文件,您不仅在编写标记时会获得 Emmet 建议,在编写 JavaScript 时也会获得建议。

  • emmet.showAbbreviationSuggestions

    将可能的 emmet 缩写显示为建议。默认情况下为 true

    例如,当您键入 li 时,您会获得所有以 li 开头的 emmet 代码片段的建议,例如 linklink:csslink:favicon 等。这对于学习您可能不知道存在的 Emmet 代码片段很有帮助,除非您熟记了Emmet 速查表

    在样式表或当 emmet.showExpandedAbbreviation 设置为 never 时不适用。

  • emmet.extensionsPath

    提供包含 snippets.json 文件的目录位置,该文件又包含您的自定义代码片段。

  • emmet.triggerExpansionOnTab

    将此设置为 true 以启用使用 Tab 键展开 Emmet 缩写。我们使用此设置提供适当的回退,以便在没有缩写可展开时提供缩进。

  • emmet.showSuggestionsAsSnippets

    如果设置为 true,则 Emmet 建议将与其他代码片段一起分组,您可以根据 editor.snippetSuggestions 设置对其进行排序。将此设置为 true 并将 editor.snippetSuggestions 设置为 top,以确保 Emmet 建议始终显示在其他建议的顶部。

  • emmet.preferences

    您可以使用此设置自定义 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 首选项中记录的任何其他首选项,请提交一个功能请求

后续步骤

Emmet 只是 VS Code 中众多出色的 Web 开发人员功能之一。继续阅读以了解更多信息:

  • HTML - VS Code 支持 HTML,提供智能感知、标签关闭和格式化功能。
  • CSS - 我们为 CSS、SCSS 和 Less 提供丰富的支持。

故障排除

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

当自定义标签用于像 MyTag>YourTagMyTag.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:ftrf:rxfw:b 等缩写。
  • 探索Emmet 操作中记录的所有其他 Emmet 功能。
  • 不要犹豫创建您自己的自定义 Emmet 代码片段