VSCode HTML格式化乱因配置不当：需二选一格式化器（vscode-html-language-features或Prettier），统一tabSize、insertSpaces、indentInnerHtml，设置wrapLineLength与unformatted，并先验证结构再格式化。
VSCode 默认能格式化 HTML，但多数人遇到的不是“不工作”，而是“越格式化越乱”——div没缩进、head和body贴着html写、pre里的代码被硬折行。问题不在工具，在配置协同性。
怎么选对默认格式化器：vscode-html-language-features 还是 Prettier
两者不能共存，必须二选一：
- 纯 HTML 或少量 JS 项目，用 VSCode 自带的
vscode-html-language-features：稳定、轻量、嵌套逻辑符合直觉；在settings.json中设"editor.defaultFormatter": "vscode.html-language-features" - 项目含 JSX/TSX/Vue SFC，且已用
Prettier统一风格，那就关掉内置格式化器："html.format.enable": false，并确保"editor.defaultFormatter": "esbenp.prettier-vscode" - 右下角状态栏语言模式必须是
HTML，若显示Plain Text或PHP，格式化根本不会触发
editor.tabSize、html.format.indentInnerHtml 和 editor.insertSpaces 必须同步设
缩进错乱的根源常是这三项没对齐：
-
editor.insertSpaces必须为true：禁用 Tab 字符，避免空格混 Tab 导致 Prettier 报错 “Expected indentation of 2 spaces but found a tab” -
editor.tabSize设为2（推荐）或4，同时设editor.detectIndentation为false：防止打开旧文件时被历史缩进污染 -
html.format.indentInnerHtml设为true：否则<head>和<body>不会相对于<html>缩进一层，结构扁平难读
为什么 <p></p><p></p> 总被压成一行？调 html.format.wrapLineLength 和 html.format.unformatted
这不是 bug，是格式化器默认把短标签合并以节省行数。要让它按层级换行：
立即学习“前端免费学习笔记（深入）”；
-
html.format.wrapLineLength建议设为80–120：太小（如40）导致过度换行，太大（如200）又压行 -
html.format.unformatted必须包含"pre"、"code"、"textarea"：否则<pre>里原本整齐的代码会被格式化器强行折行或删空格 - 如果用了
Prettier，对应配置是prettier.htmlWhitespaceSensitivity: "ignore"，而非依赖unformatted
格式化后结构看似整齐，但 W3C 验证失败？先验证再格式化
格式化掩盖不了结构性错误。常见陷阱：
- 格式化会自动补闭合标签（如把
<br>改成<br />），但无法修复错位嵌套（比如<div><p></div></p>） - 务必用 W3C Markup Validation Service 粘贴代码检查：重点看 “Element X is not closed”、“Element Y is not allowed here” 类报错
- 修复验证错误后再格式化——否则可能把错误结构“对齐得更漂亮”，反而更难发现
最易被忽略的一点：格式化器只处理语法层面的缩进与换行，它不理解语义。一个 <div class="card"> 缩进再整齐，如果内部漏了 <header> 或误套了 <section>，结构依然脆弱。对齐是手段，不是目的。
