HTML格式化分三层：结构（语义标签）、样式（强调标签）、输出（缩进换行）；VSCode默认仅处理第三层，需手动配置indentInnerHtml、wrapLineLength等参数，并注意pre-wrap、prettyPrint等关键设置。
先搞清“格式化”在HTML里到底指什么
很多人一看到“HTML格式化”就默认是美化缩进、换行，其实它分三层：结构格式化（用 <h1>、<p> 等定义语义）、样式格式化（用 <b>、<strong> 等控制强调）、输出格式化（保存/导出时的缩进、换行、引号等排版）。三者目标不同，不能混着调。
比如你用 VSCode 按 Shift + Alt + F，它只管第三层（输出格式化）；而把 <div> 换成 <article> 是第一层的事——编辑器不会自动帮你做这个。
VSCode 里 HTML 格式化行为怎么调才不翻车
默认配置容易踩坑：比如 html.format.indentInnerHtml 默认是 false，结果 <body> 里的标签和 <head> 一样顶格，看着像没嵌套；又比如 wrapLineLength 设成 80，但你写了个带 12 个属性的 <table>，它会强行折成 4 行，反而更难读。
- 推荐起步配置：
"html.format.wrapLineLength": 120、"html.format.indentInnerHtml": true、"html.format.preserveNewLines": false -
preserveNewLines: true看似“保留原样”，实则会让空行失控——比如你删了一段注释，前后空行还在，格式化后变成大片空白 - 别依赖全局设置，项目根目录加
.vscode/settings.json，避免团队里有人开自动保存却没配对规则
用 <pre> 和 white-space 处理原始文本缩进
前端常遇到“这段代码/日志/配置要原样显示”，但直接贴进去空格全塌了。这时候不是靠 HTML 标签格式化，而是靠 CSS 控制空白符渲染：
立即学习“前端免费学习笔记（深入）”；
-
<pre>默认启用white-space: pre，保留所有空格和换行，但字体固定宽、无换行 - 想保留缩进又允许自动换行？用
white-space: pre-wrap，再配合font-family: monospace - 千万别用
<code>标签包大段内容——它只是语义标记，不带任何空白处理逻辑 - 如果内容来自接口，注意服务端返回的换行符是
\n还是\r\n，浏览器对前者识别更稳
解析后重新导出 HTML 时缩进失效？检查 DocumentOutputSettings
用 html4cj 或类似 DOM 库解析完再序列化，输出挤成一行，不是解析错了，是导出没开美化。关键开关就一个：prettyPrint。
- 设
prettyPrint = true后，还要看indentAmount（默认是 1），值太小缩进不明显，设成 2 或 4 更符合习惯 -
outline = true适合调试：所有标签强制块级换行，哪怕<span>也独占一行，一眼看出嵌套断在哪 -
escapeMode选base就够用，除非你要输出给 XML 解析器消费，否则不用xhtml那档转义 - 别漏掉
syntax: htmlSyntax——设成xmlSyntax会导致自闭合标签如<img />变成<img></img>，浏览器可能拒渲染
真正容易被忽略的是：这些设置只影响“导出字符串”，不影响 DOM 树本身。改完设置不生效？大概率你还在打印原始 node.outerHTML，而不是调用带 DocumentOutputSettings 的序列化方法。
