새로 바뀐 eslint config 적용하기

eslint flat config 설정하기

새로운 프로젝트가 시작됐다. 

새로운 프로젝트는 늘 새롭고 짜릿하다..... ^ㅅ^....

.

.

이번 프로젝트는 React와 Typscript를 선택했다. 

간단한 어드민 페이지라서 큰 기능이 많이 없었기 때문이다.

기본 세팅을 하는데 

늘 시간이 많이 걸리는 정체구간이 있는데...

바로 lint 설정을 하는 구간이다. 그리고 세트로 따라오는 검색어가 eslint와 prettier이다. 

난 효율적으로 코딩하고 싶을 뿐인데, 이거 설정해주는 시간이 쓸데없이 많이 드는 느낌이라 좀 성가시다. 

구글에서 찾아보면 거의 모든 아티클들이 eslint와 prettier를 세트로 알려준다. 물론, 세트로 쓰면 효율적이고 보기 좋은 것은 맞다. 하지만 나처럼 캐주얼한 프로젝트를 진행하는 사람에게는 '투머치'하다는 생각이 늘 있었다. 패키지도 많이 깔아야되고, '서로 충돌하지 않게 방지하는 패키지'까지 막 깔아줘야되고...뭐그리 복잡한가 늘 생각이 든다. 

이전 프로젝트들에서도 eslint로만 써도 충분했기에, 이번에도 eslint로만 개발해보기로 결정. 

>> eslint와 prettire의 차이점은 이전 아티클을 참조해주세용

그래서 이번 프로젝트도 eslint만 설정하기로 했다.

그런데 이번에 설치한 vite에서는 새로운 eslint 라이브러리 버전과 config 파일을 발견할 수 있었다. 그래서 그런지 config 파일부터 약간씩 설정이 달라져있었다. (오늘의 삽질의 주제였다...)

아무리 구글링을 해봐도 딱맞는 아티클을 찿지 못하구, AI로도 해결하지 못했다. 약간의 삽질을 하다가, 결국 공식문서를 통해 해결할 수 있었다. 역시 공식문서가 최고다!

프로젝트를 만들고 eslint 설정했던 것까지 기록을 남겨본다.

1. 프로젝트 생성

npm create vite@latest

 > React, Typescript 선택

2. 처음 설치 후 package.json 모습

여기서 eslint-plugin-react-refresh는 나중에 제대로 알고 설치하고 싶어서 일단 지웠다. 

그리고 eslint-plugin-react를 추가로 깔았다.

여기서 eslint와 관련있는 것들은

eslint, eslint-plugin-react, eslint-plugin-react-hooks, typescript-eslint 

이렇게 4가지로 볼 수 있다.

3. .eslintrc.json 파일은 이제 없어졌다. eslint.config.js로 대체됨

이걸 몰라서 꽤 애를 먹었다. 최신 버전의 eslint에서는(현재 버전 9.9.0) 새로운 포맷의 config로 대체되었던 것이다. 이걸 flat config라고 부른다. 이것 때문에 꽤 여러 문제가 있었던 것 같은데, 지금은 해결이 된 모양이다. 특히 eslint-plugin-react와 eslint-plugin-react-hooks 관련해서 에러가 있었던 모양이다. 이 블로그 글을 참고해보자.

그래서인지 처음 eslint.config.js 파일에 샘플로 어떻게 쓰라고 보여주고 있다. 처음 상태의 코드는 다음과 같이 되어 있었다. 

4. typescript-eslint의 공식문서부터 확인해봤다.

일단 react는 제쳐두고, typescript-eslint의 공식문서부터 확인해보았다. 

https://typescript-eslint.io/packages/typescript-eslint

결국, 여기에 해답이 있었다. 내가 flat config가 뭔지도 모르고 헤맬때 여기서 보고 정리가 되었다. 흑흑.

일단, typescript-eslint를 쓰면, 기존에 쓰던 아래의 두 라이브러리를 삭제해도 된다. 이미 typescript-eslint에 모두 dependency로 포함되어 있다고 명시하고 있다. 즉 이제 typesctip관련 eslint는 typescript-eslint 이거 하나만 깔면 된다는 얘기다! 그리고 이건 이미 vite-react 프로젝트를 만들때 기본으로 포함되어 있다. 

그리고 위에 내가 캡쳐한 eslint.config.js 파일을 보면 typescript-eslint를 import 한 tseslint에 config를 추가하는 걸 볼 수 있다.

공식문서에도 다음과 같이 나와 있다. 

5. React 관련 eslint 플러그인을 설치

eslint-plugin-react-hooks는 원래 설치되어 있어서, eslint-plugin-react를 설치해주었다.

6. 최종 eslint.config.js

최종 모습은 이렇게 구성해두었다. 세부적인 rules들은 첨삭을 더 해야된다. 일단 기본적인 것만 두고, 세미콜론과 indent 관련한 것만 추가했다. 

7. 결론 (?)

갑자기 너무 결론인가;;;;; 

어쨌든 내 설명이 공식 문서보다 자세할 순 없기에, 공식 문서를 꼼꼼히 읽어보는 것을 추천한다. 

중요한 것은,

1. eslint config 파일이 이제 새로운 형식으로 완전히 바뀌었다는 것. (flat config). 블로그 글 중에 'eslintrc.json'로 설명하는 글이 있다면 거르면 된다.

2. typescript 관련 eslint는 이제 typescript-eslint 만 깔면 된다는 것.

3. typescript-eslint의 공식문서와, eslint-plugin-react의 공식문서를 잘 읽어봐야한다는 것! :-)