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

它支持从编辑器中拾取的颜色的色相、饱和度和不透明度的配置。通过单击选择器顶部的颜色字符串，还可以实现不同颜色模式之间的切换。当你将鼠标悬停在颜色定义上时，选择器会出现。

Hover

将鼠标悬停在 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 元素以及源代码中的多行注释都可以进行折叠。

此外，你还可以使用以下区域标记来定义一个折叠区域：`` 和 ``

如果你更倾向于切换到基于缩进的 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 预览扩展列表。

01/08/2026