Visual Studio Code 中的 HTML
Visual Studio Code 开箱即用，提供了对 HTML 编程的基本支持。其中包括语法高亮、IntelliSense 智能补全和可自定义的格式化功能。VS Code 还包含了强大的 Emmet 支持。
IntelliSense
在输入 HTML 时，我们会通过 HTML IntelliSense 提供建议。在下图中，您可以看到系统建议的 HTML 元素闭合标签 </div>，以及针对当前上下文的建议元素列表。
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.autoClosingTags": false
自动更新标签
修改标签时，链接编辑功能会自动更新匹配的闭合标签。此功能为可选，可以通过设置启用
"editor.linkedEditing": true
拾色器
VS Code 拾色器 UI 现已可在 HTML 样式部分使用。
它支持对从编辑器中获取的颜色进行色相、饱和度和不透明度的配置。它还提供通过点击拾色器顶部的颜色字符串来切换不同颜色模式的功能。当鼠标悬停在颜色定义上时，拾色器会自动出现。
Hover
将鼠标移动到 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 源代码的格式，您可以使用格式化文档命令 ⇧⌥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 开发者的必备工具包。
常见问题
VS Code 有 HTML 预览功能吗？
没有，VS Code 没有内置对 HTML 预览的支持，但您可以在 VS Code 插件市场中找到相关扩展。打开扩展视图（⇧⌘X (Windows, Linux Ctrl+Shift+X)）并搜索 'live preview' 或 'html preview'，即可查看可用的 HTML 预览扩展列表。