VSCode作为前端开发常用的代码编辑器，内置了HTML格式化功能，可自动调整HTML代码的缩进、换行和标签排列，让代码结构更清晰。该功能无需额外安装插件即可使用，适配大多数常规的开发需求。
基础使用方式
快捷键格式化
打开需要格式化的HTML文件后，使用快捷键可快速触发格式化操作。Windows和Linux系统下快捷键为Shift+Alt+F，macOS系统下快捷键为Shift+Option+F。按下快捷键后，整个当前文件的HTML代码会自动按照默认规则完成格式化。
右键菜单格式化
在HTML文件编辑区域右键点击，在弹出的菜单中选择格式化文档选项，同样可以触发当前文件的HTML格式化操作，效果和快捷键触发一致。
保存时自动格式化
可以配置VSCode在保存HTML文件时自动执行格式化，避免手动操作的繁琐。打开VSCode的设置页面，搜索editor.formatOnSave选项，将其勾选开启即可。开启后每次保存HTML文件时，编辑器会自动完成格式化操作。
自定义格式化规则
如果默认格式化规则不符合个人代码风格，可以通过修改设置来自定义规则。打开VSCode的settings.json配置文件，添加HTML相关的格式化配置项即可。
以下是常用的自定义配置示例：
{
// HTML格式化时是否保留空行
"html.format.preserveEmptyLines": true,
// 标签属性的换行规则，可选auto、force、never
"html.format.wrapAttributes": "auto",
// 每行的最大字符数，超出后自动换行
"html.format.wrapLineLength": 120,
// 是否格式化内联元素的内容
"html.format.contentUnformatted": "pre,code,textarea",
// 缩进大小，单位为空格
"html.format.indentInnerHtml": true,
"editor.tabSize": 2
}
常见问题排查
- 如果快捷键触发格式化无反应，检查当前文件是否为HTML类型，或者是否安装了其他冲突的格式化插件，可暂时禁用其他插件后重试。
- 格式化后标签位置不符合预期，可检查自定义配置是否正确，或者是否开启了其他格式化工具的覆盖规则。
- 部分内联代码被意外格式化，可在
html.format.contentUnformatted配置中添加对应的标签名，避免这类内容被格式化。
代码示例
以下是格式化前后的HTML代码对比，可直观看到格式化效果：
格式化前的代码：
<div class="container"><h1>标题</h1><p>这是一段测试文本</p><ul><li>列表项1</li><li>列表项2</li></ul></div>
格式化后的代码：
<div class="container">
<h1>标题</h1>
<p>这是一段测试文本</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
</div>