[Next.js] eslint 초기설정

 

프로젝트 초기세팅 시 eslint와 함께 깔아주어야 하는 것들이 몇가지 있다.

이번 기회에 내가 뭘 설치해서 쓰고있는 건지 정리하고 넘어가야겠다는 생각을 했다.

 

 

eslint는 문법적 오류를 잡아주고, prettier는 코드컨벤션을 통일시켜준다.

하지만 eslint에는 포맷팅 기능이 포함되어있어서, eslint와 prettier를 함께 쓰면 충돌이 발생할 수 있다.

 

 

eslint-config-next

next.js의 린팅 룰

 

eslint-plugin-react

리액트의 린팅 룰

 

eslint-config-prettier

eslint에서 prettier와 겹치는 포매팅룰을 삭제

 

eslint-plugin-prettier

eslint에 prettier의 포매팅 기능을 추가

 

 

@typescript-eslint/parser

eslint의 기본파서를 타입스크립트용 파서로 대신하도록 함 (설치 안하면 airbnb peer-dependency 설치 오류)

 

 

eslint-config-airbnb

에어비앤비에서 제공하는 린트 규칙.

여기에는 몇 가지 peer-dependency들이 같이 따라붙는다(함께 깔아줘야 함)

 

eslint-plugin-import

ES6+ import/export 문법의 린팅을 지원하고, 파일 경로와 import 이름의 오타를 예방

 

eslint-plugin-react

상단에 나와있음

 

eslint-plugin-react-hooks

react hooks API에 기반한 hook 관련 룰

 

eslint-plugin-jsx-a11y

JSX의 정적 평가를 수행하여 React 앱의 접근성 문제를 찾아냄

 

 

---

 

dependencies와 devDependencies는 뭐가 다를까?

설치할 때 --save -D 옵션을 주면 devDependencies에 설치된다.

 

 

dependencies : 애플리케이션 동작과 관련있는 라이브러리들 (배포할 때 포함)

devDependencies : 애플리케이션 동작과 직접적인 연관은 없지만, 이름 그대로 개발할 때 필요한 라이브러리들 (배포할 때 미포함)

 

 

eslint 관련 패키지들은 devDependencies에 설치해주는 것이 맞겠다.