CRA에 ESLint와 Prettier 적용하기

CRA에는 기본적으로 ESLint가 포함되어 있다. 그래서 terminal에도 본인다.
ESLint는 JavaScript 문법이나 Code convetion을 검사하는 도구이고, Prettier는 실제로 코드를 formatting해주는 도구이다. 따라서, 설정한 ESLint 룰에 따라 실제 코드를 Prettier가 바꿔주는 것이다.
이 글은 VSCode가 기준이다.

1. .eslintrc 파일을 생성
   자신의 저장소 root에 .eslintrc 파일을 생성한다. 이 작업이 끝나면 컴포넌트들의 파일에서 기본적인 경고나 에러가 보인다.
   

   {
     "extends": "react-app"
   }
   

2. VSCode Extensions 탭에서 Prettier 설치
   
3. Prettier 를 ESLint 연동
   

   yarn add --dev prettier-eslint
   

   Code -> Preferences -> Settings -> 맨 위 {} 선택
   

   {
     "editor.formatOnSave": true,
     "javascript.format.enable": false,
     "prettier.eslintIntegration": true
   }
   

4. ESLint 룰 설정
   나는 "를 '로 변환하고 싶은 게 가장 큰 이유였다. 내 코드에서 쌍따옴표와 홑따옴표를 섞어서 사용하고 있었기 때문이었다.
   

   "rules" {
     "quotes": ["error", "single", { "avoidEscape": true }],
     "indent": ["error", 2]
   }
   

이렇게 파일을 수정한 뒤에 쌍따옴표가 있거나 룰에 어긋나는 파일에서 Ctrl + s를 눌러 저장을 하면 룰에 맞게 파일이 수정된다.
사실 여기까지는 indentation을 2로 주고, 홑따옴표로 수정하는 것밖에 없는데, 리액트에서 코딩 스타일로 airbnb를 많이 선호하고, 인기도 있고, 보기 좋아 보인다(?)고 한다.
ESLint로 airbnb를 사용하려면 아래와 같이 수정하면 된다.

1. package 설치

   yarn add --dev eslint-config-airbnb
   

2. .eslintrc 파일 수정

   "extends": "airbnb",
   "plugins": ["react", "jsx-a11y", "import"]
   

airbnb로 코딩 스타일을 맞추려다 모든 파일에 빨간줄이 심하게 그어져 있어서 포기했다… 나중에 시간될 때, 천천히 맞춰보거나 아님 내 코딩 스타일대로(?) 한 번 적용시켜 봐야겠다.

마무리

airbnb로 수정하는 도중에 App.js에서 사용하는 document에 빨간줄이 생기기도 하고, img 태그에 alt를 추가해야 하고, Pure Component로 바꾸라고 하기도 하고… 뭔 이상한 에러들까지 생겼다. 내가 참고했던 url이다…

• 절대경로
• export-default
• document