htmlhint不是开箱即用工具，需根据项目实际（纯html/vue/ejs等）配置.htmlhintrc文件置于根目录，正确设置ignore规则、tag-pair和attr-value-double-quotes等关键项，并优先本地安装使用npx调用。
htmlhint 不是“装完就能用”的开箱即用工具——它默认启用一堆规则，但项目一上手就报几十个错，往往是因为配置没对齐实际代码形态。别急着关规则，先确认你面对的是纯 HTML、Vue 模板、还是混了 EJS/Django 片段。
怎么让 htmlhint 找到你的配置文件
.htmlhintrc 必须放在项目根目录（即执行 npx htmlhint 命令时所在的目录），否则它不会加载。HTMLHint 只向上查找一级父目录，不递归扫描。
- 配置文件名必须是
.htmlhintrc（开头带点），后缀只能是.json或.js（后者需module.exports = {...}） - 路径含
**通配符时，命令参数必须用双引号包裹：npx htmlhint "src/**/*.html"，否则 shell 可能提前展开失败 - 子目录想用不同规则？不能靠目录级配置文件，得用
--config显式指定：npx htmlhint --config src/pages/.htmlhintrc src/pages/*.html
tag-pair 规则为什么总报错，又为什么不能随便关
它检测的是结构合法性：漏闭合、嵌套错位、多闭合，比如 <div><p>text</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a>
<p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></div>。浏览器会自动修复，但静态检查必须暴露问题。
- 默认开启，无需额外配置；自闭合标签如
<img>、<input>不在此规则校验范围内 - Vue/JSX 或 Pug 模板里常有不完整片段（如只写
<div v-if="x">），这时 <code>tag-pair会误报，应临时设为false - 混用 EJS/Django 模板（如
<div>）也会触发错误，需在配置中加 <code>"ignore": ["**/*.ejs", "**/*.html.django"]attr-value-double-quotes在 Vue 和 JSON 属性里怎么处理这条规则强制属性值用双引号，但遇到
v-bind:class="{'active': isActive}"或data-config='{"key":"val"}'就容易翻车。- Vue 场景下建议设为
false，或升级到 HTMLHint v1.0+ 后改用更灵活的"attr-value-quote-style": "double" - 内联 JSON 属性天然存在单双引号嵌套冲突，统一用单引号 + 关闭该规则更稳妥
- 命令行临时关闭：
npx htmlhint --rules attr-value-double-quotes:false index.html - 注意规则名大小写敏感：
Attr-Value-Double-Quotes会静默失效
本地安装 vs 全局安装，选哪个
本地安装（
npm install htmlhint --save-dev）是唯一推荐方式。全局安装会导致版本不一致、CI 环境缺失、团队成员行为不统一等问题。- 本地安装后，统一用
npx htmlhint调用，确保用的是项目声明的版本 - CI 脚本里不要写
htmlhint，要写npx htmlhint或./node_modules/.bin/htmlhint -
htmlhint --init可生成基础配置，但生成的规则未必适合你的技术栈，务必手动删减
真正难的不是写规则，而是判断哪些规则该保留、哪些该禁用——这取决于你写的到底是不是标准 HTML。模板语法、框架指令、服务端 include 都会让“合法 HTML”变得模糊，
htmlhint的价值恰恰在于帮你划清这条线，而不是无脑报错。 - Vue 场景下建议设为
