现已发布！了解来自 11 月的新功能和修复。

Visual Studio Code 中的 HTML

Visual Studio Code 开箱即用地提供对 HTML 编程的基本支持。它具有语法突出显示、使用 IntelliSense 的智能补全和可自定义的格式设置。VS Code 还包括出色的 Emmet 支持。

IntelliSense

当您在 HTML 中键入时，我们会通过 HTML IntelliSense 提供建议。在下图中，您可以看到建议的 HTML 元素闭合 </div> 以及特定于上下文的建议元素列表。

HTML IntelliSense

HTML 还提供了文档符号，允许您通过 id 和类名快速导航到 DOM 节点。

您还可以使用嵌入的 CSS 和 JavaScript。但是，请注意，不会跟踪来自其他文件的脚本和样式包含，语言支持仅查看 HTML 文件的内容。

您可以随时按下 ⌃Space (Windows，Linux Ctrl+Space) 来触发建议。

您还可以控制哪些内置代码完成提供程序处于活动状态。如果您不想看到相应的建议，请在您的用户或工作区设置中覆盖它们。

// Configures if the built-in HTML language suggests HTML5 tags, properties and values.
"html.suggest.html5": true

关闭标记

当键入开始标记的 > 时，标记元素会自动关闭。

HTML Close1

当输入关闭标记的 / 时，会插入匹配的关闭标记。

HTML Close2

您可以使用以下设置关闭自动关闭标记

"html.autoClosingTags": false

自动更新标记

当修改标记时，链接编辑功能会自动更新匹配的关闭标记。该功能是可选的，可以通过设置启用

"editor.linkedEditing": true

颜色选择器

VS Code 颜色选择器 UI 现在可在 HTML 样式部分中使用。

color picker in HTML

它支持配置从编辑器中拾取的颜色的色调、饱和度和不透明度。它还提供通过单击选择器顶部的颜色字符串在不同颜色模式之间切换的功能。当您将鼠标悬停在颜色定义上时，选择器会显示。

悬停

将鼠标移动到 HTML 标记或嵌入的样式和 JavaScript 上，以获取有关光标下符号的更多信息。

HTML Hover

验证

HTML 语言支持对所有嵌入的 JavaScript 和 CSS 执行验证。

您可以使用以下设置关闭验证

// Configures if the built-in HTML language support validates embedded scripts.
"html.validate.scripts": true,

// Configures if the built-in HTML language support validates embedded styles.
"html.validate.styles": true

折叠

您可以使用行号和行首之间的装订线上的折叠图标来折叠源代码区域。折叠区域适用于源代码中多行注释的所有 HTML 元素。

此外，您可以使用以下区域标记来定义折叠区域：<!-- #region --> 和 <!-- #endregion -->

如果您更喜欢为 HTML 切换到基于缩进的折叠，请使用

"[html]": {
    "editor.foldingStrategy": "indentation"
},

格式化

为了改进 HTML 源代码的格式，您可以使用 格式化文档 命令 ⇧⌥F (Windows Shift+Alt+F，Linux Ctrl+Shift+I) 来格式化整个文件，或使用 格式化选择 ⌘K ⌘F (Windows，Linux Ctrl+K Ctrl+F) 来仅格式化选定的文本。

HTML 格式化程序基于 js-beautify。该库提供的格式化选项在 VS Code 设置中公开。

  • html.format.wrapLineLength：每行最大字符数。
  • html.format.unformatted：不应重新格式化的标记列表。
  • html.format.contentUnformatted：标记列表（逗号分隔），其中内容不应重新格式化。
  • html.format.extraLiners：之前应该有额外换行符的标记列表。
  • html.format.preserveNewLines：是否应保留元素之前的现有换行符。
  • html.format.maxPreserveNewLines：在一个块中要保留的最大换行符数。
  • html.format.indentInnerHtml：缩进 <head> 和 <body> 部分。
  • html.format.wrapAttributes：属性的换行策略
    • auto：当超过行长时换行
    • force：换行所有属性，第一个除外
    • force-aligned：换行所有属性，第一个除外，并对齐属性
    • force-expand-multiline：强制换行所有属性
    • aligned-multiple：当行长度超出时换行，并垂直对齐属性
    • preserve：保留属性的换行
    • preserve-aligned：保留属性的换行，但进行对齐
  • html.format.wrapAttributesIndentSize：在使用 html.format.wrapAttributes 中的 force aligned 和 aligned multiple 时使用的对齐大小，或者使用 null 来使用默认的缩进大小。
  • html.format.templating：支持 Django、erb、handlebars 和 php 模板语言标签。
  • html.format.unformattedContentDelimiter：保持此字符串之间的文本内容不被格式化。

提示：格式化程序不会格式化 html.format.unformatted 和 html.format.contentUnformatted 设置中列出的标签。除非排除 'script' 标签，否则嵌入的 JavaScript 将被格式化。

Marketplace 有几个可供选择的替代格式化程序。如果您想使用不同的格式化程序，请在您的设置中定义 "html.format.enable": false 以关闭内置格式化程序。

Emmet 代码片段

VS Code 支持 Emmet 代码片段扩展。Emmet 缩写与编辑器自动完成列表中的其他建议和代码片段一起列出。

Emmet HTML support built-in

提示： 请参阅 Emmet 速查表的 HTML 部分，了解有效的缩写。

如果您想在其他语言中使用 HTML Emmet 缩写，您可以使用 emmet.includeLanguages 设置 将其中一种 Emmet 模式（例如 css、html）与其他语言关联起来。该设置接受一个 语言标识符，并将其与 Emmet 支持模式的语言 ID 相关联。

例如，要在 JavaScript 中使用 Emmet HTML 缩写：

{
  "emmet.includeLanguages": {
    "javascript": "html"
  }
}

我们还支持 用户定义代码片段。

HTML 自定义数据

您可以通过声明性的 自定义数据格式来扩展 VS Code 的 HTML 支持。通过将 html.customData 设置为遵循自定义数据格式的 JSON 文件列表，您可以增强 VS Code 对新 HTML 标签、属性和属性值的理解。然后，VS Code 将为提供的标签、属性和属性值提供诸如补全和悬停信息之类的语言支持。

您可以在 vscode-custom-data 存储库中阅读有关使用自定义数据的更多信息。

HTML 扩展

安装扩展程序以添加更多功能。转到 扩展 视图 (⇧⌘X (Windows, Linux Ctrl+Shift+X))，然后键入 'html' 以查看相关扩展程序的列表，以帮助您创建和编辑 HTML。

提示：单击上面的扩展程序图块以阅读描述和评论，以确定哪个扩展程序最适合您。在 Marketplace 中查看更多信息。

后续步骤

继续阅读以了解有关以下内容的更多信息

  • CSS、SCSS 和 Less - VS Code 对 CSS（包括 Less 和 SCSS）具有一流的支持。
  • Emmet - 了解 VS Code 强大的内置 Emmet 支持。
  • Emmet 官方文档 - Emmet，Web 开发人员必不可少的工具包。

常见问题

VS Code 有 HTML 预览吗？

否，VS Code 没有内置的 HTML 预览支持，但在 VS Code Marketplace 中有扩展程序可用。打开 扩展 视图 (⇧⌘X (Windows, Linux Ctrl+Shift+X))，然后搜索 “live preview” 或 “html preview” 以查看可用的 HTML 预览扩展程序列表。

12/11/2024