eslint 默认不检查 html 中 块,需安装 eslint-plugin-html@7.x 并配置 processor: "html/html" 和 vs code 的 eslint.options.extensions 包含 .html,重启窗口后生效。

HTML 文件里 <script></script> 块不被 ESLint 检查?加 eslint-plugin-html 才行
ESLint 默认跳过 HTML 文件,哪怕里面写了 <script></script> 标签。它只认 .js 后缀,不会主动解析 HTML 中的 JS 片段。
必须装 eslint-plugin-html@7.x(适配 ESLint v8.57+ 或 v9.x),并在 .eslintrc.js 里显式启用处理器:
-
plugins: ["html"]只是声明依赖,不起作用 - 真正关键的是加
processor: "html/html"字段(放在根对象或overrides里) - 若项目同时用
eslint-plugin-vue,它会默认接管<script></script>块——此时eslint-plugin-html可能被忽略,得靠overrides的匹配顺序控制优先级
VS Code 里 HTML 文件没提示?检查 eslint.options 而不是 eslint.validate
ESLint v8.40+ 已废弃 eslint.validate 设置项,继续写它等于白配。
正确做法是改用 eslint.options,并确保 .html 在 extensions 列表中:
- Cmd+, → 搜索
eslint.options→ 编辑 JSON,加入"extensions": [".js", ".jsx", ".html"] - 改完必须重载窗口(Ctrl+Shift+P →
Developer: Reload Window),否则设置不生效 - 如果只希望检查部分 HTML(如
src/index.html),用overrides更精准,避免误检第三方模板文件
纯 HTML 结构问题?htmllint 比 ESLint 更直接
ESLint + eslint-plugin-html 只管 JS 逻辑,不管 <div> 是否闭合、属性是否小写、语义标签是否乱用。这类问题得靠专治 HTML 的工具。
<p><code>htmllint 是命令行原生工具,靠 .htmlhintrc 配置规则,比如:
-
"attr-lowercase": true强制属性名小写 -
"attr-no-duplication": true禁止重复属性 -
"id-unique": true确保id不重复 - 配合 CI 流程时,加
--format=checkstyle输出标准 XML,方便集成报告系统
CI/CD 中统一检查多语言?super-linter 省掉一堆单独配置
一个项目既有 HTML、又有 JS、TS、JSON、YAML,为每种类型单独写 lint 脚本太累。这时候 super-linter 就是现成解法。
它本质是个 Docker 镜像,内置几十种 Linter,开箱即用:
- GitHub Actions 中只需一个
steps:用actions/checkout@v5+ghcr.io/super-linter/super-linter:v8.2.0 - 通过环境变量
LINTER_RULES_PATH指向自定义规则目录,比如把团队的.htmlhintrc和.eslintrc.js一起挂进去 - 注意:它默认只检查变更文件,若需全量扫描,加
VALIDATE_ALL_CODEBASE: true
真正容易被忽略的点是:super-linter 不校验规则兼容性。比如你给 HTML 配了 htmllint 规则,但镜像里装的是旧版 htmllint,某些新规则会静默失效——得定期核对镜像文档里的工具版本。











