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

作者：袖梨 2026-07-16

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 类规则残留才算成功