VSCodeHTML格式化设置教程

想要提升HTML代码的可读性和整洁度吗？本教程为你详细讲解VSCode的HTML格式化功能！通过右键菜单或快捷键`Shift + Alt + F`，你可以轻松手动格式化代码。更进一步，推荐将Prettier或内置HTML Language Features设置为默认格式化工具，只需在`settings.json`中配置`editor.defaultFormatter`即可。为了更高效，启用“format on save”功能，每次保存文件时，VSCode会自动整理你的HTML代码。如果你对格式化有更精细的需求，可以通过`.prettierrc`文件自定义缩进、引号等规则，打造专属的代码风格。掌握这些技巧，让你的HTML代码赏心悦目，提升开发效率！

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 格式化功能不复杂但容易忽略，合理设置后能显著提升编码体验。

终于介绍完啦！小伙伴们，这篇关于《VSCodeHTML格式化设置教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！