在Visual Studio Code中使用HTML

Visual Studio Code 开箱即提供了对 HTML 编程的基本支持。它有语法高亮、带有 IntelliSense 的智能完成和可定制的格式化。VS Code 还包括出色的 Emmet 支持。

智能感知

在您输入HTML时，我们通过HTML智能感知提供建议。在下面的图像中，您可以看到建议的HTML元素闭合。</div>以及特定上下文中建议的元素列表。

HTML 智能感知

文档符号也适用于HTML，允许您通过id和类名快速导航到DOM节点。

您也可以使用嵌入的CSS和JavaScript。但是，请注意，从其他文件包含的脚本和样式不会被遵循，语言支持仅查看HTML文件的内容。

您可以随时通过按 ⌃Space (Windows, Linux Ctrl+Space) 来触发建议。

您还可以控制哪些内置代码完成提供程序是活动的。在您的用户或工作区设置中覆盖这些设置，如果您不希望看到相应的建议。

// 配置是否建议使用HTML5标签、属性和值。
"html.suggest.html5": true

关闭标签

标签元素会在自动关闭时>输入： opening tag 的首部被输入。

HTML 关闭1

插入匹配的闭合标签时输入：/输入闭合标签。

HTML 关闭2

你可以通过以下方式关闭自动闭合标签设置:

自动更新标签

当修改一个标签时，链接编辑功能会自动更新匹配的闭合标签。该功能是可选的，可以通过设置启用：

"editor.linkedEditing"：真

颜色选择器

VS Code 颜色选择器用户界面现在可以在 HTML 风格部分中使用。

HTML中的颜色选择器

它支持为从编辑器中拾取的颜色配置色调、饱和度和不透明度。它还通过点击拾色器顶部的颜色字符串在不同的颜色模式之间进行切换。当您悬停在颜色定义上时，拾色器会显示。

悬停

将鼠标悬停在HTML标签或嵌入式样式和JavaScript上，以获取有关光标下符号的更多信息。

HTML 悬停

验证

HTML语言支持对所有嵌入的JavaScript和CSS进行验证。

您可以通过以下设置关闭验证：

// 配置内置的HTML语言支持是否验证嵌入的脚本。
"html.validate.scripts"：真，

// 配置内置HTML语言支持是否验证嵌入的样式。
"html.validate.styles"：真

折叠

您可以使用行号和行开始之间的空白区中的折叠图标来折叠源代码的区域。源代码中的所有HTML元素和多行注释都可折叠。

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

如果你更喜欢将HTML切换到基于缩进的折叠，请使用：

"[html]": {
    "editor.foldingStrategy": "indentation"
},

格式化

为了改进HTML源代码的格式，您可以使用格式化文档命令⇧⌥F（WindowsShift+Alt+F，LinuxCtrl+Shift+I）来格式化整个文件，或者格式化选定内容 ⌘K ⌘F（Windows，LinuxCtrl+K Ctrl+F）来仅格式化选定的文本。

HTML格式化器基于js-beautify。该库提供的格式化选项在VS Code设置中显示：

html格式换行长度
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
: 每行最大字符数。
html.格式.未格式化
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
: 不应重新格式化的标签列表。
html格式化内容未格式化
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
: 标签列表，以逗号分隔，内容不应重新格式化。
html.format.extraLiners
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
: 应该在它们前面有一个额外的新行的标签列表。
html.格式.保留换行符
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
是否保留元素之前的现有换行。
html格式最大保留换行符
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
: 一个块中保留的最大换行符数量。
html.格式化.缩进内联HTML
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
: 缩进<head>和<身体>部分。
html.格式.包装属性
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
: 属性的包装策略:
- 自动: 超过行长度时进行换行
- 力包装所有属性，除了第一个
- 强制对齐包装所有属性，除了第一个，并对属性进行对齐
- 强制展开多行: 包裹所有属性
- 对齐-多个: 超过行长度时包裹，垂直对齐属性
- 保护: 保留属性的包装
- 保持对齐保持属性的包装，但对齐
html.格式.包装属性缩进大小
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
: 使用时的对齐大小强制对齐和对齐多个在
html.格式.包装属性
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
或无使用默认的缩进大小。
html.格式.模板
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
: 尊重 django、erb、handlebars 和 php 模板语言标签。
html.format.unformattedContentDelimiter
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
保持文本内容在这个字符串之间。

提示： 格式化器不会格式化列出的标签
html.格式.未格式化
在 VS Code 中打开
在 VS Code Insiders 中打开
和
html格式化内容未格式化
在 VS Code 中打开
在 VS Code Insiders 中打开
设置。嵌入的JavaScript将被格式化，除非“script”标签被排除。

市场有几种不同的格式化器可供选择。如果您想使用不同的格式化器，请定义 "html.format.enable": false在你的设置中关闭内置格式化器。

Emmet片段

VS Code 支持Emmet 模板扩展。Emmet 缩写与编辑器自动完成列表中的其他建议和模板一起列出。

Emmet HTML 支持内置

提示： 查看 Emmet 操作指南中的 HTML 部分，以获取有效的缩写。

如果您想在其他语言中使用HTML Emmet缩写，您可以将Emmet模式之一（例如层叠样式表，HTML) 与其他语言一起

设置。设置接受一个语言识别器并将其与Emmet支持的模式的语言ID相关联。

例如，在JavaScript中使用Emmet HTML缩写：

{
  "emmet.includeLanguages": {
    "javascript": "html"
  }
}

我们还支持用户自定义片段.

HTML 自定义数据

你可以通过一种声明性的自定义数据格式来扩展 VS Code 的 HTML 支持。通过设置

将遵循自定义数据格式的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，网页开发人员的必备工具。

常见问题

VS Code 有 HTML 预览功能吗？

不，VS Code 没有内置的 HTML 预览支持，但在 VS Code 市场中有可用的扩展。打开扩展视图 (⇧⌘X (Windows, Linux Ctrl+Shift+X))，搜索“live preview”或“html preview”以查看可用的 HTML 预览扩展列表。