编辑器HTML代码质量Lint插件配置实践

在配置前端工程质量时，HTML文件的Lint检测往往容易被忽略，成为“中间地带”——JS和CSS分别有ESLint、Stylelint等成熟工具，而HTML既要管理脚本和样式，又要兼顾自身标签结构的合规性。许多开发者一开始以为装个ESLint就足够，结果发现HTML中写的内联JS报错完全不提示，这其实是一种典型的认知错位。

VS Code里HTML文件不报错？先确认eslint-plugin-html是否生效

坦白说，ESLint默认只处理.js文件，对HTML文件完全是“视而不见”。即便你在标签里写了console.log(undef)，它也不会标红——因为ESLint根本没有解析到这个内联脚本。

要让ESLint“读懂”HTML中的JS，必须显式启用eslint-plugin-html这个插件。它才是让你在HTML里获得JS错误提示的关键解析器。具体操作分两步：

• 运行npm install eslint-plugin-html --sa ve-dev安装插件
• 在.eslintrc.js中添加plugins: ["html"]，并配置overrides规则：

overrides: [  {    files: ["*.html"],    processor: "html/html"  }]

注意，processor: "html/html"这行不是可选配置——漏掉它，这种明显错误就永远不会被标记。这个坑踩过的人不少，必须警惕。

HTML标签闭合、属性拼写等基础校验靠什么？HTMLHint更直接

ESLint+eslint-plugin-html只管JS逻辑，但

这种嵌套错误、clas="btn"这种属性拼写错误，它压根不查。这类纯HTML结构问题，htmlhint才是对口工具。

它轻量、规则明确，还支持自定义规则集——比如强制必须带alt属性就很实用。配置步骤也很简单：

• 全局安装：npm install -g htmlhint
• 在项目根目录创建.htmlhintrc，写入：

{  "attr-lowercase": true,  "attr-no-duplication": true,  "attr-req-alt": true,  "tag-pair": true}

不过有一点要注意：VS Code里必须额外安装“HTMLHint”扩展，并在设置中指向该配置文件路径，否则编辑器里不会实时标红。很多新手就卡在这一步上。

Stylelint能扫HTML里的

默认情况下，运行stylelint "**/*.html"往往输出为零——不是HTML里没有样式问题，而是Stylelint根本没有解析出里面的CSS。Stylelint v14+默认只认.css文件，对HTML来说就是一个“文本盲区”。

要让它识别块和style="color:red"，必须使用postcss-html作为解析器：

• 安装：npm install postcss-html stylelint-config-html --sa ve-dev
• 在stylelint.config.js中添加overrides段：

overrides: [  {    files: ["**/*.html"],    customSyntax: "postcss-html"  }]

又一个常见陷阱：漏掉customSyntax或只装stylelint-config-html没装postcss-html，HTML里的样式永远处于“静默状态”，就连color: #ff0000这种无效值都不会报。配置完成后一定要跑一个测试来确认。

Webpack构建时怎么把HTML lint塞进去？别只靠开发阶段

编辑器里看着没问题，不代表上线就安全。CI/CD流程中如果漏掉HTML质量卡点，很容易把这种低级错误带到生产环境。

推荐在package.json的scripts里添加一道硬检查：

• "lint:html": "htmlhint src/**/*.html && eslint src/**/*.html --ext .html"
• 再将lint:html加入"pretest"或"prebuild"钩子

这里要特别说明的是：Webpack本身不执行lint，html-webpack-plugin只负责生成HTML，不进行校验。想让它参与质量门禁，必须独立调用htmlhint和eslint命令——这点容易误以为插件自带检查能力，实际上需要靠脚本自己控制。