무턱대고 ESLint 최신버전 설치하면 고생하는 이유 v9.2.0

date

May 8, 2024

slug

eslint-920-is-not-ready

status

Published

tags

frontend

React

ESLint

summary

무슨 라이브러리든 최신버전만 쓰면 고생한다.

type

Post

심심할 때 마다 자주 사용하는 기능이다. (신입만 가능한 스킬!)

현재 패키지에서 사용중인 모든 라이브러리들의 최신 버전을 확인해주고 무려 자동으로 업그레이드해준다!

어느날 내 코드의 모든 린팅을 담당하는 eslint가 9.2.0 버전까지 왔다는 사실에 놀라며 일단 바로 업그레이드를 해봤다.

근데 에러 로그를 자세히 보니 .eslint.rc에서 extends가 지원되지 않은 것 같다.

분석에 들어가보기로 했다.

일단 메뉴얼도 보지 않은 내 책임도 있으니 공식문서를 확인하러 갔다.

항목별 eslint 9.x 버전에서 바뀐 것들을 프론트엔드 개발자 입장에서 설명해보겠다.

1. `.eslint.rc` 파일은 `eslint.config.js`로 대체됨

flat config라는 새로운 config 포맷이 등장했다. eslintrc를 쓰면 따로 커스텀 경로를 설정하지 않는 이상 config파일이 없는 것으로 간주한다.

2. flat config 등장 (from v8.23.0)

위에 말했듯 eslint.config.js라는 새로운 설정 컨벤션에서 생긴 포맷은 아래와 같이 생겼다.

languageOptions 때문에 새로운 config가 이해가 안될텐데 아래 코드에서 use case를 확인해보자

바뀐 점을 요약해보자면

기본적으로 배열이다. 한 json에 한 rule, plugin, files(파일타입), language옵션(파서)등을 설정할 수 있다.

파서옵션과 기존 자주 사용하던 env 설정은 languageOptions로 통합됐다.

plugin들, typescript-eslint, eslint-plugin-import는 import해서 사용한다. (기존보다 config 자체의 오류 가능성을 해결한다.

jsx, tsx에는 hook rule, ts rule을, ts에는 ts rule만, 일정 프로젝트에서는 rule 제거 등 여러 rule을 세분화하여 관리할 수 있다는 면에서 상당히 고민한 흔적이 본인다.

3. react에서 eslint 9.2.0은 쓰지 말라.

eslint-plugin-react, eslint-plugin-react-hooks은 프론트엔드 개발자가 사랑하는 (없으면 죽는) 플러그인이다. react plugin flat config 사용법 자체를 수소문 끝에 찾아봤다. (구글 검색시 ‘어쩌고 어쩌고 플러그인 flat config’라고 치면 원하는 결과가 많이 나온다.