ESLint Parsing error: ファイルがtsconfigに含まれていない

問題の詳細

TypeScriptプロジェクト（Remix/Cypress環境）でESLintを実行すると以下のエラーが発生します：

Parsing error: ESLint was configured to run on `<tsconfigRootDir>/component/TestComponent.cy.ts` using `parserOptions.project`
However, that TSConfig does not include this file.

このエラーは、ESLintの解析対象ファイルがtsconfig.jsonのinclude/exclude設定に含まれていない場合に発生します。具体的には次のいずれかが原因です：

• ESLintが検証しているファイルがtsconfig.jsonで定義されていない
• parserOptions.tsconfigRootDirの設定が正しくない
• 設定ファイル自体がLint対象に入っている

---

効果的な解決策

✅ ソリューション 1: tsconfigとESLint設定の修正（推奨）

以下2つのファイルを調整し、設定の整合性を確保します。

1. .eslintrc.js の修正:

parserOptions: {
  project: './tsconfig.json',
  tsconfigRootDir: __dirname, // 絶対パス指定を確実にする
},
ignorePatterns: ['.eslintrc.js'], // 設定ファイルを除外

2. tsconfig.json の修正:

{
  "include": [
    "remix.env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "./cypress/**/*.cy.ts" // Cypressテストファイルを明示的に追加
  ],
  "exclude": ["node_modules", "cypress.config.ts"] // node_modules除外必須
}

重要ポイント

• tsconfigRootDir: __dirname：プロジェクトルートを明確に定義
• ignorePatterns：設定ファイルや生成ファイルをLint対象外に
• excludeにnode_modulesを含めるのを忘れずに

---

✅ ソリューション 2: ファイル/ディレクトリの明示的な除外

ESLintに解析させたくないファイルがある場合：

.eslintignoreを使用:

# 設定ファイル除外
.eslintrc.js
*.config.js

# ビルド出力除外
/build/
/dist/
/cypress/screenshots/

# テスト関連除外
jest.config.*
vite.config.ts

or .eslintrc.jsで直接指定:

module.exports = {
  ignorePatterns: [
    '.eslintrc.js',
    '**/*.config.js',
    '/build/**',
    '/generated/**'
  ]
}

---

✅ ソリューション 3: 高度な設定パターン

複雑なプロジェクト構成の場合のアプローチ：

1. テスト用別tsconfigの作成:

{
  "extends": "./tsconfig.json",
  "include": [
    "**/*.cy.ts",
    "**/__tests__/**/*.test.ts"
  ]
}

2. ESLintオーバーライド設定:

module.exports = {
  // 基本設定...
  overrides: [
    {
      files: ['src/**/*.ts'],
      parserOptions: {
        project: './tsconfig.json'
      }
    },
    {
      files: ['**/*.cy.ts', '__tests__/**/*.test.ts'],
      parserOptions: {
        project: './tsconfig.test.json' // テスト用設定を適用
      }
    }
  ]
}

---

よくあるケース別対処法

💻 VSCodeでエラーが残る場合

• .eslintrc.jsにroot: trueを追加
• 設定ファイルがプロジェクトルート直下にあるか確認
• シンボリックリンク使用時は物理パスでプロジェクトを開く

  cd $(pwd -P) # シンボリックリンクを解決

⚠️ 特定ファイルで発生する場合

エラーが発生するファイルをtsconfig.jsonに明示追加：

{
  "include": [
    "src/**/*",
    "cypress/**/*",
    "tailwind.config.ts" // エラー発生ファイルを追加
  ]
}

---

根本原因と予防策

このエラーの本質は 「TypeScriptコンパイラとESLintのファイル範囲不一致」 にあります。予防するには：

1. 設定のバリデーション
   typescript-eslint Trouble Shooting Guideで設定を確認

2. 最小限のinclude/exclude
   ワイルドカード(**/*)多用を避け、必要最小限のディレクトリを指定

3. 設定ファイルの分離
   テスト用・本番用でtsconfigを分割すると管理が容易

注意事項

• parserOptions.projectを完全に削除すると型情報を使ったLintができなくなる
• モノレポ構成では各パッケージのtsconfigRootDirを相対パスで正確に設定

これらの解決策を適用することで、ESLintとTypeScript設定の整合性が取れ、「ファイルがtsconfigに含まれていない」問題は解消されます。設定変更後はエディタの再起動やESLintサーバーの再起動を行いましょう。