HTMLコードスタイルチェックの比較 tools_html/css_WEB-ITnose

フロントエンドとして、JS、CSS、HTMLの3つの言語を同時に扱うことは避けられません。 HTML (ハイパーテキスト マークアップ言語) は、これらすべての言語の中で最もプログラム可能性が低く、あまり注目されていません。ブラウザーの HTML に対する驚異的なフォールト トレランス サポートと組み合わせることで、エラーだらけのドキュメントでもブラウザー内で正常に動作することができます。これに関連して、生成された HTML コードのほとんどには、混乱を招くクラス、ID、または属性値の形式など、必要なメタ情報 (メタ) の欠如など、さまざまな軽微な問題があり、さまざまな環境下でのページのパフォーマンスに影響を与える可能性があります。ブラウザの使用を制限するか、ページの開発とメンテナンスのコストが増加します。

したがって、HTML コードの品質管理を実行するために適切なツールを選択することは非常に意味があります。この記事では、現在最もアクティブな 5 つの関連プロジェクトである Bootlint、AriaLinter、htmllint、HTMLHint、および htmlcs を比較のために選択します。このほか、tidy、W3C/Mozilla HTML validator などのツールもありますが、これらは HTML の仕様に重点を置いており、コードスタイルの検査はほとんど含まれていないため、ここでは比較しません。

比較の観点には主に次の側面が含まれます:

• 使用法と構成
• ルールの実装とカスタマイズ
• パフォーマンス
• ハイライト

以降の説明の便宜のために、文法ルールの簡単な概要をここに示します。 style.classification の最初のカテゴリには、attr-value-double-quotes (属性値を二重引用符で囲む)、max-length (単一行の最大長を制限する)、tag-pair (明示的に指定する必要があるタグが必要) が含まれます。明示的に閉じられるようにclosed)など; Chapter 2番目のカテゴリには、script-in-tail (JavaScriptコンテンツをページの最後に埋め込む必要があります)、title-required (titleタグが必要です)、id-class-が含まれます。 ad-disabled (ad_、ad- は id または class、_ad、-ad などの値に含めることができません) など。これら 2 つのタイプのルールには明らかな違いがあります。最初のタイプはコード形式に焦点を当てており (従うかどうかは最終的なセマンティクスに影響しません)、ここではそれに応じてフォーマット ルールと呼ばれます。2 番目のタイプはセマンティクスに焦点を当てます。つまり、最終文書のパフォーマンスです。ここではそれを意味論的ルールと呼びます。一般的に、前者は構文解析段階で行うのが適しており、後者は解析後の解析結果（AST/文書）に基づいて行うのが適しています。

Bootlint

Bootlint は、おそらく github で最もスターの多い HTML コード スタイル チェック ツールです。ただし、名前が示すように、Bootstrap チームによって開発されており、Bootstrap ベースのプロジェクトに焦点を当てています。注目の度合いに応じて、このプロジェクトは非常に完成度が高く、Grunt タスク、Nodejs モジュール、コマンド ライン ツールとしてブラウザに導入するなど、完全なドキュメントが用意されています。

Bootlint はルール詳細な構成をサポートしていますが、無効化/有効化に限定されています。構成ファイルまたはインライン構成はサポートされていません。

Bootlint は、Bootstrap に基づくプロジェクトに焦点を当てています。これはルール リストでより明らかです。Bootlint が提供するルールのほとんどは、明らかに W004 などの Bootstrap プロジェクトにのみ適用されます (W004 の使用は放棄されます)。プラグイン Modal リモート)、W005 (jQuery ベースの Bootstrap プラグインを使用する場合、ページに jQuery を導入する必要があります) など。さらに、Bootlint は、Cheerio を通じて HTML コードを解析し、jQuery のような $ (セレクター) インターフェイスを取得することによって実装されます。そのルールはすべて $ に基づいて実装されており、現在の Bootlint が提供できるのはセマンティック ルールのみであることが決まります。さらに、Bootlint はカスタム ルールの追加をサポートしていません。

Bootlint のパフォーマンスは平均的です。Cheerio は内部で htmlparser2 を使用して HTML コードを解析し、ノードの操作を $ メソッドにパッケージ化して $ ルールごとに要素を検索し、その結果に基づいてチェックします。

Bootstrap 関連のチェックは、Bootlint のハイライトの 1 つとみなすことができます。 Bootlint のもう 1 つのユニークな機能は、サーバーとしての実行をサポートし、HTTP リクエストに基づいて lint サービスを提供することです。

AriaLinter

AriaLinter は、HTML ドキュメントのルールベースの検査ツールです。 Grunt タスク (最も推奨される形式)、Nodejs モジュール、またはコマンド ライン ツールとしての使用をサポートしています。

Grunt タスクまたは Nodejs モジュールとして呼び出された場合のルール設定の受け渡しをサポートします。ただし、構成ファイルやインライン構成はサポートされておらず、スタンドアロンのコマンド ライン ツールとして使用する場合は構成できません。

AriaLinter は、「HTML ドキュメント用」であること、つまり部分的なセマンティック ルールのチェックであることを強調しています。その方法は、jsdom に基づいて実行時ドキュメントを取得し、その内容と構造をチェックすることです。実際、AriaLinter は書式設定ルールをほとんど実装していません。さらに、カスタム ルールはサポートされていません。

AriaLinter のパフォーマンスが問題になります。結局、文書構造を取得するだけなら、jsdom は重すぎます。

AriaLinter のハイライトの 1 つは、テンプレート パラメーターが有効になっている場合、一部のルールがチェックされないことです。テンプレート構文が HTML 構文を壊す場合、この機能の効果は限定されます。

htmllint

htmllint は 2014 年に開始されたプロジェクトです。それはそれ自体を「html5 リンターおよびバリデーター」として位置づけており、より包括的なルールを提供し、その実装方法も非常に特殊です。開発には多くの人が関わっており、ドキュメントは非常に充実していますが、あまり注目されていないのは不思議です。

htmllint は Grunt タスクまたは Nodejs モジュールとしてサポートされています。ルール設定を渡すことができます。構成ファイルはサポートされていませんが、インライン コメント構成はサポートされています。

htmllint は、書式設定ルールとセマンティック ルールの両方を適切にサポートしています。その方法は、2 種類のルールを 2 つのステップに分割することです:

コードを行ごとに lint します

コード解析が完了したら、AST ノードをノードごとに lint します

カスタマイズされたルールもサポートされています。

最後に、パフォーマンスの点では、htmlparser2 を使用してコードを解析するとパフォーマンスが向上します。さらに、ノードごとの lint メソッドは反復的なトラバーサルを回避し、一定のパフォーマンスの向上ももたらします。

HTMLHint

HTMLHint は中国人が作成した HTML コードチェックツールで、「HTML の静的コード解析ツール」として位置付けられています。

使用方法としては、ブラウザに導入する方法、Nodejsモジュールとして導入する方法、コマンドラインツールとして導入する方法があります。構成の受け渡しまたは構成ファイルの指定をサポートします。ただし、Bootlint と同様に、そのルール設定は無効化/有効化に制限されています。

AriaLinter とは異なり、HTMLHint はコードの解析プロセス中にのみチェックされます。この利点はパフォーマンスにあり、AST / ドキュメントの操作を回避できます。もちろん、これには制限も伴います。ルールの部分的なフォーマット ルール。 HTMLHint もいくつかのセマンティック ルールを提供しますが、その実装は解析中のイベントの監視に基づいており、面倒で不自然に思えます。

さらに、HTMLHint はカスタム ルールをサポートします。もちろん、カスタム ルールにも上記の制限が適用され、AST/ドキュメントではなくパーサーにのみアクセスできます。

HTMLHint のパフォーマンスは、セマンティック ルールを提供できるツールの中で最高であるはずです。解析プロセスは 1 つだけあり、AST/ドキュメント検索プロセスはありません。

htmlcs

htmlcs は、Baidu EFE によって作成された HTML コード スタイル チェック ツールです。このプロジェクトは 2014 年末に開始され、Baidu 内でのコード仕様チェックの包括的な実装のニーズに応えて誕生しました。

htmlcs は、Nodejs モジュールまたはコマンド ライン ツールの形式での使用をサポートしており、grunt/gulp で使用する場合は手動でパッケージ化する必要があります。モジュールとして呼び出される場合は、カスタム構成オブジェクトを渡すことができます。コマンド ライン ツールとして使用される場合は、構成ファイルがサポートされます。インライン構成もサポートされています。

htmlcs は、フォーマット ルールやセマンティック ルールを含む、より豊富なルール実装セットを提供し、カスタム ルールの追加もサポートします。この実装は、解析時ルール (HTMLHint のような実装) とドキュメント指向のルール (AriaLinter のようなルール動作) に分かれており、前者はパーサー イベントをリッスンし、後者はドキュメント構造を直接読み取ります。特に、ここでの文書構造はパッケージ化されており、ほとんどの属性と読み取り操作メソッドは DOM 仕様に従って実装されています。そのため、カスタマイズされたルールにより標準化されたDOMを操作する形で文書構造を操作できるため、自然で便利です。

さらに、htmlcs は、HTML に埋め込まれた JS および CSS コンテンツをチェックするための追加リンターの受け渡しをサポートしています。

自動的に修正できるルールについては、htmlcs が format メソッドを提供します。カスタム ルールでは、対応する形式の動作をカスタマイズすることもできます。ページに埋め込まれた JS および CSS コンテンツは、対応する format メソッドを渡すことによってフォーマットすることもできます。

htmlcs のパフォーマンスは利点ではなく、許容可能なレベルです。 HTML コードの解析は htmlparser2 に基づいていますが、結果オブジェクトのカプセル化プロセスがあり、さらに、ルールの実装方法 (ノード検索の頻度) も最終的なパフォーマンスにある程度影響します。

まとめ

Bootlint と AriaLinter には両方とも明らかな欠点があります。前者はブートストラップ プロジェクトのみを対象とする場合には一定の利点があり、後者はセマンティック ルールのみに焦点を当てる場合には特定のニーズを満たすことができます。

htmllint はほとんどの場合、基本的なニーズを満たすことができますが、その利点は明らかではありません。

パフォーマンスにもっと敏感な場合は、HTMLHint をお勧めします。

そして、htmlcs はスケーラビリティとカスタマイズ機能において優れたパフォーマンスを備えており、ルールの範囲が現時点で最も包括的である可能性があり、個人的な観点からは、ほとんどの場合に推奨されます。

原文 http://efe.baidu.com/blog/comparison-of-html-linting-tool/