CRA에 ESLint와 Prettier 적용하기

React의 코드는 최신 자바스크립트 코드로 작성하는 것이 일반적이지만, 아직 모든 브라우저에서 이를 지원해 주고 있지 않다. 따라서 웹팩이나 바벨을 설치하고 설정해야 하는데 페이스북에서 웹팩 없이 CRA를 제공해 주고 있다. 

CRA(Create-React-App)는 ES6 자바스크립트를 브라우저가 이해할 수 있는 ES5 코드로 변경해주는 툴이다. 

 

리액트 초기 세팅 하기(2020/04/14 - React 초기 설치 명령어)

 

그럼 다시 ESLint와 Prettier가 무엇인지 알아보자. 

 

ESLint는 syntax나 code를 검사하는 도구(linting utiliy)이다. 특히 자바스크립트는 정적 컴파일을 하지 않는 인터프리터 언어이기에, 사소한 타이핑 실수로 잘못된 프로그램을 배포할 수 있다. 따라서 수시로 코드를 검사하고 잠재적인 문제들에 대해 경고해주는 ESLint를 사용하는 것을 권장한다. 

 

자바스크립트 스타일 가이드 중에서 Airbnb가 가장 깐깐하게 보기 때문에 처음에 Airbnb의 코드 스타일을 따라하는 것이 도움이 될 것이다. (참고: Airbnb JavaScript Style Guide) 

 

Prettier는 code formatter로 설정한 ESLint 룰에 따라 자동으로 format을 잡아준다. 

 

-

 

CRA(프로젝트)에서 ESLint, Prettier 설치하기

1. VSCode의 Extensions(ctrl+shift+x)를 클릭해서 ESLint와 Pretter - Code formatter를 설치

2. Prettier 세팅 'Manage(좌측하단 톱니바퀴) - Setting - open setting json(우측 상단 아이콘)'에 아래 프로퍼티 추가

"editor.formatOnSave": true,
"[javascript]": {
  "editor.formatOnSave": false
},
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"prettier.disableLanguages": ["js"],
"files.autoSave": "onFocusChange"

3. ESLint rule에 따라 Prettier의 formatting이 따라가는지에 대한 패키지 추가

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

4. 프로젝트 root에 .eslintrc.json이라는 파일을 추가하고 아래 내용 추가

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