eslint默认不检查html中标签内容，必须安装eslint-plugin-html插件并配置plugins: ["html"]和files: ["*/.html"]，该插件负责提取脚本块交由eslint处理，缺一则无法生效。
ESLint 默认不检查 HTML 文件里的 <script></script> 标签内容，想让它生效，核心就一条：**必须用 eslint-plugin-html 提取脚本，再交由 ESLint 原有规则处理**。光改 eslint.validate 或加 files 配置，不装插件、不配 processor，纯属白忙。
为什么 eslint-plugin-html 不可替代
HTML 文件本质不是 JS，ESLint 无法直接解析。该插件的作用是：在 ESLint 运行前，把 <script></script>（含内联和 type="module"）、<script setup></script>（Vue）等块提取成纯 JS 字符串，再喂给 ESLint 的 parser。没有它，所有配置都是空中楼阁。
常见错误现象：
- VS Code 里 HTML 文件没报错，但 .js 文件里一模一样的代码却报了
no-console - 执行
npx eslint index.html报错Cannot read file .../index.html: Unexpected token - 配置了
"eslint.validate": ["html"]，但保存后毫无反应
这些全是插件缺失或未被识别的典型表现。
eslint-plugin-html 安装与基础配置
安装必须是开发依赖，且版本需匹配当前 ESLint：
- ESLint v8 及以下：
npm install eslint-plugin-html --save-dev - ESLint v9+（推荐）：
npm install eslint-plugin-html@latest --save-dev（v9 要求插件 v7+）
配置分两步，缺一不可：
- 在
.eslintrc.js或.eslintrc.cjs中声明插件：plugins: ["html"] - 明确指定哪些文件交给它处理（ESLint v9 推荐写法）：
files: ["**/*.html"]（放在配置数组的某一项里）
示例（ESLint v9）：
module.exports = [
{
files: ["**/*.html"],
plugins: ["html"],
rules: {
"no-console": "warn",
"no-alert": "error"
}
}
];
注意：不要写 parser: "eslint-plugin-html" —— 这是过时写法，eslint-plugin-html 是 processor，不是 parser。
VS Code 里 HTML 实时检查失效的排查点
即使插件装了、配置写了，VS Code 仍可能不提示，关键看这三点：
-
settings.json中是否漏了"eslint.validate"？必须显式包含"html"："eslint.validate": ["javascript", "javascriptreact", "html", "vue"] - VS Code 是否重启过？插件配置变更后，必须完全关闭并重开编辑器，否则缓存不刷新
- 项目根目录是否有
node_modules/eslint-plugin-html？用ls node_modules | grep html确认，别只看package.json里写了没
如果用了 Prettier，还要注意：Prettier 默认不格式化 HTML 中的 JS，需额外配 prettier-plugin-html，否则 eslint --fix 和保存自动修复可能冲突。
Vue 和其他模板文件的兼容处理
eslint-plugin-html 原生支持 Vue 单文件组件（.vue），但前提是你的 files 配置覆盖到它：
- ESLint v9：
files: ["**/*.html", "**/*.vue"] - ESLint v8：
"eslint.validate": ["html", "vue"]+plugins: ["html", "vue"]
Vue 3 的 <script setup></script> 语法需要额外确保 parserOptions.parser 指向支持它的解析器，例如：parserOptions: { parser: "@babel/eslint-parser" } 或 @typescript-eslint/parser（如用 TS）。
容易被忽略的是：如果你在 .vue 文件里混用 <script></script> 和 <script setup></script>，插件默认只处理前者；后者需靠 Vue 官方插件（eslint-plugin-vue）配合，不能只靠 html 插件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
