编辑器HTML代码质量Lint插件配置实践
来源：互联网 2026-07-21 08:19:19HTML的Lint检测常被忽略，需ESLint配合eslint-plugin-html处理，HTML结构由HTMLHint校验（配置.htmlhintrc），内联样式用Stylelint及postcss-html解析器，Webpack构建时独立调用htmlhint与eslint命令实现质量门。
在配置前端工程质量时，HTML文件的Lint检测往往容易被忽略，成为“中间地带”——JS和CSS分别有ESLint、Stylelint等成熟工具，而HTML既要管理脚本和样式，又要兼顾自身标签结构的合规性。许多开发者一开始以为装个ESLint就足够，结果发现HTML中写的内联JS报错完全不提示，这其实是一种典型的认知错位。
长期稳定更新的攒劲资源： >>>点此立即查看<<<
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”扩展，并在设置中指向该配置文件路径，否则编辑器里不会实时标红。很多新手就卡在这一步上。