Visual Studio での JavaScript のリンティング

Visual Studio での JavaScript と TypeScript のリンティングには、ESLint が利用されます。 ESLint を初めて使用する場合は、まずそのドキュメントを確認することができます。

リンティングのサポートの有効化

Visual Studio 2022 以降のバージョンでリンティングのサポートを有効にするには、[ツール] > [オプション] > [テキスト エディター] > [JavaScript/TypeScript] > [Lint 処理] で [ESLint の有効化] 設定を有効にします。

オプション ページでは、リンティングしたいファイルのセットを変更することもできます。 既定では、リンティングできるすべてのファイル拡張子 (.js、.jsx、.ts、.tsx、.vue、.html) がリンティングされます。 Vue ファイルと HTML ファイルをリンティングするには、HTML LSP ベースのエディターを有効にする必要があります。 それぞれの設定は、[ツール] > [オプション] > [環境] > [プレビュー機能] にあります。

スタンドアロン React プロジェクト テンプレートなど、一部のプロジェクト タイプでこれらのオプションをオーバーライドできます。 これらのプロジェクトで、[ツール] > [オプション] ページからプロジェクトのプロパティを使って設定をオーバーライドできます。

ESLint 依存関係のインストール

リンティングを有効にしたら、必要な依存関係をインストールする必要があります。 依存関係には、ESLint npm パッケージと、プロジェクトに適用できるその他のプラグインが含まれます。 このパッケージは、リンティングを有効にする各プロジェクトにローカルにインストールすることも、npm install -g eslint を使ってグローバルにインストールすることもできます。 ただし、プラグインと共有可能な構成は常にローカルにインストールする必要があるため、グローバル インストールはお勧めしません。

Visual Studio 2022 バージョン 17.7 Preview 2 以降では、[ツール] > [オプション] > [テキスト エディター] > [JavaScript または TypeScript] > [リンティング] の [ESLint Path] (ESLint パス) 設定を使って、ESLint の読み込み元のディレクトリを指定することもできます。 これは、ESLint がグローバルにインストールされていて、対応するパスを C:\Program Files\nodejs\node_modules に設定する可能性がある場合に便利です。

リンティングするファイルによっては、他の ESLint プラグインが必要になる場合があります。 たとえば、TypeScript ESLint が必要な場合があります。これにより、TypeScript コードに対して ESLint を実行できるようになり、追加の型情報に固有のルールが含まれています。

ESLint が有効になっていても ESLint npm パッケージが見つからない場合は、金色のバーが表示され、ローカルの npm 開発依存関係として ESLint をインストールできます。

同様に、.eslintrc ファイルが見つからない場合は、現在のプロジェクトに適用できるプラグインをインストールする構成ウィザードを実行するための金色のバーが表示されます。

リンティング ルールと自動修正の無効化

特定の行またはファイルでリンティング エラーを無効にすることができます。 エラーを無効にするには、クイック アクションの電球メニューを使います。

次の図は、選択したコード行のリンティング エラーを無効にした場合の結果を示しています。

さらに、コードの自動修正アクションを使うと、自動修正を適用してそれぞれのリンティング エラーに対処できます。

トラブルシューティング

[出力] ウィンドウで [ESLint Language Extension] (ESLint 言語拡張機能) ペインを開くと、問題を説明しているかもしれないエラー メッセージやその他のログを確認できます。