ESLint는 위에서create-next-app 명령어를 실행했을때 설치가 이미 되었었는데 설정파일의 내용이 다음과 같다.
{
"extends": "next/core-web-vitals"
}
확장으로 next/core-web-vitals가 추가 된 것을 볼 수 있는데 이는 엄격한 Core Web Vitals rule-set과 ESLint의 NextJS의 기본 설정이 포함되어 있어 ESLint를 처음 설정하는 개발자에게 추천되는 옵션이라고 NextJS 공식문서에서 설명하고 있다.
이제 이 설정파일을 커스텀 하여 ESLint를 세팅하였다.
{
"extends": [
"next/core-web-vitals",
"airbnb",
"airbnb-typescript",
"prettier"
],
"parserOptions": {
"project": "./tsconfig.json"
},
"rules": {
"react/react-in-jsx-scope": "off"
}
}
추가한 확장들을 설명하자면
- airbnb : airbnb사에서 쓰고 있는 ESLint 규칙이 포함되어있는 확장이다. 다음 명령어로 설치할 수 있다.
yarn add eslint-config-airbnb -d
- airbnb-typescript : airbnb 규칙을 typescript에서도 사용하기 위한 확장이다. typescript는 parsing이 필요하기 때문에 @typescript-eslint/eslint-plugin @typescript-eslint/parser 들과 함께 설치 해야 하며 “parserOptions”를 설정해야 한다.
yarn add eslint-config-airbnb-typescript
@typescript-eslint/eslint-plugin@^6.0.0
@typescript-eslint/parser@^6.0.0 -d
- prettier : Prettier과의 충돌을 방지하는 확장이다. Prettier를 따로 사용하고 있기에 설정이 필요하였다. 다음 명령어로 설치할 수 있다.
yarn add eslint-config-prettier -d
또한 “react/react-in-jsx-scope” 규칙을 꺼버린 것을 볼 수 있다. 이는 jsx, tsx 파일에 React를 import하지 않으면 나타나는 에러인데 최신 React나 NextJS에서는 React를 import 하지 않아도 되기 때문에 규칙을 꺼버렸다.
나머지 규칙은 개발을 진행하며 설정하기로 하였다. 규칙 하나하나 회의를 통해 사용할지 말지 결정할 예정이다. 에러가 난다고 그냥 꺼버리면 ESLint를 사용하는 보람이 없으니까..
