前端基础架构建设：HTML代码质量Lint工具链配置指南-html教程-PHP中文网

eslint 默认不处理 html 文件，因其仅识别 .js/.ts 等 js 类型文件；必须借助 eslint-plugin-html 或 @html-eslint/eslint-plugin 提取内联脚本等 js 片段并交由 eslint 核心检查，否则直接 lint .html 会报错或静默跳过。

前端基础架构建设：html代码质量lint工具链配置指南

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></script>、<template></template>、v-if、{{ }} 等结构，推荐新项目使用
别漏掉 eslint-config-html 这类配套配置包，否则规则容易缺失或冲突

如何让 ESLint 正确识别并检查 HTML 中的 JS 逻辑？

关键在 overrides 配置：告诉 ESLint 对 .html 文件启用特定 parser 和插件，而不是走默认路径。

示例（.eslintrc.js）：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

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></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/**