Visual Studio Code 中的 HTML
Visual Studio Code 对 HTML 编程提供了开箱即用的基本支持。它具备语法高亮、基于 IntelliSense 的智能补全以及可定制的格式化功能。VS Code 还包含出色的 Emmet 支持。
IntelliSense
在键入 HTML 时，我们会通过 HTML IntelliSense 提供建议。在下图中，你可以看到建议的 HTML 元素闭合标签 </div> 以及特定于上下文的建议元素列表。
HTML 还支持文档符号（Document symbols），允许你通过 id 和类名快速导航到 DOM 节点。
你还可以处理嵌入式的 CSS 和 JavaScript。不过需要注意，不会跟踪来自其他文件的 script 和 style 引入，语言支持只会检查 HTML 文件的内容。
你可以随时按 ⌃Space (Windows, Linux Ctrl+Space) 来触发建议。
你还可以控制哪些内置的代码补全提供程序处于活动状态。如果你不想看到相应的建议，可以在用户或工作区设置中覆盖它们。
// Configures if the built-in HTML language suggests HTML5 tags, properties and values.
"html.suggest.html5": true
闭合标签
键入开始标签的 > 时，标签元素会自动闭合。
输入闭合标签的 / 时，会自动插入匹配的闭合标签。
你可以通过以下设置关闭自动闭合标签功能
"html.autoClosingTags": false
自动更新标签
修改标签时，关联编辑功能会自动更新匹配的闭合标签。此功能为可选功能，可以通过设置来启用
"editor.linkedEditing": true
颜色选择器
VS Code 颜色选择器 UI 现在可用于 HTML style 区域。
它支持配置从编辑器中拾取的颜色的色相、饱和度和不透明度。它还允许通过点击选择器顶部的颜色字符串来切换不同的颜色模式。当你将鼠标悬停在颜色定义上时，选择器便会显示。
悬停
将鼠标移动到 HTML 标签或嵌入的样式和 JavaScript 上，以获取有关光标所在符号的更多信息。
验证
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 文件
你可以在 VS Code 内部的集成浏览器中预览 HTML 文件。
要在集成浏览器中打开 HTML 文件，请在“文件资源管理器”或编辑器选项卡中右键单击该文件，然后选择在集成浏览器中打开。当 HTML 文件处于活动状态时，你也可以选择编辑器标题栏中的显示预览图标。
在你修改 HTML 文件时，预览会实时更新以反映你的更改。
格式化
为了改善 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 会被格式化。
应用市场有几个替代的格式化程序可供选择。如果你想使用其他格式化程序，请在设置中定义 "html.format.enable": false 来关闭内置的格式化程序。
Emmet 代码片段
VS Code 支持 Emmet 代码片段扩展。Emmet 缩写与编辑器自动完成列表中的其他建议和代码片段一起列出。
有关有效的缩写，请参阅 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 的相关扩展列表。
在上方选择一个扩展卡片以阅读其描述和评论，从而决定哪个扩展最适合你。在应用市场中查看更多信息。
下一步计划
继续阅读以了解有关以下内容的更多信息
- CSS、SCSS 和 Less - VS Code 对 CSS（包括 Less 和 SCSS）提供了一流的支持。
- Emmet - 了解 VS Code 强大的内置 Emmet 支持。
- Emmet 官方文档 - Emmet，面向 Web 开发人员的必备工具包。