开启保存时自动格式化并选择Prettier为默认工具，可实现HTML代码自动对齐；通过设置“Editor: Format On Save”、安装Prettier扩展及配置规则如缩进和引号，确保代码整洁。
VSCode中HTML自动格式化功能可以帮助你保持代码整洁，提升开发效率。只需要简单配置，就能实现保存时或输入时自动格式化HTML代码。
启用保存时自动格式化
最常用的方式是设置在保存文件时自动格式化代码。这样你无需手动操作，每次保存都会自动调整格式。
- 打开VSCode设置界面：点击左下角齿轮图标，选择“设置”
- 搜索“format on save”
- 勾选Editor: Format On Save选项
开启后，每次按下 Ctrl+S（或 Cmd+S）保存HTML文件时，代码会自动格式化。
选择合适的格式化工具
VSCode默认使用内置的HTML格式化器，大多数情况下已足够使用。如需更强大功能，可安装扩展如Prettier。
立即学习“前端免费学习笔记（深入）”；
- 前往扩展市场（左侧活动栏拼图图标）
- 搜索并安装Prettier - Code formatter
- 安装完成后，将其设为默认格式化工具
设置默认格式化工具方法：
- 右键编辑器中的HTML文件，选择“格式化文档时使用...”
- 选择“Prettier”并勾选“设为默认”
自定义HTML格式化规则
如果想调整缩进、标签换行等细节，可以添加配置项。
在项目根目录创建或修改 .prettierrc 文件：
{"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}
或者在VSCode设置中搜索“html format”，可调整如下选项：
- Wrap Line Length：控制每行最大长度
- Unwrap Tags：指定不需要换行的标签
- Indent Inner HTML：是否对body、head等内容缩进
快捷键手动格式化
即使未开启自动保存格式化，也可随时手动执行。
- 全选代码：Ctrl+A（或Cmd+A）
- 执行格式化：Shift+Alt+F（Windows）或 Shift+Option+F（Mac）
若提示“找不到格式化程序”，请确认已安装Prettier或启用内置HTML格式化器。
基本上就这些。只要开启保存格式化并选好工具，HTML代码就能始终保持整齐。不复杂但容易忽略细节，比如默认格式化器的选择和项目级配置。
