VS Code 默认禁用 Prettier 处理 HTML，需手动设为默认格式化工具并启用 Format on Save；关键配置为 printWidth: 100 和 htmlWhitespaceSensitivity: "css"；Pretterr 不处理样式语义，仅格式化结构。
VS Code 里 Prettier 不格式化 HTML 文件？
不是插件没装，也不是配置写错了，而是 VS Code 默认禁用了 Prettier 对 html 文件类型的接管。即使你装了官方插件、写了 .prettierrc，右键“Format Document”也大概率不会弹出 Prettier 选项。
必须手动指定默认格式化工具：
- 打开任意一个
.html文件 - 右键 → Format Document With… → Configure Default Formatter…
- 从列表中选择
Prettier - Code formatter - 同时勾选设置里的
Format on Save（路径：Settings → Text Editor → Formatting → Format On Save）
注意：如果项目里有 settings.json，确认里面没有写死 "html.format.enable": true —— 这是 VS Code 内置 HTML 格式化器的开关，和 Prettier 冲突。
HTML 格式化后属性乱换行？调 printWidth 和 htmlWhitespaceSensitivity
常见现象：<div class="a b c d e f" data-id="123" title="long text"> 被强行折成 3 行，破坏可读性。这不是 bug，是 Prettier 按 printWidth（默认 80）主动拆分的结果。
立即学习“前端免费学习笔记（深入）”；
关键配置项：
-
printWidth: 100—— 建议设为100，HTML 属性普遍比 JS 多，80容易误拆；避免设60，那基本等于放弃单行属性 -
htmlWhitespaceSensitivity: "css"—— 必须设这个值，否则 Prettier 可能把<p><img>text</p>错误地拆成多行，破坏行内元素布局逻辑 - 不要设
bracketSameLine: true（即把>放在最后一行末尾），HTML 标签多属性时它会让结尾变得极难定位
示例正确配置片段（.prettierrc）：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
{
"printWidth": 100,
"htmlWhitespaceSensitivity": "css",
"tabWidth": 2,
"useTabs": false
}为什么 <img> 的 align 或 style="float:right" 没被处理？
Prettier 根本不碰这些内容。它只格式化标签结构、属性顺序、引号、缩进和换行，**不解析也不修改任何样式语义**。
也就是说：
-
<img align="right">会被保留原样，不会转成 CSS -
<img style="margin-left:auto">不会自动加 class 或提取到外部 CSS - 图片是否居中、环绕、响应式，完全取决于你写的 CSS，和 Prettier 无关
如果你发现图片对齐“失效”，问题一定出在 CSS 层（比如忘记给父容器设 text-align: center，或没加 display: block 让 margin: 0 auto 生效），而不是 HTML 格式化没做好。
命令行批量格式化 HTML 文件失败？检查三件事
运行 npx prettier --write "**/*.html" 报错或无反应，通常卡在这三个点：
-
prettier版本低于v2.0—— 运行npx prettier --version确认，旧版根本不支持 HTML 解析 - 没装完整版 Prettier —— 全局安装时用
npm install -g prettier，别用某些精简构建（如只含 JS 的 CDN 版） - 没显式指定 parser —— 在项目根目录执行时，加
--parser html更稳妥：npx prettier --parser html --write src/**/*.html
验证是否生效最简单的方法：新建一个只有两行的 test.html，运行一次格式化命令，看它是否把 <div><p>hi</p></div> 自动展开缩进并换行。
HTML 格式化的真正难点不在配置，而在于接受一个事实：Prettier 只负责让代码“看起来整齐”，不负责让页面“看起来正确”。图片对齐、响应式断点、语义层级，这些都得靠 CSS 和语义化 HTML 本身来保证——格式化工具只是帮你少犯低级缩进错误。
