新しいMicrosoft Edge開発者ツールのプロダクトマネージャRachel Simone Weil氏は先日、OpenJS worldで講演を行い、webhintがWeb開発者のベストプラクティス実装をいかにサポートするのか解説した。
Microsoft Edge開発者ツールの開発中に何百人ものWeb開発者から受けたフィードバックに対する回答として、Weil氏はwebhintを紹介した。
このような最新のベストプラクティスや最新機能を備えたサイトをアクセスしやすくし、PWAに対応させることは、本当に大変な作業です。
[…] webhintは、Webの開発やデバッグにおいて困難で時間のかかる部分に対処するのを支援します。
webhintはカスタマイズ可能なlintツールとして紹介された。ベストプラクティスやよくあるエラーがないか書かれたコードをチェックすることにより、開発者がサイトのアクセシビリティ、スピード、クロスブラウザ互換性などを向上させるのを支援する。
webhintはコマンドラインアプリケーションとして実行する（結果の簡単なサマリを含んだHTMLレポートを出力）こともできるし、CIワークフローに統合することもできる。Visual Studioの拡張機能としても利用でき、コーディング中に検出された問題や推奨事項をIDEに直接表示することができる。
webhintはブラウザの拡張機能（Firefox、Edge、Chromeブラウザ用）としてインストールすることもでき、開発者はデバッグ中もしくはページのデプロイ後に、オンデマンドでページのランタイム分析を行うことができる。何もインストールすることなく、webhint scannerサイトから任意のページで実行することもできる。
ヒントは、パフォーマンス、落とし穴、セキュリティ、開発、PWA、互換性、アクセシビリティという7つのカテゴリに分類されており、執筆時点で合計70以上のヒントが実装されている。
パフォーマンスに関するヒントには、画像最適化の分析、javascriptのミニフィケーション、リンク切れの検出、そのWebページがWebパフォーマンスバジェットにどう関係しているかなどが含まれる。
開発のヒントは、開発者が開発ツール（バンドラー、トランスパイラ、オプティマイザなど）をいかに使用しているかを分析するもので、Babel、TypeScript、Webpack設定の分析が含まれる。
互換性のヒントには、CSSスタイルシートの制限が尊重されているか、ページのCSS、HTML、JavaScriptが非推奨になっていないか、対象とするブラウザでサポートされていない機能を使用していないかなどのチェックが含まれる。
PWAのヒントにはマニフェストの検証が含まれる。アクセシビリティのヒントは、サイトがキーボード経由で使用可能であること、コンテンツに十分なコントラストがあって読みやすいことを確認するのに役立つ。落とし穴のヒントはよくある落とし穴を開発者に警告し、デバッグ時間を節約する（Specify button type、No `createElement` with SVG、Prefixed CSS first、scoped-svg-stylesなどのヒント）。
開発者は適用したいヒントを.hintrcファイルで設定できる。既存のヒントにカスタムヒントを追加することもできる。.
Weil氏の講演にはwebhintoの使い方と設定のライブデモが含まれており、オンラインで公開されている。