VSCode的HTML格式化功能怎么用_VSCodeHTML格式化功能教程

VSCode的HTML格式化功能可提升代码可读性，支持右键或快捷键Shift+Alt+F手动格式化，推荐设置Prettier或内置工具为默认格式化程序，通过settings.json配置默认 formatter，启用“format on save”实现保存时自动格式化，并可用.prettierrc文件自定义缩进、引号等规则。

VSCode 的 HTML 格式化功能可以帮助你快速整理代码结构，让标签嵌套清晰、缩进统一，提升可读性。这个功能开箱即用，只需简单操作就能生效。

自动格式化 HTML 文件

当你编辑一个 .html 文件时，VSCode 通常会自动识别语言模式，并启用默认的格式化工具。要手动触发格式化：

• 右键点击编辑器中的 HTML 内容，选择“格式化文档”
• 或使用快捷键：Shift + Alt + F（Windows / Linux），Shift + Option + F（Mac）

如果未指定默认格式化工具，VSCode 会提示你选择一个。推荐选择内置的 Prettier 或 HTML Language Features。

设置默认格式化工具

为避免每次都要选择，可以设定默认的格式化程序：

立即学习“前端免费学习笔记（深入）”；

• 打开设置（Ctrl + ,）
• 搜索“Default Formatter”
• 找到 “Editor: Default Formatter”，设置为 esbenp.prettier-vscode 或 vscode.html-language-features

也可以在项目根目录添加 .vscode/settings.json 文件，指定格式化规则：

{
"editor.defaultFormatter": "esbenp.prettier-vscode"
}

保存时自动格式化

提高效率的一个常用做法是开启“保存即格式化”：

• 进入设置 → 搜索 “format on save”
• 勾选 Editor: Format On Save

这样每次保存文件（Ctrl + S），HTML 代码就会自动被整理整齐。

自定义格式化规则（可选）

如果你使用 Prettier，可在项目中创建 .prettierrc 文件来控制格式化行为：

{
"singleQuote": true,
"tabWidth": 2,
"semi": false,
"printWidth": 80
}

这些配置会影响 HTML（以及 JS/JSX）的格式化效果，比如缩进空格数、是否使用分号等。

基本上就这些。VSCode 的 HTML 格式化功能不复杂但容易忽略，合理设置后能显著提升编码体验。