VSCode HTML格式化混乱的根源在于格式化器选择、缩进配置与嵌套规则不协同：需二选一设置默认格式化器（vscode-html-language-features或Prettier），统一配置editor.insertSpaces、tabSize、html.format.indentInnerHtml及unformatted项，并确保语言模式正确、formatOnSave作用域无冲突。
VSCode 默认能格式化 HTML，但多数人遇到的问题不是“不能”，而是“格式化后更乱”——缩进错位、标签挤成一行、pre 里内容被折行。根本原因在于没控制好格式化器归属、缩进源和嵌套规则。
怎么选对默认格式化工具（vscode-html-language-features 还是 Prettier）
VSCode 自带的 vscode-html-language-features 是轻量、稳定、专为 HTML 设计的格式化器；Prettier（esbenp.prettier-vscode）则强在跨语言统一风格，但对 HTML 的嵌套逻辑处理稍“激进”。两者不兼容，必须二选一。
- 如果你只写纯 HTML 或搭配少量 JS，用内置的更安全：在
settings.json中设"editor.defaultFormatter": "vscode.html-language-features" - 如果项目含 JSX/TSX/JS，且团队已用 Prettier 管理所有代码，那就统一用它，但需额外配
"html.format.enable": false关闭内置格式化，避免冲突 - 检查右下角语言模式是否为
HTML—— 若显示为Plain Text或PHP，格式化根本不会触发
为什么缩进还是错乱？关键看这三个配置项
缩进混乱的根源往往不是格式化器本身，而是编辑器底层缩进行为与格式化逻辑打架。以下三项必须协同设置：
-
editor.insertSpaces必须为true：强制用空格而非 Tab，避免混用导致 Prettier 报Expected indentation of 2 spaces but found a tab -
editor.tabSize设为2或4（推荐2），且editor.detectIndentation设为false：禁用自动探测，防止打开旧文件时被历史缩进污染 -
html.format.indentInnerHtml设为true：否则<head>和<body>不会相对于<html>缩进，结构扁平难读
格式化后标签全挤在一行？调整 wrapLineLength 和 unformatted
默认情况下，VSCode HTML 格式化器会把短标签压成一行（比如 <p>Hello</p><p>World</p>），这不是 bug，是设计行为。要让它按层级换行，得干预两处：
立即学习“前端免费学习笔记（深入）”；
-
html.format.wrapLineLength控制单行最大字符数，默认120。若设太小（如40），会导致过度换行；设太大（如200）又容易压行。前端项目建议保持80–120 -
html.format.unformatted必须包含"pre", "code", "textarea"：否则<pre>console.log('x')</pre>会被强行缩进并折行，破坏原始语义 - 若你用 Prettier，
wrapLineLength无效，改用.prettierrc中的"printWidth": 80
保存即格式化却失效？检查 formatOnSave 的作用域
editor.formatOnSave 开启后仍不生效，常见于以下情况：
- 该设置被工作区（
.vscode/settings.json）或项目级.prettierrc覆盖，优先级顺序是：文件夹级 > 工作区 > 用户全局 - 文件未保存（.html 后缀）或语言模式未识别为 HTML，快捷键
Shift+Alt+F会提示 “没有可用的格式化程序” - Prettier 扩展未启用，或安装后未重启 VSCode —— 某些版本需手动启用（右键扩展 → “启用（工作区）”）
- 大文件（>2000 行）可能超时，加
"editor.formatOnSaveTimeout": 7000防止中断
真正麻烦的不是配置项多，而是它们之间有隐式依赖：比如 html.format.indentInnerHtml 只在 vscode-html-language-features 下生效，而 tabWidth 在 Prettier 里才起作用。改一个，常要同步调另外两个，否则就出现“看着设对了，但就是不对齐”的情况。
