インラインおよびライブイシュー分析

  • [アーティクル]

ソース コード (.html、、 .cssまたは .js ファイル) の問題は、波状の下線で強調表示されています。 問題を調査し、問題の内容、修正方法、および詳細情報の場所に関する詳細な情報を取得できます。 問題を調べるには、波線の下線が付いているコードをクリックします。

問題を解決する方法と詳細情報を見つける場所を示すコードの一部内で報告されたアクセシビリティの問題

この機能には、Node.js と npm (Node Package Manager) が必要です。 「Visual Studio Code 用 DevTools 拡張機能をインストールする」の「手順 4: Node.js と Node Package Manager (npm) をインストールする」を参照してください。

この機能は既定でオンになっています。[設定] で [Webhint] チェック ボックスがオンになっています。 この機能をオンまたはオフにするには、[アクティビティ バー>] [Microsoft Edge Tools>] を [ターゲット>のその他のアクション] (...) > の右側にマウス ポインターを合わせます。設定を>開く[Webhint] チェック ボックスをオンまたはオフにします。

[設定] の [Webhint] チェックボックス

ファイル内のすべての問題を表示するには、[問題の 表示] をクリックします。

次の問題と以前の問題に移動するための問題とボタンを説明するナビゲーション バーを備えたソース コードの強調表示された問題

下のパネルの [ 問題 ] タブには、現在開いているファイルで DevTools が見つけたすべての問題が一覧表示されます。

Visual Studio Code の下部パネルの [問題] タブに、プロジェクトのファイルで見つかったすべての問題が一覧表示されます。

問題レポートのライブ更新

問題は、コードの編集中にライブで評価されます。 入力すると、見つかった問題とその修正方法に関するフィードバックが得られます。

出力要素で説明されている可能性のある問題

自動クイック修正と問題のフィルター処理

Visual Studio Code 用の Microsoft Edge DevTools 拡張機能には、 クイック修正 機能が含まれています。 クイック修正を使用すると、現在のプロジェクトのニーズに合わせて拡張機能のエラー 報告をカスタマイズできます。

問題がある要素にカーソルを合わせると、使用可能なクイック修正があることを示す電球 (電球アイコン) アイコンが表示されます。

プロトコル固有の href 属性が問題として強調表示されたアンカー要素(その上に波線と電球アイコン)

電球アイコンをクリックすると、オプションの一覧が表示されます。 たとえば、プロトコル相対 URL を持つリンクを追加した場合、次の クイック修正 リストから選択できます。

エラーが表示されたアンカー要素の横に開いたクイック修正パネルには、いくつかのクイック修正オプションが用意されています

問題の解決または問題としての報告を停止するために使用する クイック修正 を選択できます。

  • "no-protocol-relative-urls" の問題を修正 する - 不足している URL プレフィックス https:// をリンクに追加します。

  • このプロジェクトで "no-protocol-relative-urls" ヒントを無効にする - プロジェクト フォルダーに構成ファイルを作成 .hintrc し (まだ存在しない場合)、このプロジェクトのこの問題を報告しないように拡張機能に指示します。

  • このプロジェクトの .hintrc の編集 - 構成ファイルを .hintrc 開き、拡張機能のエラー レポートをカスタマイズできるように構成ファイルを編集できます。

関連項目