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

HTML文件不报错需先确认eslint-plugin-html是否生效，它使ESLint能解析HTML内联脚本；纯HTML结构问题（如标签嵌套、属性拼写）应由HTMLHint检查，需安装插件、配置.htmlhintrc并启用VS Code扩展。

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

很多用户以为装了ESLint就自动检查HTML，结果发现<script>里的JS错误根本没提示——问题出在ESLint默认只处理.js文件，对HTML是“视而不见”的。

必须显式启用eslint-plugin-html，它才是让ESLint能“读懂”HTML中内联脚本的关键解析器。

• 运行npm install eslint-plugin-html --save-dev安装插件
• 在.eslintrc.js中添加plugins: ["html"]和overrides规则：

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

注意：processor: "html/html"不是可选配置，漏掉这行，<script>console.log(undef);</script>这种明显错误就永远不会被标记。

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

ESLint + eslint-plugin-html专注JS逻辑，但<div><p></div>这种嵌套错误、clas="btn"这种拼写错误，它压根不查——这类纯HTML结构问题，htmlhint才是对口工具。

立即学习“前端免费学习笔记（深入）”；

它轻量、规则明确，且支持自定义规则集，比如强制<img>必须带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"跑完零输出，不是没毛病，而是它根本没解析出里面的CSS——stylelint v14+默认只认.css文件，对HTML是“文本盲区”。

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

• 安装：npm install postcss-html stylelint-config-html --save-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质量卡点，很容易把<meta charset="utd-8">这种低级错误带到生产环境。

推荐在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命令——这点容易误以为插件自带检查能力。