prettier 默认仅格式化 .html 文件，对 .vue、.wxml 等需显式配置语言支持和插件；需确保 vs code 语言标识正确、启用 prettier.enable、配置 documentselectors，并配合 eslint-plugin-prettier 与 eslint-config-prettier 消除规则冲突，html 内联脚本检查需 eslint-plugin-html，小程序/vue 项目建议降级 prettier 至 2.8.8 并禁用不稳定选项。
为什么 prettier 不能直接格式化 HTML 文件？
不是所有 HTML 文件都会被 prettier 自动识别并格式化——它默认只处理 .html 文件，但对 .vue、.wxss、.wxml、.astro 等含嵌入式 HTML 的文件需显式声明语言支持。如果你在 VS Code 中保存一个 .vue 文件却没触发格式化，大概率是 prettier 没拿到正确的语言标识（language ID），或者插件未启用对应语言支持。
解决方法很简单：
- 确保已安装
prettierVS Code 插件，并在设置中开启"prettier.enable": true - 在项目根目录的
.prettierrc或.prettierrc.cjs中明确启用 HTML 支持（它默认开启，但某些旧版本或自定义 parser 下可能失效） - 检查 VS Code 右下角状态栏的语言模式：如果是
Vue，需确认插件配置了"prettier.documentSelectors": ["*.vue"]或通过settings.json显式绑定："prettier.vueIndentScriptAndStyle": true
eslint-plugin-prettier 和 eslint-config-prettier 必须成对使用
很多人只装 eslint-plugin-prettier，结果 ESLint 报一堆重复警告，比如 quotes、semi、indent 冲突。这是因为 eslint-plugin-prettier 是把 Prettier 规则“翻译”成 ESLint 规则来执行，但它不关掉 ESLint 原有的格式类规则；而 eslint-config-prettier 的唯一作用就是关闭这些冲突规则。
正确做法是：
- 安装两者：
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 特有规则需额外配置 eslint-plugin-html
ESLint 默认不解析 HTML 文件里的内联脚本或样式，所以你在 <script></script> 标签里写的 JS 不会被 no-console 或 no-unused-vars 检查到——除非你加一层中间解析器。
eslint-plugin-html 就是干这个的：它把 HTML 文件拆解，把 <script></script> 和 <style></style> 块提取出来交给 ESLint 原生处理。
配置要点：
- 安装：
npm install --save-dev eslint-plugin-html - 在
.eslintrc.cjs的plugins中加入"html" - 在
overrides中为**/*.html单独指定parser: "@typescript-eslint/parser"（若用 TS）或"@babel/eslint-parser"（若用 JSX/Babel） - 注意：不要在
overrides里重复写env或extends，否则会覆盖全局配置
微信小程序或 Vue 项目中 HTML 格式化容易失效
微信开发者工具和老版 VS Code 内核对 prettier 的语言服务支持较弱，常见表现是：保存 .wxml 或 .vue 无反应、缩进错乱、JSX 属性换行异常。
根本原因不是配置错，而是运行时环境限制。实测有效的缓解方案：
- 降级
prettier到2.8.8，eslint到7.32.0（微信开发者工具当前内核兼容性最佳组合） - 在
.prettierrc.cjs中显式禁用可能出问题的选项：bracketSameLine: false、jsxBracketSameLine: false、proseWrap: "preserve" - 避免在
.wxml中混用双大括号表达式与三元运算符嵌套，Prettier 对其 AST 解析不稳定，易卡死或格式错位 - VS Code 中手动触发格式化时，先按
Ctrl+Shift+P→ 输入Change Language Mode→ 选WXML或Vue，再保存
最常被忽略的一点：Prettier 的 HTML 格式化能力高度依赖 parser 实现，而 @prettier/plugin-html（v3+）默认不随 prettier 主包安装，如需精细控制 HTML 标签行为（比如强制闭合 <img>），得单独安装并注册插件——但这在多数业务项目里反而增加维护负担，建议优先用稳定 baseline 配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
