React Native에서 ESLint Parsing Error 해결

2022. 5. 28.

Issue

parserOptions.project를 설정한 뒤 ESLint Parsing Error가 발생했다.

React Native 프로젝트에서 ESLint 설정을 정리하던 중, .eslintrc.js에 parserOptions.project를 추가해 tsconfig.json을 참조하도록 바꿨다.

"parserOptions": {
  "ecmaFeatures": {
    "jsx": true
  },
  "ecmaVersion": 12,
  "project": "./tsconfig.json"
}

그 뒤 기본 lint 스크립트를 실행하자 아래와 같은 Parsing Error가 발생했다.

$ npm run lint

/${PROJECT_PATH}/${APP_NAME}/.eslintrc.js
  0:0  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

/${PROJECT_PATH}/${APP_NAME}/babel.config.js
  0:0  error  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

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

Cause

TypeScript 프로젝트 기준으로 lint를 돌리는데, 대상에는 JavaScript 설정 파일도 포함돼 있었다.

기본 lint 스크립트는 아래처럼 .js, .jsx, .ts, .tsx 전체를 대상으로 하고 있었다.

"lint": "eslint . --ext .js,.jsx,.ts,.tsx"

문제는 parserOptions.project를 켠 순간부터 @typescript-eslint/parser가 tsconfig.json 기준으로 파일을 해석하려 한다는 점이다.

이번 케이스에서는 아래 설정 파일들이 lint 대상에 포함되어 있었다.

.eslintrc.js
babel.config.js
metro.config.js

이 파일들은 parserOptions.project가 참조하는 tsconfig.json 범위에 포함되지 않았기 때문에, ESLint가 The file does not match your project config 에러를 낸 것이다.

즉 핵심은 TypeScript용 lint 설정을 켰는데, 실제 lint 대상에는 tsconfig.json 범위 밖의 JavaScript 설정 파일까지 포함돼 있었다는 점이었다.

Resolution

lint 대상을 TypeScript 소스 파일로 제한했다.

이 문제를 해결하는 가장 단순한 방법은 lint 대상에서 불필요한 JavaScript 설정 파일을 제외하는 것이었다.

1) TypeScript 파일만 대상으로 제한

"lint": "eslint . --ext .ts,.tsx"

이렇게 하면 .js, .jsx 설정 파일은 lint 대상에서 빠지고, TypeScript 소스만 검사하게 된다.

2) 필요한 경우 `src/`만 대상으로 제한

프로젝트 범위를 더 명확히 하고 싶다면 src/ 디렉토리만 대상으로 제한할 수도 있다.

"lint": "eslint . --ext .ts,.tsx src/"

이번 케이스에서는 실제로 개발하는 TypeScript 소스만 lint 대상으로 잡는 쪽이 더 자연스럽다고 판단했다.

결국 이 문제는 ESLint 자체의 오류라기보다, parserOptions.project를 켠 뒤에도 lint 대상 범위를 이전처럼 전체 프로젝트 기준으로 두고 있었던 설정 문제였다

Notes

1) `parserOptions.project`를 켜면 lint 대상도 같이 봐야 한다

parserOptions.project는 TypeScript 프로젝트 설정을 기준으로 파일을 해석한다.
그래서 lint 대상에 TypeScript 프로젝트 밖의 파일이 섞여 있으면 Parsing Error가 날 수 있다.

2) 설정 파일까지 꼭 lint할 필요는 없다

.eslintrc.js
babel.config.js
metro.config.js

같은 파일은 이번 케이스처럼 TypeScript 프로젝트 설정과 맞지 않을 수 있다.

3) React Native + TypeScript에서 먼저 확인할 것

parserOptions.project가 켜져 있는지
tsconfig.json에 포함된 파일 범위가 무엇인지
lint 스크립트가 .js 설정 파일까지 대상으로 잡고 있는지
필요한 경우 src/만 대상으로 제한하는 것이 더 적절한지

4) 참고

React Native에서 ESLint, Prettier를 프로처럼 사용하기