ESLint 默认不处理 HTML 文件，因其仅识别 .js/.ts 等 JS 类型文件；必须借助 eslint-plugin-html 或 @html-eslint/eslint-plugin 提取内联脚本等 JS 片段并交由 ESLint 核心检查，否则直接 lint .html 会报错或静默跳过。
HTML 文件为什么不能只靠 ESLint 默认规则？
ESLint 默认不处理 .html 文件——它只认 .js、.ts 等 JS 类型文件。直接运行 eslint . --ext .html 会报错或静默跳过，因为 ESLint 没加载 HTML 解析器。
真正起作用的是 eslint-plugin-html 或更现代的 @html-eslint/eslint-plugin（原 html-eslint），它们把 HTML 中的内联脚本、模板表达式、属性绑定等提取出来，再交给 ESLint 核心检查。
-
eslint-plugin-html：轻量、兼容老项目，但对 Vue/JSX 模板支持弱，且已基本停止维护 -
@html-eslint/eslint-plugin：专为 HTML 设计，支持自定义 parser，能识别<script>、<template>、v-if、{{ }}等结构，推荐新项目使用 - 别漏掉
eslint-config-html这类配套配置包，否则规则容易缺失或冲突
如何让 ESLint 正确识别并检查 HTML 中的 JS 逻辑？
关键在 overrides 配置：告诉 ESLint 对 .html 文件启用特定 parser 和插件，而不是走默认路径。
示例（.eslintrc.js）：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
overrides: [
{
files: ["*.html"],
processor: "@html-eslint/eslint-plugin/.html",
parser: "@html-eslint/parser",
plugins: ["@html-eslint"],
rules: {
"@html-eslint/no-unused-vars": "error",
"@html-eslint/require-aria-label": "warn",
},
},
],
};
-
processor负责从 HTML 中提取可检查的 JS 片段（如<script>块、onclick属性） -
parser必须匹配插件版本，@html-eslint/parser不兼容espree或@typescript-eslint/parser - 如果用了 Vue/Svelte，需额外配
vue-eslint-parser或svelte-eslint-parser，不能混用
prettier + html-eslint 如何避免格式化与 lint 规则打架？
常见冲突：Prettier 自动删空行或调整缩进，而 @html-eslint/require-aria-label 又要求属性换行对齐——结果是 Prettier 一跑，linter 就报错。
解法不是关掉某一方，而是分层控制：
- 用
prettier处理纯格式（引号、空格、换行），配置.prettierrc显式关闭影响语义的选项："htmlWhitespaceSensitivity": "strict" - 用
@html-eslint守住语义规则（可访问性、属性顺序、模板安全），不碰缩进和空格 - 在
lint-staged中错开执行顺序："*.html": ["eslint --fix", "prettier --write"]，确保 lint 修复优先，再由 Prettier 统一收尾 - 若仍冲突，可在
.prettierignore中排除index.html等手工维护的入口文件，只对组件级 HTML 启用自动 fix
CI 流程里 HTML Lint 容易被忽略的三个点
本地能跑通，CI 却失败，往往卡在这几个细节：
- CI 环境没装
@html-eslint/parser的 peer dependency（比如estree-walker），报Cannot find module 'estree-walker'—— 必须显式npm install --save-dev estree-walker - Git 仓库中 HTML 文件编码不是 UTF-8（尤其含中文注释时），
@html-eslint/parser会解析失败，加"encoding": "utf8"到 ESLint 配置顶层 - Webpack 构建产物里的
dist/index.html被 lint 工具误扫，必须在.eslintignore中写死：dist/**、public/generated/**
HTML Lint 的真实价值不在“有没有报错”，而在能否稳定介入提交和构建两个节点——一旦某个环节漏配，就等于关掉了这道门。
