Parsing error: Cannot read file '.../tsconfig.json'.eslint を解消する

VSCode 上で Parsing error: Cannot read file '.../tsconfig.json'.eslint という ESLint エラーに遭遇したので解決策をメモしておく。

環境

• VSCode での ESLint を導入した Next.js 開発
• Docker を使用するため Next.js に関わるソースコードはサブディレクトリに格納されている

.
├── app
│    ├─ Docker
│    │    └─ Dockerfile
│    └─ next-js
│         ├─ src
│         │    ├─ @types
│         │    ├─ components
│         │    ├─ ︙
│         │    └─ pages
│         ├─ ︙
│         └─ tsconfig.json
├── docker-compose.yml
└── README.md

エラーの内容

上記のディレクトリ構造で開発を行うと、TypeScriptファイルの1行目で Parsing error: Cannot read file '.../tsconfig.json'.eslint （...の部分は自分のプロジェクトフォルダまでのパス）というエラーが表示された。

解決策

調べてみると、VSCodeでワークスペースの第一階層に tsconfig.json ファイルがないと上記のようなエラーが出るらしい。

今回の場合だと、tsconfig.json ファイルは、./app/next-js/tsconfig.json にあるため、VSCodeが tsconfig.json を見つけられていないようだ。

解決するには、.vscode/settings.json を作成し、以下の設定を記述する。

  .
+ ├── .vscode
+ │    └─ settigns.js
  ├── app
  │    ├─ Docker
  │    │    └─ Dockerfile
  │    └─ next-js
  │         ├─ src
  │         │    ├─ @types
  │         │    ├─ components
  │         │    ├─ ︙
  │         │    └─ pages
  │         ├─ ︙
  │         └─ tsconfig.json
  ├── docker-compose.yml
  └── README.md

{
  "eslint.workingDirectories": ["./app/next-js"]
}

上記の設定でワークスペース内のどこに tsconfig.json があるのかを VSCode が理解してくれる。

参考

https://stackoverflow.com/questions/64933543/parsing-error-cannot-read-file-tsconfig-json-eslint

https://chaika.hatenablog.com/entry/2020/09/23/083000

その他の解決策

VSCode のデフォルト設定ファイル settings.json に以下の設定を書いておくことで、VSCode がいい感じに tsconfig.json を探してくれるようだ。

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