HTMLHint是一个轻量级HTML静态检查CLI工具，可检测img缺alt、a缺href、标签不配对、属性未引号、ID重复等问题，支持VS Code集成与自定义规则配置。
HTMLHint 是什么，它能检查哪些问题
HTMLHint 是一个轻量级的 HTML 静态检查工具，不是浏览器内置功能，也不是构建工具插件——它本身是一个独立的 Node.js CLI 工具，也可以集成进 VS Code、Webpack、Gulp 等环境。它能识别常见 HTML 问题，比如：img 缺少 alt、a 标签缺少 href、自闭合标签写法不一致（<br> vs <br/>）、属性值未加引号、重复 ID、不推荐的内联样式等。
它不处理 CSS 或 JS 逻辑，也不校验语义是否“足够好”，只按预设规则做结构与规范层面的扫描。
用 npm 安装并运行 HTMLHint CLI
确保已安装 Node.js（v14+），然后在项目根目录执行：
npm install -D htmlhint
安装后，可通过 npx 直接调用：
立即学习“前端免费学习笔记（深入）”；
npx htmlhint index.html
若要检查整个 src 目录下的所有 HTML 文件：
npx htmlhint "src/**/*.html"
- 路径必须用双引号包裹（尤其含
**时，避免 shell 展开失败） - 默认使用内置规则集，报错即终止；加
--quiet可只显示错误，不输出警告 - 不支持 glob 模式嵌套过深（如
src/**/pages/*.html在某些 shell 下可能失效，建议改用src/pages/**/*.html）
配置 .htmlhintrc 文件定制规则
在项目根目录新建 .htmlhintrc（JSON 格式），可关闭误报规则或加强检查。例如：
{
"tagname-lowercase": true,
"attr-lowercase": true,
"attr-value-double-quotes": true,
"doctype-first": true,
"tag-pair": true,
"spec-char-escape": true,
"id-unique": true,
"src-not-empty": true,
"attr-no-duplication": true,
"head-script-disabled": true
}
常用易踩坑点：
-
"attr-value-double-quotes"会报单引号错误，但若项目混用 Vue / JSX 模板，部分属性值本身是 JS 表达式（如v-bind:class="{'active': isActive}"），此时应设为false或改用"attr-value-quote-style": "double"（需 v1.0+） -
"head-script-disabled"禁止<script>出现在<head>，但现代defer脚本是安全的，可保留该规则但排除带defer或module的<script> - 规则名大小写敏感，写成
"Tagname-Lowercase"会静默失效
VS Code 中实时提示 HTMLHint 错误
安装 VS Code 插件 HTMLHint（作者：mkaufman），启用后自动读取项目根目录的 .htmlhintrc。
注意几个关键行为：
- 插件不会自动安装
htmlhintCLI，必须手动npm install htmlhint --save-dev，否则提示 “command not found” - 如果打开的是单个 HTML 文件（非工作区），插件可能 fallback 到默认规则，不读
.htmlhintrc - 修改
.htmlhintrc后需重启 VS Code 窗口，热重载不生效 - 插件对
.vue或.svelte文件中的 HTML 片段默认不检查，需额外配置"html.validate.scripts": true并配合语言服务插件
真正起作用的永远是本地 node_modules/.bin/htmlhint 的版本和配置，编辑器插件只是壳。调试时优先在终端跑一遍 npx htmlhint，确认规则是否真被加载。
