html源代码在线对⽐,HTML代码风格检查⼯具对⽐
HTML代码风格检查⼯具对⽐
作为⼀个前端，不可避免同时与三个语⾔打交道：JS、CSS 和 HTML。⽽ HTML，超⽂本标记语⾔，是其中可编程性最弱的，⼀直以来得到的关注都较少。加上浏览器对 HTML 逆天的容错⽀持，即使是错误百出的⽂档也可以在浏览器⾥边表现得中规中矩。这样的背景下，绝⼤部分被产出的 HTML 代码都存在着各种各样的⼩问题，⽐如缺少必要的元信息(meta)，⽐如混乱的 class、id 或属性的取值格式；这些问题或影响页⾯在不同浏览器下的表现，或增⼤了页⾯的开发、维护成本。
因此，选⽤⼀个合适的⼯具对 HTML 代码进⾏质量控制会是⼀件很有意义的事情。本⽂选择了 Bootlint、AriaLinter、htmllint、HTMLHint 及 htmlcs 这五个⽬前最活跃的相关项⽬进⾏对⽐。除此之外还存在如 tidy、W3C/Mozilla HTML validator 等⼯具，但它们专注于 HTML 规范，⼏乎不涉及代码风格上的检查，这⾥就不做⽐较。
对⽐⾓度将主要包括以下⼏个⽅⾯：
使⽤及配置
规则实现及⾃定义
性能
亮点
为了后续说明的便利，这⾥先对语法风格的规则进⾏简单的分类，第⼀类包括 attr-value-double-quotes(使⽤双引号包围属性值)， max-length(限制单⾏最⼤长度)， tag-pair(要求需要显式闭合的标签显式闭合)等；第⼆类包括 script-in-tail(JavaScript 内容要求在页⾯最后嵌⼊), title-required(要求 title 标签), id-class-ad-disabled(不允许在 id 或 class 的值中出现 ad_，ad-，_ad，-ad 等)等。这两类规则有很明显的区别，第⼀类偏重于代码格式(遵循与否都不影响最终语义)，这⾥叫它格式规则；对应地，第⼆类偏重语义，即最终 document
的表现，这⾥叫它语义规则。⼀般情况下，前者更适合在语法分析阶段做，⽽后者更适合在分析完后基于分析结果(AST / document)进⾏。
Bootlint 可能是 github 上 star 数最多的 HTML 代码风格检查⼯具。不过正如其名所暗⽰的，它由 Bootstrap 团队开发，专注于基于Bootstrap 的项⽬。与受关注程度相对应，项⽬的完善度较⾼，⽂档齐全，使⽤⽅式包括在浏览器中引⼊，作为 Grunt 任务、Nodejs 模块及命令⾏⼯具。
Bootlint ⽀持规则粒度的配置，但仅限于 disable / enable。不⽀持配置⽂件或⾏内配置。
Bootlint 专注于基于 Bootstrap 的项⽬，这⼀点在它的规则列表中体现得较为明显：Bootlint 提供的⼤多数规则都明显只适⽤于Bootstrap 项⽬，如 W004(插件 Modal 中不允许使⽤将被废弃的 remote)， W005(如果使⽤了基于 jQuery 的 Bootstrap 插件，则要求页⾯中引⼊ jQuery)等。另外，Bootlint 实现⽅式是通过 Cheerio 对 HTML 代码进⾏解析，获取到类 jQuery 的 $(选择器)接⼝，其规则均在 $ 基础上实现，这决定了⽬前的 Bootlint 所能提供的仅限语义规则。⽽且，Bootlint 不⽀持添加⾃定义规则。
Bootlint 性能⼀般，Cheerio 内部使⽤ htmlparser2 进⾏ HTML 代码的解析，然后将对节点的操作包装为 $ ⽅法，Bootlint 逐规则通过$ 查元素，依据结果进⾏检查。
针对 Bootstrap 相关的检查可以算是 Bootlint 的亮点之⼀。Bootlint 的另⼀个独特之处在于，它⽀持作为⼀个服务器运⾏，提供基于HTTP 请求的 lint 服务。
AriaLinter 是⼀个基于规则(Rule based)，⾯向 HTML document 的检查⼯具。它⽀持作为⼀个 Grunt 任务(最推荐的形式)、Nodejs 模块或命令⾏⼯具使⽤。
作为⼀个 Grunt 任务或 Nodejs 模块被调⽤时，⽀持传⼊规则配置。但不⽀持配置⽂件或⾏内配置，及作为单独命令⾏⼯具使⽤时是不可配置的。
AriaLinter 强调了它是“for HTML documents”，即偏语义规则的检查，做法是基于 jsdom 获取运⾏时
的 document，接着检查其内容、结构。事实上，AriaLinter ⼏乎没有实现任何格式规则。另外，也不⽀持⾃定义规则。
AriaLinter 性能会是个问题，毕竟只是为了得到 document 结构的话，jsdom 太重了。
AriaLinter 的亮点之⼀是贴⼼地⽀持了 template 参数，当开启时部分规则不做检查。该特性在模板语法会对 HTML 语法造成破坏时效果有限。
htmllint 是⼀个2014年开始的项⽬，它将⾃⼰定位为⼀个“html5 linter and validator”，它提供了较全⾯的 rule，实现⽅式也很特别。有不少的⼈参与了开发，⽂档也很齐全，奇怪的是它受到的关注度很低。
htmllint ⽀持作为 Grunt 任务或 Nodejs 模块的使⽤形式。可传⼊规则配置。不⽀持配置⽂件，⽀持⾏内注释配置。
htmllint 较好地同时⽀持了格式规则及语义规则。做法是将两类规则分两步做：
对代码进⾏进⾏逐⾏ lint
对代码 parse 完成后，针对 AST 逐节点 lint
同时也⽀持⾃定义规则。
最后在性能上，使⽤ htmlparser2 解析代码，性能较好；另外逐节点 lint 的⽅式避免了重复遍历，也有⼀定性能上的收益。
HTMLHint 是国⼈出品的 HTML 代码检查⼯具，定位是“A Static Code Analysis Tool for HTML”。
使⽤⽅式包括在浏览器中引⼊，作为 Nodejs 模块，及命令⾏⼯具。⽀持传⼊配置或指定配置⽂件。不过与 Bootlint 类似，其规则配置仅限于 disable / enable。
与 AriaLinter 相反，HTMLHint 仅在对代码进⾏ parse 的过程中进⾏检查。这样带来的好处是性能上的，避免了对 AST / document 的操作；当然这也带来局限性：规则偏格式规则。虽然 HTMLHint 也提供⼀些语义规则，但其实现建⽴在对 parse 时事件的监听上，显得吃⼒且不⾃然。
另外，HTMLHint ⽀持⾃定义 rule，当然，⾃定义 rule 也受到上述限制，仅能接触到 parser ⽽⾮ AST / doument。
HTMLHint 的性能应该是能提供语义规则的⼯具⾥最好的。仅有⼀遍 parse 过程，⽆ AST / Document 的查过程。
htmlcs 是百度 EFE 出品的的 HTML 代码风格检查⼯具，项⽬始于2014年底，应百度内部全⾯推⾏代码规范检查的需求⽽⽣。
htmlcs ⽀持以 Nodejs 模块，或命令⾏⼯具的形式使⽤，在 grunt / gulp 中使⽤时需要⼿动包装。作为模块调⽤时，可传⼊⾃定义配置对象；作为命令⾏⼯具使⽤时，⽀持配置⽂件。另外也⽀持代码⾏内配置。
htmlcs 提供了较丰富的规则实现，包括格式规则及语义规则，也⽀持添加⾃定义规则。在实现时针对性分为 parse 时规则(类 HTMLHint 实现⽅式)及⾯向 document 的规则(类 AriaLinter 的规则⾏为)，前者监听 parser 事件，后者直接读取 document 结构。特别地，这⾥的 document 结构被进⾏了包装，依据 DOM 规范实现了⼤部分的属性及读操作⽅法。因此⾃定义的规则可以以操作规范 DOM 的形式操作 document 结构，实现⾃然、便利。
另外 htmlcs ⽀持传⼊额外 linter 对 HTML 中内嵌的 JS 及 CSS 内容进⾏检查。
对于可⾃动修正的规则，htmlcs 提供了 format ⽅法。⾃定义规则同样可以⾃定义对应的 format ⾏为。页⾯内嵌的 JS 及 CSS 内容也可以通过传⼊对应的 format ⽅法进⾏格式化。
htmlcs 的性能不是优势，处于可接受的程度。HTML 代码的 parse 基于 htmlparser2，但对结果对象有⼀个封装的过程；另外规则的实现⽅式(节点查的频次)也在⼀定程度上影响最终表现。
总结
Bootlint 与 AriaLinter 均短板明显。前者在只针对 Bootstrap 项⽬时有⼀定优势；⽽后者在只关注语义规则时能满⾜⼀定需求。
htmllint 在⼤部分情况下能满⾜基本需求，但优点不明显。
如果对性能较为敏感，推荐 HTMLHint。
⽽ htmlcs 在扩展性、⾃定义能⼒上表现突出，覆盖的规则可能也是⽬前最全的，从个⼈⾓度看是⼤部分情况下的推荐选择。
>jquery在线库

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。