根本原因是VS Code默认不将.html文件交给Prettier处理，必须手动配置：右键选“Configure Default Formatter”并指定esbenp.prettier-vscode；禁用html.format.enable；确保语言模式为HTML；printWidth设为100更合理；htmlWhitespaceSensitivity必须设为"css"；Vue等文件需通过prettier.documentSelectors或parser: "html"显式支持。
VS Code 里 HTML 文件不格式化，根本原因是没授权
不是插件没装、配置没写，而是 VS Code 默认不把 .html 文件交给 Prettier 处理——它优先用内置格式器（由 html.format.enable 控制），Prettier 被静默跳过。
必须手动完成三件事：
- 打开任意
.html文件，右键 → Format Document With… → Configure Default Formatter… → 选中esbenp.prettier-vscode（名字必须完全一致） - 检查项目根目录
.vscode/settings.json或用户设置，删掉或注释掉"html.format.enable": true - 确认右下角语言模式是
HTML（不是Plain Text、PHP或其他），点一下可切换
printWidth 设成 80 会让 class 属性疯狂换行
printWidth 对 HTML 的影响比 JS 更敏感：一个 div 带七八个 class 或 data 属性，80 宽度极易拆成三到四行，反而降低可读性。
更务实的做法是：
立即学习“前端免费学习笔记（深入）”；
- 设为
100：能保住绝大多数单行属性，又不至于宽到让超长标签挤成一行难以维护 - 别设
60或更低：纯属自找麻烦，尤其在邮件模板、管理后台等属性密集场景 - 注意：这和 JS/TS 场景不同，HTML 没有逻辑换行需求，宽度只服务于视觉扫描效率
htmlWhitespaceSensitivity 必须设为 "css"
这个选项控制标签间空白是否保留。设错会导致布局错乱或空格被吃掉，比如 <p>Hello<img>World</p> 中的文本间距异常。
"css" 是唯一推荐值：
- 它按 CSS 渲染规则判断空白是否有意义（如 inline 元素间的空格会被浏览器渲染）
-
"strict"会删除所有空白，破坏排版；"ignore"则放任缩进污染结构 - 即使你不用 CSS，也选
"css"——这是 Prettier 对 HTML 的默认行为，兼容性最稳
Vue/小程序里 HTML 不生效？语言 ID 没对上
Prettier 默认只处理 .html 文件，.vue、.wxml 等文件需要显式告诉它“这是 HTML 内容”。
关键动作：
- 确保 VS Code 右下角语言模式是
Vue或WXML，而不是HTML - 在项目
.vscode/settings.json中加："prettier.documentSelectors": ["*.vue", "*.wxml"] - 如果用
prettier.config.js，需明确启用 HTML 解析器：parser: "html"（尤其 v3+ 版本） - 验证方式：运行
npx prettier --parser html --write src/index.vue，成功即支持
复杂点在于嵌套结构——比如 Vue 的 <template> 里混着 JS 表达式，Prettier 不管那部分，得靠 eslint-plugin-html 配合 ESLint 才能覆盖全链路。这点容易被忽略，但一旦漏掉，内联脚本就永远游离在格式化之外。
