编辑

Visual Studio Code 中的 HTML

Visual Studio Code 为 HTML 编程提供了开箱即用的基本支持。它具备语法高亮、IntelliSense 智能补全以及可自定义的格式化功能。VS Code 还包含了强大的 Emmet 支持。

IntelliSense

在您输入 HTML 时，我们会通过 HTML IntelliSense 提供建议。在下图中，您可以看到一个建议的 HTML 元素闭合标签 </div>，以及一个与上下文相关的建议元素列表。

HTML IntelliSense

HTML 也支持文档符号，允许您通过 id 和 class 名称快速导航到 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 的 style 区域。

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 预览扩展列表。

09/11/2025