VS Code 用 Axe Linter エクステンションの使用
VS Code でのエクステンションのインストールと使用に関する情報
VS Code のための Axe DevTools Linter 拡張機能を使用すると、VS Code や Cursor や Windsurf などの AI IDE を含む VS Code 互換のエディター内で、コードのアクセシビリティ問題をチェックできます。React (JSX)、React Native、Angular、Vue、HTML、Markdown で一般的なアクセシビリティの欠陥を確認できます。
エクステンションの取得
通常、VS Code エクステンションマーケットプレイスから拡張機能をダウンロードします。インストールボタンをクリックすると、拡張機能がダウンロードされ、VS Codeを開いて拡張機能をインストールする許可を求められます。
VSCodium、CursorやWindsurfなどのAI IDE、または他のVS Code互換のエディタを使用している場合は、Open VSX Registryから拡張機能をインストールできます。
拡張機能をダウンロードおよびインストールする他の方法については、制限された環境におけるインストールをご覧ください。
使用の概要
拡張機能はVS Code内でアクセシビリティエラーを赤い波線でハイライトし、エラーを示すツールチップを提供します。さらに、下の問題ペイン（有効にされている場合）は、以下に示すようにエラーのリストを表示します。
ツールチップと問題ペインの情報には、指定されたアクセシビリティエラーに関する詳細情報を得るためのDeque Universityへのリンクが含まれています。表示された例では、コード例にhtml要素のlang属性が欠けており、それについてはDeque Universityで説明されています：html-has-lang。
設定
エクステンションを設定する必要はありませんが、設定ファイルを使用して動作を変更できます。詳細については、次を参照してください：
- Axe DevTools Linterの設定オプションの参照については、Axe DevTools Linter の設定をご覧ください。
- 拡張機能をカスタムコンポーネントに対してリントするための設定情報は、VS Code または JetBrains IDEs 用 Axe アクセシビリティリントによるカスタムコンポーネントのリントをご覧ください。
アクセシビリティルールのサポート
プラグインがアクセシビリティエラーを検出するために使用するルールに関する詳細は、アクセシビリティルールをご覧ください。
制限された環境におけるインストール
ほとんどの場合、Axe DevTools Linter 拡張機能を VS Code Marketplace または Open VSX Registry から直接インストールできます。ただし、一部の組織には、これらのレジストリから直接拡張機能をインストールすることをブロックするセキュリティ制限があります。
拡張パッケージは自己完結型です: ファイルをリントするコンポーネントはパッケージに含まれており、最初の実行時に何かをダウンロードすることはありません。これは、ダウンロードした.vsix ファイルから、制限された環境にインストールできることを意味します。以下のいずれかのソースから利用可能です：
- VS Code Marketplace または Open VSX（推奨）。 どちらかのレジストリにアクセスできるマシンから、拡張機能のページで
.vsixをダウンロードし（Marketplaceでは、アイテムページの リソース セクションにある 拡張機能をダウンロード リンクを使用）、制限されたマシンに転送してください。 - Deque の Agora ソフトウェアリポジトリ。 どちらのレジストリにもアクセスできない場合、Axe DevTools Linter のライセンスをお持ちであれば、代わりに Agora から
.vsixをダウンロードできます。
Agora アカウントについてのサポートが必要ですか？
- Deque の担当者に連絡してください
- サポートデスクを訪問してください。
- helpdesk@deque.comにメールを送信してください。
Agora でのインストールパッケージについて
Deque は、Agora ソフトウェアリポジトリで拡張機能を提供しています：
| 拡張機能名 | Agora上の場所 | 説明 |
|---|---|---|
vscode-axe-linter-<version>.vsix |
https://agora.dequecloud.com/ui/native/linter-bin/vscode-linter/ | VS Code Marketplace バージョンと同一の拡張パッケージ |
上記の場所では、ディレクトリビューアがすべての利用可能なバージョンをリストします。最新バージョンを選択し、.vsix ファイルを見つけるまでサブディレクトリを掘り下げてください。
インストール手順
- 上記の説明されたソースのいずれかから
.vsixパッケージをダウンロードしてください。 - VS Codeで拡張機能パネルを開きます。
- オーバーフローメニュー（...）をクリックします。
- メニューの最後のオプションとしてVSIXファイルからインストール...を選択してください。
- ダウンロードした
.vsixファイルを選択してください。
トラブルシューティング
VS Code 拡張機能は、Axe Linter 出力チャンネルに診断情報を書き込みます。このログは、拡張機能の起動時の活動、プラットフォームの詳細や拡張機能のバージョンを記録し、拡張機能が正しく開始または初期化されない場合の問題を診断するのに最も役立ちます。
ログを見るには：
- 出力パネル（表示 > 出力）を開きます。
- パネルの右上隅にあるチャネルドロップダウンからAxe Linterを選択します。
拡張機能の問題についてDequeサポートに連絡する場合、このログの内容を含めると、チームが問題を診断するのに役立ちます。
次のステップ
このドキュメントサイトには、さまざまなAxe DevTools Linterの提供についての情報が含まれています。詳細についてはAxe DevTools Linterについてをご覧ください。