eslint 세팅 중 종속성 충돌 에러

새로운 프로젝트를 위해서 eslint를 세팅하고 있는데 종속성 문제가 발생했다. 에러 메세지와 관련 라이브러리의 공식 문서를 잘 읽어서 해결해였다.(뭐든 차분히 읽으면 단서를 찾을 수 있다😂) 우선 내가 설치한 과정은 다음과 같다

1. eslint 설치

npm install --save-dev eslint

처음에는 --save-dev와 --dev의 차이점을 잘 몰랐는데, 이번에 알게 되었다. 요약하자면 다음과 같다.

npm install 라이브러리명 --dev
=> dependencies에 설치

npm install 라이브러리명 -D
npm install 라이브러리명 --save-dev
=> devDependencies에 설치

둘의 가장 큰 차이는 배포때 해당 라이브러리를 사용 여부다.devDependencies에 포함된 라이브러리는 실제 배포할 때 포함되지 않기 때문에 빌드 시간을 줄일 수 있다. 따라서 애플리케이션에 필요한 라이브러리가 아니라면, devDependencies에 설치하는 것이 좋다. 지금 설치하려는 eslint나 prettier와 같은 라이브러리들은 devDependencies로 설치하면 효율적일 것 같다.

2. 관련 eslint 플러그인 설치

eslint와 typescript, prettier를 같이 사용하기 위해서는 플러그인들을 설치해야 한다.나는 다음 플러그인들을 설치해주었다.

eslint-import-resolver-typescript

=> typescript의 import 문과 모듈을 잘 읽도록 돕는 역할을 한다.

@typescript-eslint/eslint-plugin

=> TypeScript 코드에 특화된 규칙을 제공하고, TypeScript의 고유한 특성과 타입 시스템을 고려하여 코드 품질을 개선하는 역할을 한다.

@typescript-eslint/parser

=> TypeScript 코드를 해석하고 분석하여 ESLint 규칙 검사에 사용한다.

eslint-plugin-prettier

=> Prettier와 ESLint를 통합하는 도구로, 코드 포맷팅을 통합하여 코드 스타일 일관성을 유지하도록 도와준다.

eslint-plugin-unused-imports

=> 미사용된 import 문을 감지하고 자동으로 삭제시켜준다.

위 플러그인들은 다음과 같이 개발 환경에만 설치해주었다.

npm install eslint-plugin-unused-imports --save-dev

에러는 이 플러그인들을 설치할 때 발생하였다. 마지막 플로그인인 unused-imports 를 설치하던 와중에 이미 설치된 eslint-plugin 와 종속성이 충돌된다는 에러였다. elsint-parser를 재설치 할때도 같은 에러가 나왔다.

(처음에는 영어라 제대로 읽을 생각을 하지 않았다...ㅠ)

읽어보니 @parser와 @typescript eslint-plugin와 @unused-imports와의 종속성이 문제였다. 삽질을 하다가 eslint-plugin-unused-imports 의 공식문서를 찾아보았다. 공식문서에서 설명한대로 세팅을 하였는데도 에러가 계속 나왔다.
https://github.com/sweepline/eslint-plugin-unused-imports

지금 생각해보면 공식문서를 사용하기 전에 먼저 읽었어야 했다는 생각이 들었다. 에러 메세지를 보니 설치한 parser의 버전과인 @5.62 버전과 unused-imports 플러그인이 호환이 안되는 것 같았다. 그래서 parser를 버전을 지정해서 다시 설치해 주었다. npm uninstall 라이브러리명 을 통해 기존 것을 삭제하고, 다음과 같이 새롭게 설치해주었다.

npm install eslint-plugin-unused-imports@6.0.0 --save-dev

이 외에도 package.json 의 버전을 수정하고 기존의 package-lock.json 을 삭제한뒤에 다시 npm i 로 설치하는 방법이 있다. package.json은 실수하면 곤란하니 이 방법을 쓸 때는 주의해야 한다.

parser의 버전을 6.0.0으로 바꿔서 다시 설치해주었더니 unused-imports를 설치했을 때도 에러가 나지 않았다.

package.json에 eslint에 대해 설치한 정보는 다음과 같다.

느낀점

어떤 에러든 에러 메세지를 읽고 분석하는 것이 1순위이다. 라이브러리를 설치할 때는 다른 사람의 후기보다 공식 문서를 읽는 것이 백배 천배 좋다!(물론 공식문서가 불친절할 경우에는 포스트를 참고하는 것이 좋은 듯 하다. )