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

HTML的Lint检测常被忽略，需ESLint配合eslint-plugin-html处理，HTML结构由HTMLHint校验（配置 htmlhintrc），内联样式用Stylelint及postcss-html解析器，Webpack构建时独立调用htmlhint与eslint命令实现质量门。

在搭建前端工程化体系时，HTML文件的Lint检测往往容易被忽视，成为质量管控中的“盲区”——因为JS和CSS各自拥有ESLint、Stylelint这类成熟工具，唯独HTML既要承载脚本与样式，还得兼顾自身标签结构的合规性。不少开发者起初以为装个ESLint就能一劳永逸，结果发现HTML里编写的内联JS报错根本不提示，这其实是一个典型的认知误区。

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

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

坦白说，ESLint默认只处理.js文件，对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”扩展，并在设置中指向该配置文件路径，否则编辑器里不会实时标红。很多新手就卡在这一步上。