HTML中如何使用HTMLHint检查代码规范-html教程-PHP中文网

htmlhint是一个轻量级html静态检查cli工具，可检测img缺alt、a缺href、标签不配对、属性未引号、id重复等问题，支持vs code集成与自定义规则配置。

html中如何使用htmlhint检查代码规范

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 文件：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

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></script> 出现在，但现代 defer 脚本是安全的，可保留该规则但排除带 defer 或 module 的 <script></script>
规则名大小写敏感，写成 "Tagname-Lowercase" 会静默失效

VS Code 中实时提示 HTMLHint 错误

安装 VS Code 插件 HTMLHint（作者：mkaufman），启用后自动读取项目根目录的 .htmlhintrc。

注意几个关键行为：

插件不会自动安装 htmlhint CLI，必须手动 npm install htmlhint --save-dev，否则提示 “command not found”
如果打开的是单个 HTML 文件（非工作区），插件可能 fallback 到默认规则，不读 .htmlhintrc
修改 .htmlhintrc 后需重启 VS Code 窗口，热重载不生效
插件对 .vue 或 .svelte 文件中的 HTML 片段默认不检查，需额外配置 "html.validate.scripts": true 并配合语言服务插件