[React] ESLint, Prettier 도입하기

이번 글에서는 React + TypeScript 기반 프로젝트에 ESLint와 Prettier을 도입하는 과정을 설명한다. 작업은 IntelliJ IDEA Ultimate 으로 진행하지만, 굳이 IntelliJ 가 아니더라도 콘솔 및 기타 환경에서도 진행이 가능한 정도의 수준이다.

 

React 프로젝트 생성하기

먼저, Yarn 을 활용하여 TypeScript 기반의 React 프로젝트를 'react-eslint-prettier' 라는 이름으로 생성한다. TypeScript 를 사용하지 않더라도 굳이 상관없으나 필자는 TypeScript를 활용한다.

yarn create react-app react-eslint-prettier --template typescript

 

npx 로도 다음과 같이 프로젝트를 생성할 수 있다.

npx create-react-app react-eslint-prettier --typescript

 

IntelliJ에서는 다음과 같이 GUI 기반으로 프로젝트를 생성할 수 있다.

 

1. File > New  > Project...

 

2. JavaScript > React 선택 후 Next

 

3. 프로젝트명 입력, Create TypeScript Project 선택 > Finish

 

ESLint 와 Prettier 가 적용되지 않은 환경에서의 불편함

모든 배움에는 이유가 있어야 한다는 입장이라, ESLint와 Prettier 가 없는 환경에서는 코드 관리가 어떤 식으로 이루어지며, 어떤 단점이 있는지 알아보기로 한다.

 

위에서 설명한 방법대로 프로젝트를 생성하였다면, 일단 ESLint나 Prettier 가 적용되지 않은 상태이다. 이 상태로 src/App.tsx (JS 사용자는 src/App.js) 를 열어 보자. 다음과 같이 기본적인 코드가 작성되어 있다.

 

하나하나 자세히 살펴보면 다음과 같은 문제들이 있다.

• #1 ~ #3 의 import 라인, 그리고 #23, #26 의 Closing 세미콜론이 있다. 자바스크립트와 타입스크립트는 한 줄의 구문이 끝날 때 세미콜론이 필수가 아니기 때문에, 개발자마다 세미콜론을 쓰는 개발자와 쓰지 않는 개발자와 같이 차이가 있다.
• #5, #6 에는 각각 중괄호, 소괄호가 쳐져 있는데, 개발자마다 성향이 다르기 때문에 어떤 개발자는 괄호를 열 때는 항상 개행을 하고, 어떤 개발자는 괄호를 여는 것은 이전 구문에 붙이는 경우와 같은 차이가 있다.
• #9, #11 와 같이 구문이 옆으로 길게 나열되어 있는 경우, 리팩토링을 많이 하는 개발자는 중간에서 끊거나, 속성별로 개행을 해 주는 경우가 매우 많다. #13 ~ #18 의 경우처럼 말이다. 하지만 현재 코드를 보면 #9 는 개행이 되어 있는 반면 #13 ~ #18 에는 개행이 되어 있지 않다는 차이가 있다.
• #1 ~ #3 의 import 라인에는 Quote가 Single Quote 이고, #7 ~ #9, #14 ~ #17 라인에는 Quote 가 Multi Quote 이다. 이 경우 개발자마다 Quote 의 사용 스타일이 다를 수 있다.
• 지금 필자의 IDE는 탭이 2 Spacing 으로 되어 있지만, 다른 개발자의 IDE는 탭이 3 Spacing 혹은 4 Spacing 일 수 있다. 이 경우 코드를 수정하고 Commit 을 하면 나는 코드를 조금 변경했을 뿐인데 Refactor 가 돌면서 모든 탭의 Spacing 을 바꿔버리는 현상이 나타난다. 이렇게 되면 나중에 어느 부분이 수정, 추가되었는지 찾기 굉장히 애를 먹는다.

 

단순히 App.tsx 파일만 봐도 이렇게나 많은 차이점들이 존재한다. 그냥 코딩만 하는 입장에서는

"이게 무슨 문제라고 이런 것까지 잡으면서 시간을 낭비해?"

 

라고 할 수 있지만,

리팩토링을 중요시하고 스타일에 신경을 많이 쓰는 개발자라면 잘 아시겠지만 밖으로 표출하기는 뭐한 굉장한 스트레스를 받는다.

또한, 여러 개발자들이 협업할 때도 크고 작은 문제가 발생할 수 있다.

 

이 것을 개선하기 위해 나온 것이 ESLint 와 Prettier 이다.

 

이제부터 이런 사소한 문제들을 바로잡아 보도록 하자.

 

ESLint, Prettier 설치하기

먼저 Terminal 을 통해 ESLint 와 Prettier 를 설치한다. 공식 가이드에는 DevDependency 로 설치하라고 되어 있지만, 튜토리얼이니 그냥 일반 Dependency 에 설치하겠다.

 

Yarn : 

yarn add prettier eslint-plugin-prettier eslint-config-prettier

 

NPM :

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

 

prettier 외에 2가지 패키지를 추가적으로 설치한다.

• eslint-plugin-prettier : ESLint 와 Prettier 둘다 Code Formatting Library 이기 때문에 중복되는 속성이 있을 수 있는데, 이 라이브러리를 설치하면 중복되는 Formatting Rule 을 모두 필터링해 준다.
• eslint-config-prettier : Prettier 를 ESLint 규칙으로 실행하고, 서로 다른 규칙을 ESLint 에 병합한다. 이로써 ESLint 와 Prettier 의 서로 다른 Formatting Rule 이 충돌하는 것을 방지한다.

 

IntelliJ 에서는 일일이 Terminal 을 돌릴 필요 없이 다음 순서를 따라서 해도 된다.

 

1. Settings 진입 (Ctrl + Alt + S) > npm 검색

 

2. Package List 위에 '+' 버튼 클릭

 

3. Prettier 검색

맨 위에 보이는 eslint-config-prettier, eslint-plugin-prettier, 그리고 하이라이팅된 prettier 을 차례로 좌하단에 보이는 Intstall Package 를 클릭하여 설치하면 된다.

 

정상적으로 설치되면 IntelliJ 에서는 Settings > NPM의 프로젝트 리스트에 다음과 같이 항목들이 추가되며,

기타 툴을 쓰시는 분들은 package.json에 다음과 같이 추가될 것이다.

버전은 시점에 따라 다를 수 있다.

 

 

설정 파일 작성하기

 

이제 설치를 하였으니, 프로젝트에 적용하기 위해 설정해 보자.

ESLint 와 Prettier 을 설치하면, 각 라이브러리가 지원하는 Formatting Rule 을 지정하여 각종 코드 스타일을 세밀하게 관리할 수 있다.

 

우선 ESLint 용 설정 파일인 .eslintrc 를 Project root 폴더에 생성하자. 이때 확장자는 개발자 편의에 따라 .eslintrc.js, .eslintrc.json 등으로 변경하여도 된다.

 

기본적으로 json 포맷을 따른다.

• "extends" : 이미 정의되어 있는 설정을 상속한다.
  • "react-app" : React 어플리케이션용 설정을 가져온다.
  • "plugin:prettier/recommended" : Prettier 에서 권장하는 설정을 가져온다.

 

ESLint 에서는 기본적인 사항만 설정하고, 자세한 설정은 Prettier 에서 진행한다.

마찬가지로 .prettierrc 를 Project root 폴더에 생성하자.

 

IntelliJ 의 경우, .prettierrc 파일을 생성하면 에디터 상단에 'Use code style based on Prettier for this Project?" 라고 물어보며 자동으로 인식을 하는데, Yes 를 클릭하면 프로젝트에 바로 적용된다. 다른 에디터의 경우 별도의 설정이 필요할 수 있으니, 관련 자료를 참조하자.

{
  "semi": false,
  "trailingComma": "all",
  "singleQuote": true,
  "tabWidth": 4,
  "printWidth": 100,
  "arrowParens": "always",
  "bracketSpacing": true,
  "jsxBracketSameLine": true
}

 

• semi : 구문이 끝나는 지점에 세미콜론 사용 여부를 지정한다 (boolean)
• trailingComma : 객체, 배열 등에서 value 가 끝나는 지점에서 자동 Comma 사용 여부를 지정한다 (string)
• singleQuote : SingleQuote 를 사용할지 (true), DoubleQuote 를 사용할지 (false) 지정한다.
• tabWidth : 탭 문자의 스페이스바 개수를 지정한다.
• printWidth : 몇 글자 이상 한 줄에 작성되면 자동 개행할지 지정한다 (number)
• arrowParens : arrow function 등에서 괄호를 생략하고 작성했을 시 자동으로 괄호를 붙일지, 기존처럼 유지할지 지정한다 (boolean)
• bracketSpacing : 중괄호 사이에 공백을 지정한다 (boolean)
• jsxBacketSameLine : JSX 문법을 작성할 때 Bracket 사용 시 줄바꿈 여부를 지정한다 (boolean)

 

 

실제 프로젝트에 적용하기

 

설정 파일을 적용한 후 App.tsx 를 켜 보면, 갑자기 수십 줄의 에러 라인이 나를 반긴다.

ESLint 와 Prettier 에 지정된 규칙에 어긋나는 항목들에 오류 표시를 한 것이다.

 

코드 수정에 대해서는 IDE마다 방법이 다르지만, 우선 모든 IDE에서 오류 라인에 마우스를 올리면 힌팅을 해 준다.

 

"-------" 를 "-------------" 로 바꾸라는 의미인데, 쉽게 말해 탭 사이즈가 2인데 4로 바꾸라는 의미다. 이러한 내용들을 하나하나 다 바꾸고 있기는 귀찮으니 역시 IDE에서 제공하는 단축키가 있다.

 

IntelliJ 에서 제공하는 단축키는 Ctrl + Alt + Shift + P 이다. 해당 파일을 열고 단축키를 누르면, 코드가 일괄적으로 정렬되는 것을 볼 수 있다.

 

 

예외

 

만약 단축키를 통해 코드를 정렬했음에도 ESLint 에서 오류가 발생한다면, eslint 설정 파일에서 extend 한 "plugin:prettier/recommended" 에서 우리가 설정하지 않은 사항이 들어 있어서 오류가 발생할수 있으니, 해당 라인을 삭제해도 된다.

{
  "extends": [
    "react-app"
  ]
}

삭제 후에는 빨간 줄이 안뜰 수 있는데, 어차피 Prettier 설정이 잡혀 있어서 단축키만 실행하면 Prettier 가 알아서 고쳐 주니 걱정할 필요는 없다.