CRA에 ESLint와 Prettier 추가하기

ESLint는 자바스크립트 문법이나 code convention을 검사하는 도구(linting utility)이다. 자바스크립트는 정적 컴파일을 하지 않는 인터프리터 언어다. 따라서 사소한 타이핑 실수를 알아채지 못한 채 잘못된 프로그램을 배포할 수 있다. 요즘의 library, framework들은 기본적으로 이런 검사 도구가 세팅되어있기 때문에 걱정할 필요가 없다. ESLit로 코드를 검사하고 잠재적인 문제들에 대해 경고를 해준다.

이번에는 Editor에도 설치해서 개발단계에서부터 코드를 검사할 수 있도록 하고, ESLint에 추가적인 룰을 적용해보려고 한다.

JavaScript Style Guide 중에서 Airbnb 것이 제일 강력하기 때문에 학생들에게 코드리뷰를 할 때 Airbnb JavaScript Style Guide를 기준으로 코드를 작성하라고 했었는데, 초반엔 잘 따라하다가 바빠지면 점점 코드 스타일이 많이 망가지곤 했다.

처음부터 ESLint, Prettier를 사용하면 손에 익숙해지지 않을 것 같아서 따로 알려주지 않다가, 이번 기업 협업 때 ESLint 피드백이 들어와서 가르치는게 좋겠다고 생각했다. 자동으로 format을 잡아주더라도, 계속 눈으로 보면 익숙해질 것이다.

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

CRA에 ESLint 추가하기

원래 ESLint를 사용하려면 프로젝트에 install 해야하지만, CRA는 기본적으로 ESLint 세팅이 되어있다. ESLint의 결과는 dev server를 띄운 터미널에도 계속 나오고, 브라우저 console창에도 계속 나온다. 하지만 rule을 무시했다고 error가 뜨는 것은 아니며, code style도 다 지적해주는 것이 아니므로 개발하는데는 아무 지장이 없다.

Editor에 ESLint와 Prettier 플러그인을 설치하여 개발단계에서 룰을 적용할 수 있도록 바꿔보겠다. 늘상 그렇지만 공식 문서에 너무 잘 나와있다.

플러그인 설치

1. ESLint 플러그인 설치 - VSCode

Code - Preference - Extentions 에서 ESLint 검색 후 설치

2. ESLint 플러그인 설치 - Westorm

wip

ESLint 세팅

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

{
  "extends": "react-app"
}

이제 터미널에서만 보였던 warning이 Editor에도 뜰 것이다.

이미 packages.json에도 있는 rule이지만, Editor가 ESLint를 알아차리려면 해당 파일이 꼭 추가 되어야한다.

CRA에 Prettier 추가하기

ESLint만으로 부족하다. 혼자 개발하면 몰라도, 여러 명이 같이 일하고 있기 때문에 다른 사람의 코드를 보고 짜증나지 않으려면 서로 format을 맞추어 동일한 code style을 유지해야한다. 그걸 Prettier가 알아서 format을 맞춰주겠다는 것이고, Editor에 플러그인을 추가하여 강제로(자동으로) formatting을 하려고 한다.

플러그인 설치

1. Prettier 플러그인 설치 - VSCode

Code - Preference - Extentions 에서 Prettier 검색 후 설치

2. Prettier 플러그인 설치 - Westorm

wip

Prettier 설치

Prettier을 사용하려면 install을 해야한다. 그리고 eslint rule에 따라 formatting도 추가or삭제할 것이므로 eslint관련 패키지도 추가한다.

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

그리고 .eslintrc.json를 업데이트 해줍니다.

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

Prettier 세팅

1. VSCode

Code - Preference - Settings

우측 상단에 {} 를 눌러주어 json파일 형태로 바꾼다. 그리고 아래 6개 프로퍼티를 추가한다.

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

위의 설정을 추가하면 나의 코드에(캡쳐는 진짜 내 코드 아님ㅎㅎ) 온통 빨간색으로 밑줄이 쳐진다. 뭐가 문제인지 mouse를 올려보면 된다.

이 상태에서, 파일 수정하고 ctrl+s하면 자동으로 format 되어 저장된다. 아래는 엔터 한 번 치고 저장해본 결과이다. 아무리 자동저장일지라도 계속 눈에 익히고, 예쁜 code style로 코드를 작성할 수 있도록 노력하자!!!

2. Webstorm

wip