htmlhint应通过husky pre-commit钩子、vs code保存校验及ci流水线三重拦截嵌入开发闭环，优先启用doctype-first、tag-pair、attr-value-double-quotes等3–5条高性价比规则，并配合bem命名约束与语义化渐进重构，实现无人值守的质量卡点。
HTMLHint 怎么集成进团队日常开发流程
不靠人盯、不靠会议强调，HTML 质量要嵌进提交前的最小闭环里。关键不是“用不用”，而是“谁在什么时候被什么拦住”。
- 本地 pre-commit 钩子最有效：用
husky+htmlhint组合，在git commit前自动跑htmlhint "src/**/*.html"，失败直接中止提交 - VS Code 必开保存时校验：在
settings.json里加"html.validate.scripts": true和"html.suggest.html5": true，配合已安装的 HTMLHint 扩展，编辑时就标红tag-pair或attr-lowercase类错误 - CI 流水线加一道检查：GitHub Actions 或 GitLab CI 中加入
npm run html:lint步骤，失败不合并 PR；注意别只扫index.html，要覆盖所有模板路径，比如views/*.html、templates/**/*.html
哪些 HTML 规则对敏捷团队性价比最高
规则不是越多越好，选 3–5 条能立刻暴露协作裂缝的就够了。优先堵住“改一处、坏三处”的坑。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
doctype-first：防止 IE 兼容模式意外触发，尤其老项目升级时经常漏掉 -
tag-pair：未闭合标签在 JS 动态插入时极易引发 DOM 树错乱，调试成本远高于预防成本 -
attr-value-double-quotes：单引号在某些构建工具（如 Webpack 的 html-webpack-plugin）里会出解析异常 -
id-class-value设为dash：统一user-profile-card而非userProfileCard或user_profile_card，避免 CSS 和 JS 查询时大小写/分隔符不一致 -
attr-no-duplication：重复class或id属性在多人并行改同一模板时高频出现，且浏览器行为不一致
语义化标签重构怎么避免“改完更不敢动”
把 <div class="header"> 换成 <code><header></header> 看似简单，但实际常因 CSS 选择器强耦合而失败。核心是“不动样式，只动结构”。
- 先查现有 CSS：运行
grep -r "div\.header" src/css/，如果匹配到div.header这类精确选择器，就先改成header, div.header，留兼容期 - 禁止直接删旧 class：保留
<header class="header"></header>，等全量替换完成、确认无样式回归问题后再清理 - JS 查询同步更新：检查所有
document.querySelector("div.header")，批量替换成document.querySelector("header")，但注意不要误伤第三方库内部调用 - 用
data-semantic过渡：对复杂组件，先加data-semantic="header"，让 JS/CSS 逐步迁移，比硬切更可控
为什么 BEM + HTMLHint 一起用才真正防退化
光靠 BEM 命名规范，挡不住新人随手写 class="btn btn--primary btn-large"；光靠 HTMLHint，又管不了 class="userCard" 这种命名是否可维护。二者必须咬合。
- HTMLHint 配置里启用
attr-name-style并设为dash，它会直接报错class="userCard"，强制使用user-card - 团队共享的
.htmlhintrc必须包含"class-no-duplication": true，防止class="card card--hover card--active"这类冗余写法 - VS Code 的 Emmet 设置要同步：关闭
emmet.preferences里的"css.propertySeparator": ":"，避免自动补全时插入冒号破坏 BEM 修饰符格式 - 最易忽略的是：HTMLHint 不检查 JS 生成的 HTML，所以动态渲染的
innerHTML或模板字符串也得用 ESLint 插件eslint-plugin-html补位
git commit --no-verify、一段没人敢动的旧模板。这些点看似微小，但它们是技术债务的毛细血管。
