eslint-plugin-html不可跳过,因其作为预处理器提取HTML中<script>块转为JS交由ESLint处理,否则ESLint会因Unexpected token <报错且无法校验内嵌脚本。

ESLint 本身不支持 HTML 检查,必须靠 eslint-plugin-html 提取 <script> 块再交由 ESLint 处理——没它,所有配置都无效。
为什么 eslint-plugin-html 不可跳过
HTML 文件不是 JS,ESLint parser 直接读会报 Unexpected token <。该插件本质是“预处理器”:扫描 HTML 内容,把 <script>(含 type="module"、type="text/javascript")、<script setup>(Vue)等块切出来,转成纯 JS 字符串,再扔给 ESLint 原有流程跑规则。
- 它不校验 HTML 标签结构,只管 JS 片段
- 不提供任何规则(
extends里加它没用),只提供processor: "html/html" - Vue 项目中若已用
eslint-plugin-vue,它可能接管<script>块——此时得看overrides优先级,eslint-plugin-html可能被绕过
npm install 和版本匹配要点
装错版本或漏 peer dep,VS Code 里就完全没提示,且 npx eslint index.html 会静默失败。
- ESLint v8.x → 安装
eslint-plugin-html@6.x - ESLint v9.x(当前主流)→ 必须用
eslint-plugin-html@7.x(2026 年已稳定发布) - 运行
npm list eslint eslint-plugin-html确认无冲突;若有 warning,手动npm install eslint-plugin-html@latest --save-dev覆盖 - Vue 项目建议额外加
eslint-plugin-vue,但二者不要在同一个overrides里混用 processor
VS Code 必须显式启用 .html 校验
只装插件、配 plugins: ["html"],编辑器里照样没反应——这步漏掉,等于白配。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记(深入)”;
- ESLint v8.40 之前:
"eslint.validate": ["javascript", "javascriptreact", "html"] - ESLint v8.40+(含 v9):
"eslint.options": { "extensions": [".js", ".jsx", ".html"] } - 值必须是
"html",不是"htm"或带通配符 - 改完设置后,必须
Ctrl+Shift+P → Developer: Reload Window,否则不生效
.eslintrc.js 中 processor 配置细节
plugins: ["html"] 只是声明依赖,真正起作用的是 processor 字段。不写它,ESLint 就当 HTML 是纯文本跳过。
- 全局启用(简单项目):
processor: "html/html"放在根对象里 - 精准控制(推荐):
overrides中指定文件范围,例如:{ files: ["src/**/*.html"], processor: "html/html" } - 别在
overrides里重复写env或globals,HTML 内脚本默认继承顶层配置;但若用document,确保顶层有env: { browser: true } - 如果项目同时用
html-webpack-plugin生成 HTML,检查对象应是源 HTML(如src/index.html),不是打包后的dist/index.html
最常被忽略的其实是 processor 字段本身——很多人以为只要装了插件、加了 plugins 数组就万事大吉,结果调试半天发现 ESLint 根本没进 HTML 文件。它不像规则那样“声明即生效”,而是必须显式挂载到处理链上。


















