能,htmllint原生支持自定义规则,通过.htmlhintrc文件在rules对象下配置开关与参数,如"attr-lowercase": true或"id-class-value": ["dash"],并支持插件扩展语义检查能力。

htmllint 能不能支持自定义规则?
能,而且是原生支持。它不像 ESLint 那样需要写 AST 解析逻辑,而是通过 .htmlhintrc 文件直接声明规则开关和参数,适合 HTML 语义层检查(比如标签嵌套、属性缺失、class 命名风格等)。
常见错误现象:配置了 "attr-lowercase": true 却没生效,其实是漏写了 rules 外层包裹;或者把规则名拼错成 attr_lowercase(实际是连字符分隔)。
- 所有规则必须放在
rules对象下,不能平铺在根对象里 - 布尔值开启用
true,关闭用false;带参数的规则用数组,如"id-class-value": ["dash"] - 不支持运行时动态加载规则文件,所有自定义逻辑得靠插件(见下节)
如何用插件扩展 htmllint 的自定义能力?
htmllint 内置规则覆盖 HTML5 结构和基础语义,但像 “禁止使用 style 属性” 或 “强制 img 必须有 alt 且非空字符串” 这类业务规则,得靠插件。
插件本质是一个导出 rule 函数的模块,接收节点 AST 和配置项,在遍历过程中调用 report 报错。和 ESLint 自定义规则类似,但 API 更轻量。
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
- 插件文件路径需在
.htmlhintrc中通过plugins字段声明,如"plugins": ["./lib/html-plugin.js"] - 插件内必须导出
rule属性,且函数签名是(astNode, ruleOptions, report) => void - AST 节点结构简单,
node.tagName、node.attrs、node.children就够大部分判断用了
Stylelint 能不能检查 HTML 里的 <style></style> 和内联 style?
可以,但默认不生效。Stylelint 默认只处理 .css、.scss 等样式文件,对 HTML 中的 <style></style> 标签或 style="..." 属性完全忽略。
关键在配置:必须显式指定 customSyntax: "postcss-html",并且用 overrides 匹配 HTML 文件后缀,否则规则压根不会触发。
- 安装依赖:
npm install postcss-html stylelint-config-html --save-dev - 在
stylelint.config.js中添加overrides段,匹配**/*.html,并设置customSyntax - 不要只在根配置里写
customSyntax—— 它只影响默认匹配,HTML 文件必须走overrides分支
ESLint 检查 HTML 文件时容易忽略什么?
ESLint 本身不解析 HTML,它靠插件(如 eslint-plugin-html 或 @html-eslint/eslint-plugin)提取 script 标签内容再交给 JS 解析器。这意味着:HTML 结构错误不会报,JS 语法错误才报,且行号映射常偏移。
典型陷阱:你在 index.html 里写了 <script>console.log(</script>(少了个括号),ESLint 报错位置显示在第 1 行,实际可能在第 42 行的 <script></script> 块里。
- 启用前确认插件版本兼容当前 ESLint 版本(v9+ 对插件 API 有 breaking change)
-
eslint-plugin-html不维护了,推荐用@html-eslint/eslint-plugin(基于独立 HTML 解析器) - 若项目混用 Vue/Marko 等模板语法,ESLint 插件大概率无法正确提取,此时应优先用对应框架的专用 Lint 工具
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










