现已推出！阅读 10 月份的新功能和修复。

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: 使用 force aligned 和 aligned multiple 在 html.format.wrapAttributes 中的对齐大小，或使用 null 使用默认缩进大小。
  • html.format.templating: 遵守 django、erb、handlebars 和 php 模板语言标签。
  • html.format.unformattedContentDelimiter: 在此字符串之间保留文本内容。

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

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 中查看更多内容。

下一步

继续阅读以了解

常见问题

VS Code 有 HTML 预览吗？

没有，VS Code 不提供内置的 HTML 预览支持，但 VS Code Marketplace 中提供了可用的扩展。打开 **扩展** 视图（⇧⌘X（Windows、Linux Ctrl+Shift+X））并在“实时预览”或“html 预览”上搜索以查看可用的 HTML 预览扩展程序列表。

10/29/2024