必须手动为[html]语言单独指定默认格式化器为"esbenp.prettier-vscode"，禁用内置html.format.enable，设printWidth:100和htmlWhitespaceSensitivity:"css"，并确保文件语言模式为HTML。
VS Code 默认不接管 HTML 文件的格式化，不是插件没装、配置没写，而是根本没被授权——必须手动指定 Prettier 为 html 类型的默认格式化器，否则所有配置都白搭。
怎么让 Prettier 真正接管 .html 文件
这是最常卡住的第一步。即使 .prettierrc 存在、插件已安装，VS Code 仍会优先用内置格式器（html.format.enable 控制），Prettier 被静默跳过。
- 打开任意
.html文件，右键 → Format Document With… → Configure Default Formatter…，选中Prettier - Code formatter（注意名字要完全匹配） - 检查项目根目录的
.vscode/settings.json或用户设置，删掉或注释掉"html.format.enable": true—— 这行和 Prettier 冲突 - 确保 VS Code 右下角语言模式是
HTML（不是 Plain Text、PHP 或其他），点一下可切换 - 顺手开启
editor.formatOnSave，避免每次手动触发
为什么 <div class="a b" data-id="123"> 被拆成三行<p>这不是 bug，是 <code>printWidth 在严格执行。HTML 属性名长、值多（比如 data-test-id、aria-label），默认 80 极易触发换行，反而降低可读性。
-
printWidth: 100 是更务实的选择：够宽，能保住多数单行属性；又不至于宽到让超长标签挤成一行难以维护
-
htmlWhitespaceSensitivity: "css" 必须设：否则 <p><img alt="HTML中使用Prettier统一HTML代码格式的配置方法" >text</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> 可能被折成多行，破坏行内元素渲染逻辑
- 别碰
bracketSameLine: true：HTML 多属性时，> 跑到最后一行末尾，找结束标签像寻宝
命令行格式化 HTML 必须加 --parser html
printWidth: 100 是更务实的选择：够宽，能保住多数单行属性；又不至于宽到让超长标签挤成一行难以维护htmlWhitespaceSensitivity: "css" 必须设：否则 <p><img alt="HTML中使用Prettier统一HTML代码格式的配置方法" >text</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> 可能被折成多行，破坏行内元素渲染逻辑bracketSameLine: true：HTML 多属性时，> 跑到最后一行末尾，找结束标签像寻宝--parser html
漏掉这个参数，Prettier 可能误判为 JSX 或 Markdown，导致缩进错乱、自闭标签被改写（比如 <img alt="HTML中使用Prettier统一HTML代码格式的配置方法" > 变成 <img alt="HTML中使用Prettier统一HTML代码格式的配置方法" >）。
- 本地运行：
npx prettier --write --parser html src/index.html - 加到
package.jsonscript 中："format:html": "prettier --write \"src/**/*.html\" --parser html"（注意 glob 模式用引号包裹，防 shell 展开失败） - 验证是否支持 HTML：
npx prettier --parser html --write test.html，成功即表示解析器就绪
和 ESLint 共存时，eslint-plugin-prettier 和 eslint-config-prettier 必须成对使用
只装 eslint-plugin-prettier，ESLint 会报一堆重复警告（如 quotes、semi、indent），因为它只是把 Prettier 规则“翻译”成 ESLint 规则，但不关掉 ESLint 原有格式类规则。
- 安装两者：
npm install --save-dev eslint-plugin-prettier eslint-config-prettier - 在
.eslintrc.cjs的extends数组里，把"plugin:prettier/recommended"放在最后（尤其当同时用airbnb或typescript-eslint时） - 验证生效：
npx eslint --print-config src/index.html | grep -A5 prettier，看到"prettier/prettier": "error"且无quotes类规则残留才算成功
HTML 内联脚本（<script></script> 块）默认不被 ESLint 检查，得靠 eslint-plugin-html 提取出来再交给 ESLint；而 Vue 或小程序项目中，.vue、.wxml 文件需显式配置 parser 和 documentSelectors，否则 Prettier 根本拿不到内容——这些细节不踩一遍很难意识到缺在哪。
