ESLint Prettier TypeScript Next.js lint-staged

협업 할때 Lint 써보셨나요??

우선 이번 인턴과정에서 사수분과 협업을 하면서 기존 프로젝트에 ESLint 나 Prettier가 적용이 되어있지 않아서 처음으로 적용 해보겠습니다.

저희 프로젝트는 React Typescript Next.js 기반 프로젝트여서 관련된 정보들을 찾아보았습니다.

참고1

참고2

prettier과 eslint는 각각
.prettierrc와.eslintrc 파일에서 설정이 가능하다.

• 기본적으로 eslint는 잘못 입력한 문법을 자동으로 수정하기 위해 사용.
• Prettier는 팀원간 코딩 컨벤션을 맞추기 위해 사용

eslint에도 포매팅 기능이 포함되어 있어서 같이 사용하면 충돌 발생

따라서 설치해야하는 패키지
eslint-config-prettier
: eslint에서 prettier와 겹친는 포매팅룰을 삭제한다.