HTML项目利用Prettier与ESLint的双重质量保障配置

Prettier 默认不格式化 Vue/WXML 等文件因语言 ID 不匹配，需配置 documentSelectors；ESLint 检查内联 JS 需 eslint-plugin-html；eslint-config-prettier 与 eslint-plugin-prettier 必须共用且顺序正确；VS Code 中 prettier.enable 和 language mapping 缺一不可。

HTML项目里直接用 prettier 格式化 HTML 文件，看似简单，但实际常卡在“保存没反应”“内联 JS 不检查”“Vue/WXML 里格式化失效”这些点上——根本原因不是工具不行，而是默认配置不覆盖真实场景。

为什么 prettier 默认只格式化 .html 文件？

Prettier 的 parser 默认只绑定 html 语言 ID，而 VS Code 对 .vue、.wxml、.astro 等文件会识别为对应语言（如 vue），不是 html。结果就是：你按 Ctrl+S，Prettier 根本收不到格式化请求。

• 检查右下角状态栏语言模式，如果是 Vue 或 WXML，说明 Prettier 没拿到正确 language ID
• 必须显式配置 prettier.documentSelectors，例如：["*.vue", "*.wxml", "*.html"]
• 对 .vue 文件，还需启用 prettier.vueIndentScriptAndStyle: true，否则 <script> 和 <style> 块缩进不生效
• 旧版 Prettier（如 3.x）对小程序语法支持不稳定，建议降级到 2.8.8 并禁用 htmlWhitespaceSensitivity 类选项

eslint-plugin-html 是 HTML 内联脚本检查的唯一入口

ESLint 默认跳过 HTML 文件里的 <script> 块——它只当整个 HTML 是字符串，不解析 AST。所以你在 <script> 里写了 console.log 或未使用变量，no-console 和 no-unused-vars 规则完全不触发。

• 必须安装并启用 eslint-plugin-html，它会把 HTML 拆解，把 <script> 提取为 JS 文本交给 ESLint 处理
• 在 .eslintrc.cjs 的 plugins 数组中加入 "html"
• 确保 overrides 配置匹配 HTML 文件路径，例如：{ files: ["**/*.html"], processor: "html/html" }
• 若项目含 .vue，优先用 @vue/eslint-config-prettier 替代通用插件，它已内置 HTML 脚本提取逻辑

eslint-config-prettier 和 eslint-plugin-prettier 必须成对出现

只装 eslint-plugin-prettier，ESLint 会一边执行自己的 indent、quotes 规则，一边让 Prettier “再格式一遍”，最终报一堆冲突警告，比如 Expected indentation of 2 characters 和 Strings must use singlequote 同时亮红。

立即学习“前端免费学习笔记（深入）”；

• eslint-plugin-prettier 把 Prettier 规则转成 ESLint 可执行规则（如 prettier/prettier）
• eslint-config-prettier 的唯一作用是关掉 ESLint 原生所有格式类规则（indent、semi、quotes 等）
• extends 数组中，"plugin:prettier/recommended" 必须放在最后，否则会被前面的配置（如 airbnb）覆盖
• 验证是否生效：运行 npx eslint --print-config index.html | grep -A5 prettier，看到 "prettier/prettier": "error" 且无 quotes 类规则残留才算成功

VS Code 中 prettier.enable 和语言标识缺一不可

即使配置全了，VS Code 插件没开或语言 ID 绑错，照样不工作。这不是项目配置问题，是编辑器层漏掉了关键开关。

• 必须在用户或工作区设置中开启 prettier.enable: true（默认是 false）
• 确认 files.associations 正确映射扩展名，例如："*.wxml": "wxml"，否则插件连语言都识别不了
• 若用 .prettierrc.cjs，确保导出的是对象，不是函数；Prettier 2.8+ 不支持动态配置函数
• 禁用其他格式化插件（如 Beautify），避免和 Prettier 抢 formatOnSave 控制权

真正麻烦的从来不是配多少行代码，而是 HTML 里混着 JS、CSS、模板语法时，每个环节都要单独打通语言识别、AST 解析、规则注入三层链路。少一个 documentSelectors，少一个 processor，就卡死在“看起来配好了，其实没生效”的状态里。