ESLintの「Parsing error: Cannot read file '.../tsconfig.json'」エラーの解決方法

問題の概要

TypeScriptプロジェクトでESLintを使用している際に、以下のエラーが発生することがあります：

Parsing error: Cannot read file '.../tsconfig.json'.eslint

このエラーは、.tsファイル（特にsrcディレクトリ内のファイル）で発生し、ファイル名が赤く表示されます。しかし、重要な点として、コンパイルと実行自体は正常に動作するという特徴があります。

根本的な原因

このエラーの主な原因は、@typescript-eslint/parserがtsconfig.jsonファイルを正しい位置で見つけられないことです。ESLintが実行されている作業ディレクトリとtsconfig.jsonが存在するディレクトリが異なる場合に発生します。

主な解決方法

方法1: tsconfigRootDirの設定（推奨）

.eslintrc.jsファイルのparserOptionsにtsconfigRootDirを追加します：

module.exports = {
  // ... 他の設定 ...
  parserOptions: {
    project: "tsconfig.json",
    tsconfigRootDir: __dirname,  // 追加
    sourceType: "module",
  },
  // ... 他の設定 ...
}

tsconfigRootDir: __dirnameを設定することで、パーサーが設定ファイルを.eslintrc.jsファイルからの相対パスで解決するようになります。

方法2: projectをtrueに設定（最新の推奨方法）

typescript-eslint v5.52.0以降では、projectオプションにtrueを設定できます：

module.exports = {
  // ... 他の設定 ...
  parserOptions: {
    project: true,  // 各ファイルに最も近いtsconfig.jsonを使用
    tsconfigRootDir: __dirname,
    sourceType: "module",
  },
  // ... 他の設定 ...
}

この設定により、各ソースファイルはそのディレクトリから見て最も近いtsconfig.jsonを使用するようになり、モノリポなどの複雑なプロジェクト構造でも適切に動作します。

TIP

tsconfigRootDirはプロジェクトのルートディレクトリ（通常は__dirname）に設定することを推奨します。これにより、ルートのtsconfig.jsonファイルが誤って削除または名前変更された場合に、親ディレクトリの上位のtsconfig.jsonファイルを検索しなくなります。

方法3: プロジェクト構造に応じた明示的なパス指定

モノリポ構成など、特殊なプロジェクト構造の場合は、明示的にパスを指定します：

module.exports = {
  // ... 他の設定 ...
  parserOptions: {
    project: "./backend/tsconfig.json",  // 明示的なパス指定
    tsconfigRootDir: __dirname,
    sourceType: "module",
  },
  // ... 他の設定 ...
}

フラットコンフィグ（ESLint v9）での設定

ESLint v9のフラットコンフィグを使用している場合（eslint.config.mjs）：

import tseslint from 'typescript-eslint'

export default tseslint.config(
  // ... 他の設定 ...
  {
    languageOptions: {
      parserOptions: {
        project: 'tsconfig.json',
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
);

TypeScript ESLint v8での最新アプローチ

2025年更新: typescript-eslint v8ではprojectServiceオプションが安定化され、projectオプションよりも推奨されるようになりました。

詳細はTyped Linting with Project Serviceのアナウンスを参照してください。

VS Code固有の設定

作業ディレクトリの設定

VS Codeを使用している場合、.vscode/settings.jsonに以下を追加することで問題を解決できる場合があります：

{
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ]
}

または、特定のディレクトリを明示的に指定：

{
  "eslint.workingDirectories": ["src"]
}

WSL環境での注意点

WSL 2を介してTypeScriptプロジェクトを操作している場合、Remote - WSL拡張機能のインストールが必要な場合があります。

その他のヒント

1. VS Codeの再起動: 単純にVS Codeを再起ートするだけで解決する場合があります
2. 正しいワークスペースの選択: プロジェクトフォルダを直接開くことを確認してください。親フォルダを開くと設定が正しく適用されない場合があります
3. IntelliJ/WebStorm: マルチモジュールプロジェクトでは、ESLint設定で手動設定を選択し、正しい作業ディレクトリとESLintパッケージのパスを指定する必要がある場合があります

関連エラーと対処法

以下のようなエラーが表示される場合：

error  Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: .eslintrc.js.
The file must be included in at least one of the projects provided

これは、ESLint設定ファイル自体がtsconfig.jsonのインクルードパスに含まれていないことを示しています。公式のトラブルシューティングガイドを参照してください。

まとめ

ESLintの「Cannot read file 'tsconfig.json'」エラーは、主にパスの解決問題が原因です。最新のtypescript-eslintではproject: trueとtsconfigRootDir: __dirnameの組み合わせを使用することを推奨します。環境に応じて、VS Codeの設定調整やモノリポ対応の明示的なパス指定も効果的です。

INFO

今回の例ではFirebase CLIで作成されたNode.jsプロジェクトを対象としていますが、これらの解決策はAngular、Ionic、AdonisJSなどの他のフレームワークでも同様に適用できます。