ESLint는 js 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드분석 도구입니다. 그러나, js는 Linter가 존재하지 않습니다. 왜냐하면 js는 별도의 컴파일 과정이 없고, Node나 Browser에서 바로 실행되기 때문입니다. 결론은 ESLint 같은 Linting 도구를 사용하면 됩니다.

(Linting: 특정 스타일 규칙을 준수하지 않는 문제가 있는 소스코드를 찾는데 사용되는 방식)

✔️Prettier 란?

Prettier은 VSCode 익스텐션 중에 코드를 정렬해 주는 Code Formatter 중 하나이다. 설정한 ESLint 룰에 따라 Prettier가 자동으로 format을 잡아준다.

✔️ CRA에 ESLint 추가하기

1. 플러그인 설치

2. ESLint 세팅 프로젝트 root에 .eslintrc.json 라는 이름의 파일을 추가하고 아래의 내용을 추가한다.

   {
    "extends": "react-app"
   }

✔️CRA에 Prettier 추가하기

1. 플러그인 설치 VSCode에서 Prettier 플러그인 설치

2. Prettier 설치

   npm i prettier eslint-config-prettier eslint-plugin-prettier -D

   그리고 .eslintrc.json 의 코드를 다음과 같이 업데이트

   {
    "extends": ["react-app", "plugin:prettier/recommended"]
   }

3. Prettier 설치 VSCode - Code - Preference - Settings

   우측 상단 노란색으로 표시해놓은 문서모양을 눌러 json파일 형태로 바꾼다.
   ![](https://images.velog.io/images/jeou_3/post/5a754e6e-7a18-4c0a-bd4d-a379080ddb83/image.png)
   

여기까지 잘 진행되었다면 문제가 있는 코드에는 빨간색으로 밑줄이 생기고 커서를 올리면 무슨 오류인지 나오게 된다. 문제를 확인, 수정하고 저장하면 자동으로 format이 되어 저장이 된다.