htmlhint 是一个可集成到编辑器或命令行的静态 HTML 检查工具，主要检测标签闭合、属性拼写、引号缺失、嵌套错误、DOCTYPE 缺失等低级语法问题，但不校验语义、可访问性，也不模拟 DOM 修复。
htmlhint 是什么，它能查哪些问题
htmlhint 不是浏览器内置工具，也不是 W3C 验证器的替代品，而是一个可集成进编辑器或命令行的静态检查器。它主要检查标签闭合、属性拼写、引号缺失、嵌套错误、DOCTYPE 缺失等——但不校验语义或可访问性，也不做 DOM 修复模拟。
它默认不启用所有规则，比如 attr-lowercase（属性名小写）、attr-validate（属性值是否合法）、tag-pair（标签是否成对）这些关键项都得手动打开，否则等于没开检查。
VS Code 中启用 htmlhint 并配置 tag-pair 和 attr-lowercase
装完 HTMLHint 插件后，仅靠默认设置几乎不报错。必须在工作区根目录加 .htmlhintrc 文件，并显式开启核心规则：
{
"tag-pair": true,
"attr-lowercase": true,
"attr-validate": true,
"attr-no-duplication": true,
"id-unique": true,
"src-not-empty": true
}
几个关键点：
立即学习“前端免费学习笔记（深入）”；
-
tag-pair能捕获<div><p>没闭合</p>或</div>的情况，但对自闭合标签如<img>不强制要求斜杠（HTML5 允许） -
attr-lowercase会标红CLASS="foo"或HREF="#"—— 浏览器虽兼容，但 W3C 标准和 Lighthouse 审计都要求小写 - 别依赖插件自带的“自动修复”：它只改小写、补引号，不会帮你补漏掉的
</section>
命令行批量检查整个项目里的 HTML 文件
用 npx htmlhint 可以扫本地所有 *.html，比手动点开每个文件快得多：
npx htmlhint src/**/*.html --config .htmlhintrc
常见陷阱：
- 如果项目里混用了 EJS 或 Django 模板语法（比如
<% if (x) { %><div><% } %>），htmlhint 会把模板符号当非法标签报错；此时要加"ignore": ["**/*.ejs", "**/*.html.django"]到配置中 - 它不识别
<template>内部内容，也不会跳过v-html或dangerouslySetInnerHTML传入的字符串，那些得靠其他工具（如 ESLint + vue/React 插件）覆盖 - 报错行号是源码行号，不是浏览器 Elements 面板渲染后的 DOM 行号——所以看到
Line 42, E017: Tag must be paired，就直接去文件第 42 行前后找未闭合的开始标签
htmlhint 和 W3C Validator 的分工边界在哪
htmlhint 快、可集成、适合开发时拦截明显低级错误；但它不解析文档结构，也不模拟浏览器纠错逻辑。比如你写了：
<div><p>hello<div>world</p></div>
htmlhint 可能只报一个 tag-pair 错误，而 W3C Validator 会明确指出 End tag div does not match the start tag p，并定位嵌套断裂点。
真正容易被忽略的是：htmlhint 不检查 lang、alt、title 是否缺失，也不提醒 DOCTYPE 错误或字符编码声明位置不对——这些必须交由 W3C 工具或 Lighthouse 补全。
