VSCode 默认HTML格式化能力有限，缩进错乱主因是html.format.indentInnerHtml仅控制head/body缩进，不作用于内部嵌套；Prettier启用时该配置被忽略，且需正确配置默认formatter、语言模式及.htmlWhitespaceSensitivity才能生效。
VSCode 默认的 HTML 格式化能力有限，直接开箱即用往往导致缩进错乱、属性挤成一行、语义标签被错误缩进等问题——这不是你代码写得差，而是默认配置没对准现代 HTML5 的结构逻辑。
为什么 html.format.indentInnerHtml 开了反而更乱？
这个配置项的作用常被误解：它只控制 <html> 标签内部的 <head> 和 <body> 是否额外缩进一层，**不控制 body 内部嵌套结构的缩进深度**。设为 true 后，你会看到：
-
<html>顶格，<head>和<body>缩进 2 空格（按editor.tabSize），但里面的<header>、<main>仍和<body>同级——视觉上像“塌陷”了 - 若项目已用 Prettier，它会忽略此配置，完全按自身规则重排；此时开启反而造成编辑器内格式化行为冲突
- 在含大量模板语法（如
{{if}}或v-if）的文件中，该选项可能让条件块缩进失序
editor.formatOnSave 触发不了 HTML 格式化？检查这三处
常见现象是保存后毫无反应，不是插件坏了，而是格式化链路断在了某个环节：
- 确认当前文件语言模式是
HTML（右下角状态栏显示，不是Plain Text或PHP） - 检查是否设置了
editor.defaultFormatter：若值为空或指向一个不支持 HTML 的 formatter（如esbenp.prettier-vscode未启用 HTML 支持），则 fallback 到内置格式化器，而它对复杂嵌套处理较弱 - 项目根目录存在
.prettierrc且未声明"htmlWhitespaceSensitivity": "css"时，Prettier 可能因 whitespace 敏感度误判换行位置，导致格式化后结构“跳变”
手动调用 Format Document With... 总选错引擎？
VSCode 在有多个 formatter 可用时（比如同时装了 Prettier 和内置 HTML 格式化器），不会记住你上次选的，每次都要重新点。解决方法很直接：
立即学习“前端免费学习笔记（深入）”；
- 右键 →
Format Document With...→ 选中你要的 formatter（如Prettier）→ 点击右侧的齿轮图标 → 选择Configure Default Formatter for 'html' - 该操作会向工作区或用户设置中写入：
"[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } - 注意：如果项目里有
.editorconfig，它的indent_style和indent_size会覆盖 VSCode 的editor.tabSize，但不影响 formatter 的实际缩进输出
格式化后 <main> 和 <section> 缩进不一致？这是语义层级问题，不是缩进 bug
HTML5 语义标签本身不带默认缩进含义，但现代 formatter（尤其是 Prettier）会根据 W3C 推荐的文档大纲算法隐式识别层级。例如：
-
<main>是顶级内容容器，通常与<body>同级缩进（即使html.format.indentInnerHtml: true） -
<article>内部若含<header>+<h2>，Prettier 会把它缩进一层，以反映其在大纲中的子节地位 - 若发现
<nav>被缩进到<header>内部，但源码里它是平级的，大概率是原始 HTML 存在未闭合标签，导致 AST 解析错位——先运行 W3C Validator，再格式化
真正容易被忽略的是：格式化无法修复语义错误。把 <div class="nav"> 换成 <nav> 后，必须同步检查它是否真的承担导航功能，否则屏幕阅读器仍会跳过——缩进再整齐，机器也读不懂。
