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 アクセシビリティリンターは VS Code マーケットプレイスから直接インストールできます。しかし、いくつかの組織では、インストールプロセスに影響を与えるセキュリティ制限があります：
- VS Code マーケットプレイスからダウンロードできません。
- エクステンションは、初めて起動する際、必要なバイナリコンポーネントをダウンロードできず、このコンポーネントはファイルのリントを行うものであり、オペレーティングシステムごとに異なります。
組織にこれらの制限がある場合、DequeのAgoraソフトウェアリポジトリにアクセスするためにAxe DevTools Linterのライセンスが必要です。その後、拡張機能の.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バージョンと同一）、初回実行時にお使いのオペレーティングシステム用のバイナリコンポーネントをダウンロードする必要があります |
vscode-axe-linter-bundle-<version>.vsix |
https://agora.dequecloud.com/ui/native/linter-bin/vscode-linter-bundle/ | すべてのオペレーティングシステム用の拡張機能とバイナリコンポーネントを含む完全なパッケージ |
拡張機能のすべてのバージョンを含むディレクトリビューアが表示されます。例えば：
通常は最新バージョンを選び、.vsixファイルを見つけるまでサブディレクトリをたどります。
インストール手順
- Deque Agoraリポジトリからお好みの
.vsixパッケージをダウンロードしてください。 - VS Codeで拡張機能パネルを開きます。
- オーバーフローメニュー（...）をクリックします。
- メニューの最後のオプションとしてVSIXファイルからインストール...を選択してください。
- ダウンロードした
.vsixファイルを選択してください。
トラブルシューティング
VS Codeの拡張機能は診断情報をAxe Linter出力チャネルに書き込みます。このログには、プラットフォームの詳細、拡張機能のバージョン、バイナリコンポーネントのダウンロード状況などの拡張機能の起動活動が記録されており、拡張機能が正しく起動または初期化されない場合に問題を診断する上で非常に役立ちます。
ログを見るには：
- 出力パネル（表示 > 出力）を開きます。
- パネルの右上隅にあるチャネルドロップダウンからAxe Linterを選択します。
拡張機能の問題についてDequeサポートに連絡する場合、このログの内容を含めると、チームが問題を診断するのに役立ちます。
次のステップ
このドキュメントサイトには、さまざまなAxe DevTools Linterの提供についての情報が含まれています。詳細についてはAxe DevTools Linterについてをご覧ください。