発生している状況プロジェクトを開くと、コードが不自然なほど綺麗に見えることに気づきます。赤い波線が表示されず、いつものリンターの警告もどこにも見当たりません。出力パネルを確認(ドロップダウンから「ESLint」を選択)すると、原因が見つかります:
Failed to load plugin. Cannot find module 'eslint'
このエラーは通常、ESLint拡張機能がeslintパッケージを見つけられないときに発生します。ターミナルではコマンドが動作していても、VS Codeの拡張機能がnode_modules内やグローバル環境にあるバイナリを見つけるのに苦労することがよくあります。その結果、ビルドスクリプトは正常に実行されるのに、エディタ上ではスタイル違反が無視されてしまう状態になります。
エラーが発生する理由VS CodeのESLint拡張機能は、必ずしもターミナルと同じ環境を共有しているわけではありません。シェルはシステムのPATHを使用しますが、拡張機能は特にワークスペースのルートにあるローカルなインストール先を探します。モノレポ(monorepo)で作業している場合や、npm installを忘れた場合、あるいはNVMでNodeのバージョンを切り替えたばかりの場合、拡張機能はパスを見失ってしまいます。
クイック修正:ESLintをローカルにインストールする現代のほとんどのプロジェクトでは、ESLintをローカルの開発用依存関係(development dependency)として必要とします。グローバル版がインストールされていても、VS Codeの拡張機能はチーム全体でバージョンを統一するためにローカルのnode_modulesを優先します。このローカルパッケージが欠けていることが、これらエラーの約80%の原因です。
プロジェクトのルートで、適切なコマンドを実行してください:
# For npm users
npm install eslint --save-dev
# For yarn users
yarn add eslint --dev
# For pnpm users
pnpm add -D eslint
40MBから50MBほどの依存関係のダウンロードが完了したら、ウィンドウを再読み込みしてください。Ctrl+Shift+P(Macの場合はCmd+Shift+P)を押し、「Developer: Reload Window(開発者: ウィンドウの再読み込み)」と入力して、拡張機能サーバーをリセットします。
恒久的な対策1:モノレポの作業ディレクトリを設定するLerna、Nx、Turborepoなどで管理されているモノレポでは、標準設定がうまく機能しないことがよくあります。package.jsonが/packages/ui/にあるのに、VS Codeでルートフォルダを開いている場合、拡張機能は間違った場所を探してしまいます。拡張機能は最上位レベルにnode_modulesがあることを期待しているからです。
.vscode/settings.jsonでプロジェクト構造を定義することで、これを修正できます:
{
"eslint.workingDirectories": [
{ "mode": "auto" }
]
}
もしautoモードでサブフォルダが検出されない場合は、以下のように明示的にリストアップして拡張機能を誘導します:
{
"eslint.workingDirectories": [
"./apps/web",
"./apps/api",
"./packages/shared"
]
}
恒久的な対策2:Nodeのパスを合わせる拡張機能が、プロジェクトの依存関係が含まれていないシステムデフォルトのNodeバージョンを使用しようとしている可能性があります。これは、asdfやnvmなどのバージョンマネージャーを使用している場合に一般的です。拡張機能が/usr/bin/nodeを参照しているのに、プロジェクトがv18.15.0を必要としている場合、モジュールは見つかりません。
ターミナルでwhich node(macOS/Linux)またはwhere node(Windows)と入力して、アクティブなNodeのパスを確認してください。次に、VS Codeに使用する実行ファイルを正確に伝えます:
{
"eslint.nodePath": "/Users/username/.nvm/versions/node/v18.15.0/bin/node"
}
注意:このパスをハードコーディングするのは最終手段です。通常は、シェルの環境変数がVS Codeに正しくエクスポートされていることを確認する方が良いでしょう。
恒久的な対策3:ターミナルから起動するGUIのショートカットやドックからVS Codeを起動すると、環境変数が失われることがあります。NVMを使用している場合、拡張機能が開始される前にシェルがNodeのパスを初期化していない可能性があります。これにより、拡張機能が空の環境を探してしまい、「module not found」エラーが発生します。
- VS Codeのすべてのインスタンスを閉じます。- ターミナルを開き、プロジェクトフォルダに
cdで移動します。- 正しいNodeバージョンがアクティブであることを確認します(例:nvm use 18)。-code .と入力してエディタを起動します。この方法により、VS Codeはアクティブなターミナルセッションから環境変数を強制的に継承します。これはパスの競合を解決するのに非常に効果的な方法です。
修正を確認する方法単に波線を探すだけでなく、内部ログをチェックして修正を確認しましょう。以下の手順に従ってください:
- 任意の
.jsまたは.tsファイルを開きます。- 表示 > 出力に移動します。- 右側のドロップダウンメニューからESLintを選択します。-ESLint server is runningというメッセージを探します。手動でテストするには、ファイルにconst x = 1;を追加してください。no-unused-varsルールが有効であれば、すぐに黄色の警告が表示されるはずです。これにより、拡張機能がESLintモジュールと正常に通信していることが確認できます。

