htmlhint真生效需在vs code中关闭内置验证器、启用.htmlhintrc基础规则、禁用全局依赖并用npx执行；prettier与htmlhint须职责分离且引号配置一致；husky pre-commit应仅校验git改动的html文件，避免全量扫描。

HTML 工程化工具链不是“加一堆插件就完事”，而是让规范在保存、提交、构建三个关键节点自动拦截问题。没落地的规则等于没写。

VS Code 里 HTMLHint 怎么配才真生效

很多人装了 HTMLHint 扩展但没报错，其实是没启用校验或配置被覆盖。默认情况下 VS Code 的内置 HTML 验证器会和 HTMLHint 冲突，必须关掉前者。

• 在 settings.json 中添加："html.validate.scripts": false, "html.validate.styles": false
• 确保项目根目录有 .htmlhintrc，且至少启用 doctype-first、tagname-lowercase、attr-lowercase 这三条基础规则
• 不要依赖全局安装的 HTMLHint：团队成员本地 npm 全局装的版本可能不一致，应统一用 npx htmlhint src/*.html 命令跑
• 常见错误现象：htmlhint 命令报 Cannot find module 'htmlhint' —— 说明没在项目里装，不是路径问题

prettier + htmlhint 组合怎么避免互相打架

Prettier 负责格式（缩进、引号、空行），HTMLHint 负责语义和规范（标签闭合、doctype、alt 属性）。两者职责分明，但配置不当会冲突。

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

• prettier 的 htmlWhitespaceSensitivity: "css" 是安全值；设成 "strict" 可能误删必需的空白，导致文本节点错位
• HTMLHint 的 attr-value-double-quotes 和 Prettier 的引号设置必须一致，否则保存后立刻报错又立刻修复，形成循环
• 禁用 Prettier 对 class 属性的重排（它不懂 BEM），在 .prettierrc 加："htmlOptions": { "attributeValueDoubleQuotes": "prefer-double" }
• 实际效果：保存时 Prettier 格式化 → HTMLHint 检查 → 报错项需手动修（如缺 alt），不会自动补

husky pre-commit 怎么只校验改动的 HTML 文件

全量校验 src/**/*.html 在大型项目里太慢，CI 等不起，本地提交也卡顿。得只检本次 commit 涉及的文件。

• 用 git diff --cached --name-only --diff-filter=ACM | grep '\.html$' 提取新增/修改的 HTML 文件路径
• 脚本里判断结果为空则跳过，非空则传给 htmlhint，例如：npx htmlhint $(git diff ...)
• 别直接写 "pre-commit": "htmlhint src/**/*.html" —— 这样每次提交都扫全部，哪怕只改了一个 JS 文件
• 容易踩的坑：Windows 下 git diff 输出路径带反斜杠，htmlhint 不认，建议用 cross-env 或统一用 WSL

动态生成 HTML 怎么让 HTMLHint 也能管到

JS 拼接字符串、模板引擎（如 EJS、Handlebars）输出的 HTML，HTMLHint 默认不扫描。这部分最容易出语义错误，比如 <main></main> 嵌套在 <nav></nav> 里。

• 对构建产物（如 dist/index.html）跑一次 htmlhint dist/**/*.html，作为 CI 最后一道检查
• 模板文件（.ejs、.hbs）本身不能直接被 HTMLHint 读，需配合插件：EJS 用 eslint-plugin-html + eslint，Handlebars 用 ember-template-lint
• 关键点：所有 data-* 属性必须带注释说明来源，HTMLHint 不管这个，但人工 CR 时这是必查项 —— 比如 <div data-user-id="<%= user.id %>"> <!-- 后端 API 返回，不可为空 --><li>性能影响：CI 阶段校验构建产物比校验源模板更准，但耗时多 2–3 秒，需权衡</li> <p>真正卡住质量的不是工具没装，而是规则没进 pipeline、没进编辑器、没进 commit 钩子。动态模板、多层 include、JS 注入 DOM 这些场景，工具链必须分层覆盖，漏一层就等于放行一个隐患。</p> </div>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！