ESlint와 Prettier

자동화된 툴을 사용하는 것은 프로젝트에 있어서 가장 중요하다! 서로 다른 형태의 코딩 스타일은 가독성이 떨어지기 때문이다.
코딩 스타일을 통일 시키기 위해서는 ESlint, Prettier와 같은 도구들이 필요하다.

ESlint와 Prettier

ESlint는 문법을 , Prettier는 코드포멧을 담당한다.

예를 들면 var를 사용하지 못하게 하는 것은 ESlint, 쌍따옴표를 홑따옴표로 바꿀 수 있게 하는 것이 Prettier라고 할 수 있다.

이때까지는 그냥 vscode내의 extension에서 Prettier와 ESlint를 다운받아서 내 컴퓨터 내에서만 적용되게 해서 사용했다.

사용 방법

1. eslint

   • npm install eslint --save-dev
   • CRA를 사용하는 경우 ESlint는 이미 내장되어 있기 때문에 Prettier만 설치해도 된다

2. prettier

   • npm install prettier --save-dev

3. eslint-config-prettier

   • eslint에는 일부 prettier와 충돌되는 formatting을 포함하고 있기 때문에 관련 rule을 모두 해제해야한다.
   • npm install eslint-config-prettier --save-dev

4. 루트 디렉토리에 .prettierrc.js .eslintrc 파일을 추가 하여 각 파일에 필요한 rule을 작성한다.