HTML代碼風格檢查工具對比
作為一個前端，不可避免同時與三個語言打交道：JS、CSS 和 HTML。而 HTML，超文本標記語言，是其中可編程性最弱的，一直以來得到的關注都較少。加上瀏覽器對 HTML 逆天的容錯支持，即使是錯誤百出的文檔也可以在瀏覽器里邊表現得中規中矩。這樣的背景下，絕大部分被產出的 HTML 代碼都存在著各種各樣的小問題，比如缺少必要的元信息（meta），比如混亂的 class、id 或屬性的取值格式；這些問題或影響頁面在不同瀏覽器下的表現，或增大了頁面的開發、維護成本。
因此，選用一個合適的工具對 HTML 代碼進行質量控制會是一件很有意義的事情。本文選擇了 Bootlint、AriaLinter、htmllint、HTMLHint 及 htmlcs 這五個目前最活躍的相關項目進行對比。除此之外還存在如 tidy、W3C/Mozilla HTML validator 等工具，但它們專注于 HTML 規范，幾乎不涉及代碼風格上的檢查，這里就不做比較。
對比角度將主要包括以下幾個方面：
- 使用及配置
- 規則實現及自定義
- 性能
- 亮點 </ul>
- 對代碼進行進行逐行 lint
- 對代碼 parse 完成后，針對 AST 逐節點 lint </ol>
為了后續說明的便利，這里先對語法風格的規則進行簡單的分類，第一類包括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
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
AriaLinter 是一個基于規則（Rule based），面向 HTML document 的檢查工具。它支持作為一個 Grunt 任務（最推薦的形式）、Nodejs 模塊或命令行工具使用。
作為一個 Grunt 任務或 Nodejs 模塊被調用時，支持傳入規則配置。但不支持配置文件或行內配置，及作為單獨命令行工具使用時是不可配置的。
AriaLinter 強調了它是“for HTML documents”，即偏語義規則的檢查，做法是基于 jsdom 獲取運行時的 document，接著檢查其內容、結構。事實上，AriaLinter 幾乎沒有實現任何格式規則。另外，也不支持自定義規則。
AriaLinter 性能會是個問題，畢竟只是為了得到 document 結構的話，jsdom 太重了。
AriaLinter 的亮點之一是貼心地支持了 template 參數，當開啟時部分規則不做檢查。該特性在模板語法會對 HTML 語法造成破壞時效果有限。
htmllint
htmllint 是一個2014年開始的項目，它將自己定位為一個“html5 linter and validator”，它提供了較全面的 rule，實現方式也很特別。有不少的人參與了開發，文檔也很齊全，奇怪的是它受到的關注度很低。
htmllint 支持作為 Grunt 任務或 Nodejs 模塊的使用形式。可傳入規則配置。不支持配置文件，支持行內注釋配置。
htmllint 較好地同時支持了格式規則及語義規則。做法是將兩類規則分兩步做：
同時也支持自定義規則。
最后在性能上，使用 htmlparser2 解析代碼，性能較好；另外逐節點 lint 的方式避免了重復遍歷，也有一定性能上的收益。
HTMLHint
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
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 在擴展性、自定義能力上表現突出，覆蓋的規則可能也是目前最全的，從個人角度看是大部分情況下的推薦選擇。