ESLintで「Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.」のエラーが出たら

December 17, 2021

この記事を見ているということは、こんなエラーが出ましたか？

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

原因と対応方法 #

以下の GitHub のコメントが参考になります。

If you are receiving this error message it means the following:

You are attempting to lint a file (with type aware linting) which is not included in one of the tsconfigs you have passed to parserOptions.project.

Solutions:

review the tsconfigs you pass to us to ensure the file is matched by one of the include globs.

if the file is not already in a tsconfig because it’s in a weird place (like a root “tools” folder or something), then you can simply create a new tsconfig (I usually recommend calling it tsconfig.eslint.json) and include the file there.

use eslint overrides to disable type-aware linting for those files (I.e. Unset parserOptions.project).

use an .eslintingore file to ignore the file from linting.

https://github.com/typescript-eslint/typescript-eslint/issues/1723#issuecomment-626766041

さっくりと解説をします。

エラーが出ている原因は tsconfig で含まれていないファイルに対して ESLint でリンティングしようとしているためです。

解決策として以下の４つがあります。

tsconfig の include にそのファイルを指定し、対象に含めるようにしてください。
対象のファイルが他のソースコードと別のディレクトリにあるために tsconfig に含まれていないという場合は、別の tsconfig を作成して、そこの include に指定し、対象に含めるようにしてください。
エラーの原因となっているファイルについてはリンティングを行わないように eslintrc の設定を変更してください。
エラーの原因となっているファイルを eslintignore に記載し、リンティングの対象外となるようにしてください。

対応例 #

リンティング対象外として良い場合 #

例えば babel.config.js や jest.config.js といった設定ファイルに対して今回のエラーが出ているのであれば、それらはリンティングの対象に含めなくても良いと思うので、4 番の対応（eslintignore する）にしましょう。

リンティング対象にしたいがビルド対象外にしたい場合 #

例えばテストファイルの類のような、リンティングは行いたいが、アプリとしてのビルド対象には含めないものであれば、2 番の対応（別の tsconfig を作成）にしましょう。tsconfig.eslint.json のような名称で作るのが良いです。

リンティング対象およびビルド対象にしたい場合 #

1 番の対応（tsconfig の include にそのファイルを指定）しましょう。

補足 #

tsconfig の include で明示的に含まれていなくとも、include 対象になっている他のファイルがそのファイルを import している場合、TypeScript は自動でそのファイルを include 対象に含みます。つまりこの場合 include の欄に記載がなくとも、TypeScript は内部でちゃんとそれを include しているため、今回のエラーは起きません。

When no file imports it, it is never added to the dependency graph, because it’s not in the tsconfig.

When another component imports it, typescript automatically expands the dependency graph to include that file (thereby working around the fact that your file isn’t included in your tsconfig).

https://github.com/typescript-eslint/typescript-eslint/issues/1723#issuecomment-620748808