vs code保存时html自动格式化失效，根本原因是未显式将prettier设为html默认格式器：必须在[html]块中配置editor.defaultformatter、禁用内置html.format.enable、并设htmlwhitespacesensitivity="css"。
VS Code 保存时自动格式化 HTML 必须显式指定 Prettier 为 HTML 的默认格式器，否则会走内置格式器，Pretterr 完全不生效。
为什么 editor.formatOnSave 开了却没反应
常见现象是：点了保存，缩进没变、属性没换行、空格没对齐——根本原因不是功能坏了，而是 VS Code 没把格式化任务交给 Prettier。
-
html.format.enable默认为true，它会强制启用 VS Code 内置 HTML 格式器，和 Prettier 抢控制权 - 即使全局设了
"editor.defaultFormatter": "esbenp.prettier-vscode"，对.html文件也无效，因为 VS Code 会按语言类型覆盖该设置 - 右下角语言模式显示“Plain Text”或“HTML (Angular)”等非标准模式，也会导致格式化被跳过
必须在 [html] 块里单独配置 editor.defaultFormatter
这是最常漏掉的关键一步。VS Code 要求针对特定语言显式绑定格式器，不能只靠全局设置。
- 打开项目根目录的
.vscode/settings.json（优先于用户级设置，团队协作更可靠） - 确保包含以下三部分：
{ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.tabSize": 2, "editor.insertSpaces": true } } - 务必禁用内置格式器：
"html.format.enable": false，否则它会在你不知情时悄悄回滚 Prettier 的结果
htmlWhitespaceSensitivity: "css" 不是可选项，是必填项
如果你的 HTML 里有 <p><img> text</p> 这类依赖空格渲染的结构，用错这个值会导致视觉错乱。
-
"strict"：会删掉所有有意义的空白，<img> text可能变成<img>text，文字紧贴图片 -
"ignore"：忽略换行和缩进，但可能让嵌套标签失去可读性 - 正确值是
"css"：Prettier 会尊重 CSS 中white-space和display: inline的语义，保留必要的空格 - 需写入项目根目录的
.prettierrc：{"htmlWhitespaceSensitivity": "css"}
ESLint 对 HTML 文件本身不做任何格式化
别指望 eslint --fix 或 eslint-plugin-html 来调整标签缩进、属性顺序或换行——它们只处理 <script></script> 和 <style></style> 块里的 JS/CSS 代码。
-
eslint-plugin-html的作用只是“抽取出 script/style 片段，再交给 ESLint 处理”，不会碰<div class="a" id="b"> 这种结构 <li>HTML 层面的格式（比如把长属性拆成多行、子元素是否缩进）只能由 Prettier 或内置格式器完成</li> <li>如果同时启用了 ESLint 和 Prettier，建议让 Prettier 主导格式化，ESLint 专注报错和修复逻辑问题，避免规则打架</li> <p>真正容易被忽略的是：格式化行为高度依赖语言识别和配置作用域。一个没配对的 <code>[html]块、一个没关掉的html.format.enable、或者一个错设的htmlWhitespaceSensitivity，都会让整个流程静默失败——看不出报错，但效果就是不对。
