vscode html格式化需配置三要素：开启editor.formatonsave、设html.format.indentinnerhtml为true以增强嵌套可视性、用"force"值使属性强制换行；注释是格式化分组锚点。
VSCode 的 HTML 格式化不是“开箱即用就完美”的，它默认行为对新手不友好——比如 html.format.indentInnerHtml 默认是 false，导致 里的标签和 一样顶格，结构一眼看不出嵌套关系。
为什么保存后格式乱了？检查这三项配置
很多新手写完 HTML 一保存，发现缩进错位、属性挤成一行、甚至换行消失。根本原因不是代码写错了，而是 VSCode 没按你预期的规则格式化。关键看三个配置项：
-
editor.formatOnSave必须设为true，否则手动触发格式化容易漏掉 -
html.format.wrapLineLength默认120，但实际写<img src="..." alt="...">这类带长路径的标签时，很容易被硬折行，建议调到100或90 -
html.format.preserveNewLines默认true，但它只保留“原始空行”，不是“逻辑空行”；如果手写时没留空行，格式化后也不会加——别指望它自动分段
indentInnerHtml 开还是关？看你的排版习惯
这个开关决定 内部是否额外缩进一级。关（false）时，<h1></h1> 和 <p></p> 跟 同级缩进；开（true）后，它们会比 多一个缩进层级，视觉上更符合“内容在容器里”的直觉。
推荐新手设为 true，因为：
- 和多数教程示例、团队代码风格一致
- 配合 Emmet 展开（如输入
div>h1+p回车）时，生成结构天然有嵌套感 - 关闭后，
<script></script>或<style></style>块内容也顶格，容易和外层标签混淆
属性换行很关键：别让 class 和 id 挤在一行
VSCode 内置格式器不会自动把多属性拆成多行，除非你明确告诉它“哪些属性该独占一行”。它只认 html.format.wrapAttributes 这个配置，可选值有：auto、force、force-aligned、preserve。
新手建议用 "html.format.wrapAttributes": "force"：
-
auto：只在超长行才折，实际几乎不生效 -
force：每个属性强制换行，清晰易读，改class不影响其他属性 -
force-aligned：对齐等号，好看但对齐空格数难控制，协作时容易引发无意义 diff
例如：<div class="card" id="user-list" data-id="123"> 会被格式化为：<pre class="brush:php;toolbar:false;"><div class="card" id="user-list" data-id="123">
<h3>注释和空行不是装饰，是格式化的锚点</h3>
<p>VSCode 的 HTML 格式化器会尊重注释位置，并以注释为边界分组处理。比如：</p>
<pre class="brush:php;toolbar:false;"><!-- 导航开始 -->
<nav></nav><!-- 主体开始 --><main></main></pre>
<p>格式化后，两块之间会保留空行；但如果删掉注释，<code><nav></nav> 和 <main></main> 可能被压成紧挨着的两行。
所以，别省略模块注释——它不只是给人看的，也是给格式化器看的“停顿信号”。尤其在写 <header></header>、<footer></footer> 这类语义块时，加注释比加空行更可靠。
