eslint + prettier 在 html 项目中易失效，因默认仅处理 js/jsx 文件；需安装 eslint-plugin-html 解析内联脚本，prettier 显式配置 htmlwhitespacesensitivity:"css"，vs code 需绑定 .html 默认格式化器，并通过 overrides 指定 html 文件使用 @typescript-eslint/parser 解析模板表达式。
为什么 ESLint + Prettier 组合在 HTML 项目里容易失效
因为默认配置只管 .js 和 .jsx，.html 文件根本不会被 lint 或格式化。很多团队配完 ESLint 就以为万事大吉，结果模板里的 class 拼错、属性顺序混乱、自闭合标签漏斜杠，全靠人眼扫。
真正起效的前提是：让 ESLint 能解析 HTML 中的内联脚本和模板表达式，同时让 Prettier 能处理 HTML 结构本身。这需要额外插件和显式声明文件类型。
- 必须安装
eslint-plugin-html（不是eslint-plugin-vue或eslint-plugin-react，除非你只用 Vue/React） - Prettier 需要明确在
.prettierrc中启用"htmlWhitespaceSensitivity": "css"，否则缩进和换行会破坏内联样式渲染 - VS Code 的
emeraldwalk.runonsave类插件若未配置"*.html"触发命令，保存时不会自动格式化
如何让 ESLint 检查 HTML 里的 JS 片段不报错
典型场景：Vue 单文件组件的 <template></template> 里写 v-if="user.name && user.age > 18"，ESLint 默认把它当纯 HTML 处理，根本不会校验 JS 表达式语法或潜在错误（比如 user.namme 拼错）。
解决路径很直接：用 eslint-plugin-html 把 HTML 内容喂给 ESLint 解析器，但要注意它默认用 espree，对模板语法支持弱。实际应切换为 @typescript-eslint/parser（即使没 TS，也能更好处理带逻辑的表达式）。
- 在
.eslintrc.js中添加：overrides: [{ files: ["*.html"], processor: "html/html", parser: "@typescript-eslint/parser" }] - 确保
eslint-plugin-html已加入plugins数组，且版本 ≥ 7.1.0（旧版不兼容 ESLint v8+） - 如果用 Webpack，需确认
eslint-loader已弃用，改用eslint-webpack-plugin并设置extensions: ["js", "html"]
HTML 标签自动修复的边界在哪
Prettier 能修 <img src="a.jpg"> → <img src="a.jpg">，但不会帮你把 <div class="foo"></div> 改成语义化标签（比如 <section></section>）。工具只做结构合规，不做语义升级。
更关键的是：Prettier 对自定义元素（如 <my-button></my-button>）和 Web Component 的 shadow DOM 内部 HTML 不做任何处理——它依赖标准 HTML 解析器，而这些内容被当作“未知标签”跳过。
- 想强制闭合所有 void 元素？加配置
"htmlOptions": { "voidTags": "html" }到.prettierrc - 需要检查 ARIA 属性是否合法？ESLint 配
eslint-plugin-jsx-a11y仅对 JSX 生效，HTML 文件得靠axe-core做运行时检测，无法静态修复 - Webpack 的
html-webpack-plugin注入的变量（如）会被 Prettier 当作非法语法报错，需用<!-- prettier-ignore -->注释绕过
CI 流程里 HTML 质量卡点怎么设才不拖慢构建
本地开发时跑一次 ESLint + Prettier 感觉不到延迟，但 CI 上并发检查几百个 HTML 文件，尤其搭配 eslint-plugin-html 这种需逐文件解析 DOM 结构的插件，很容易让 lint 步骤从 20 秒涨到 3 分钟。
提速的关键不是关掉检查，而是缩小范围：只检改动文件，且跳过构建产物目录（如 dist/、public/）和第三方库（node_modules/、bower_components/）。
- Git hook 阶段用
lint-staged，配置{"*.html": ["eslint --ext .html", "prettier --write"]} - CI 脚本中改用
git diff --name-only $BASE_COMMIT HEAD | grep '\.html$' | xargs eslint，避免全量扫描 - 如果项目用 Lerna 或 pnpm workspace，确保
.eslintignore包含**/node_modules/**和**/dist/**，否则子包依赖的 HTML 模板也会被误扫
最常被忽略的一点：Prettier 的 --write 在 CI 里不该直接执行，而是用 --check 验证格式合规性；修复动作留给开发者本地完成。否则 CI 自动改文件再 commit，会污染 git history 且难以追溯真实修改意图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
