협업을 위한 ESLint, Prettier 세팅하기

본 게시글은 CRA로 만든 프로젝트에 eslint와 prettier를 어떻게 같이 적용 시키는지에 대한 글입니다.

이번에 팀 프로젝트를 진행하게 되었는데, 협업을 위한 컨벤션의 필요성은 느끼지만 협업 세팅을 아무도 해본 적이 없다보니 프로젝트를 시작하기 전 단계부터 난관에 봉착하게 되었습니다. 관련하여 많은 블로그 게시글이 있었지만 우리의 프로젝트를 위해 정확히 어떤 플러그인을 설치해야 하고 또 설정을 어떻게 바꾸어야 하는 지 파악하려면 공부가 필요했습니다. 이제 그 내용을 정리해보려 합니다.

용어 정리

Lint, Linter란

소스코드를 분석하여 문법적인 오류나 스타일적인 오류, 적절하지 않은 구조 등에 표시를 달아주는 행위이고, Linter란 Lint의 동작을 도와주는 도구를 말합니다.

Formatter란

프로젝트를 진행하며 소스코드를 작성할 때, 정해진 스타일 가이드라인을 따를 수 있도록 변환해주는 도구입니다.

Linter와 Formater를 잘 설정해둔다면 소스 코드를 원하는 문법 스타일로 자동으로 변경하고, 오류를 자동으로 수정하는 등 협업에 있어 아주 유용하고 빠질 수 없는 도구 중 하나 입니다.

ESLint

eslint vsc extension이 설치되어있지 않다면 먼저 설치해주세요!
ESLint는 자바스크립트에서 문법적 에러를 표시해주는 대표적인 lint입니다.
리액트 프로젝트에서 eslint를 활용하려면 다음 세 가지 플러그인을 설치하고 우리만의 configuration을 만들어 주어야 합니다.

eslint
eslint-plugin-react // 리액트에 대한 규칙을 eslint에 추가하는 플러그인
eslint-plugin-react-hooks // 리액트 훅에 대한 규칙을 eslint에 추가하는 플러그인

하지만 CRA 도구로 리액트 프로젝트를 생성하였다면 이미 이것들이 react-script의 dependency로 담겨있기 때문에 설치할 필요가 없습니다.
그러면 다음 단계로 eslint에 대한 configuration을 만들 차례입니다. 그런데 package.json 파일을 들여다보면 eslint의 configuration도 이미 설정되어있다는 사실을 알 수 있습니다.

{
"eslintConfig": {
	"extends": [
		"react-app",
		"react-app.jest"
   ]
}

extends라는 블럭에 두 개의 configuration이 있습니다. 저희는 루트 폴더에 .eslintrc.json파일을 새로 만들고 이 extends 블럭을 잘라내서 붙여 넣겠습니다.

(.eslintrc.json)

{
	"extends": [
		"react-app",
		"react-app.jest"
    ]
}

package.json파일에 있던 eslint configuration을 다른 파일로 옮긴 이유는 나중에 이 configuration을 수정하면서 package.json 파일을 지저분하게 만들지 않기 위함입니다.
extends는 추가한 플러그인에서 사용할 규칙을 설정합니다. 이런 식으로, 플로그인을 설치하였다고 하여도 사용할 규칙을 추가해주어야 적용이 됩니다. configuration의 extends를 살펴보면 "react-app"과 "react-app/jest가 들어있습니다. 문서에는 이 두가지가 반드시 extends에 담겨있어야 한다고 명시되어 있습니다.

지금까지 CRA 프로젝트에서 eslint의 기본적인 설정을 어떻게 하는지 알아보았습니다.

Prettier

Prettier란 정해진 규칙에 따라 자동으로 코드 스타일을 정리 해주는 도구입니다.

CRA 프로젝트에서 prettier를 적용하려면 설치해야 합니다.

npm install prettier --save-dev --save-exact

--save-dev 옵션은 개발 환경에서만 필요한 모듈이니 production을 build할 때는 포함 시키지 말아달라는 뜻의 명령어입니다.
--save-exact옵션으로 ( ^ , ~ )를 사용하는 대신 정확한 버전으로 설치합니다. 이 옵션을 붙이는 이유는 버전이 달라지면서 생기는 스타일의 변화에 대응하기 위함입니다.

다음 단계로는 configuration을 만들어 주어야 합니다. 설정을 추가할 .prettierrc.json파일과 특정 파일을 prettier 포맷팅 규칙에서 제외시켜주는 .prettierignore파일을 생성하겠습니다. 후자의 파일에는 node_modules 같은 폴더를 담길 수 있습니다.

(.prettierignore)

/node_modules

prettier를 사용하기 전에 아직 문제가 하나 남았는데요, 바로 eslint와 prettier의 충돌입니다. eslint는 코드의 정확성을 체크하는데, 코드의 스타일적인 부분도 포함이 되어 있고 prettier는 코드의 스타일을 formatting하기 때문에 충돌이 발생합니다.
고로 eslint configuration에서 코드의 스타일적인 부분에 대한 규칙을 disable해야 합니다. 이러한 일을 도와주는 패키지가 바로 eslint-config-prettier입니다.

npm install eslint-config-prettier --save-dev

플러그인을 사용하기 위해서는 extends에 적용해주어야 합니다.

(.eslintrc.json)

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

여기서 중요한 포인트는 해당 플러그인을 가장 마지막 값으로 넣어주는 것입니다. 그래야 다른 규칙들을 덮어 씌워서(overriding) 잘 적용이 되기 때문입니다. 스타일링과 관련된 eslint의 모든 규칙을 disable하게 만들어 주었으므로 이제 prettier를 사용할 준비가 되었습니다.

npx prettier --write .

터미널에 다음 명령어를 적어주면 prettier 설정 파일에 작성한 규칙에 따라 node_modules를 제외한 폴더 내의 모든 파일을 format해줄 겁니다.
만약 컨벤션에서 쌍 따옴표를 쓰지 않고 홑 따옴표를 사용하기로 정하였다면 prettier로 바꿔줄 수 있습니다.

(.prettierrc.json)

{
	"singleQuote": true
}

이제 App.js 파일을 열고 npx prettier --write . 명령어를 입력해보면 홑 따옴표로 바뀐 모습을 확인할 수 있습니다.

리액트에서 문자열 형태의 props들은 이러한 설정에 영향을 받지 않는 것으로 알고 있습니다.

이번에는 다시 eslint로 넘어가서, 모든 문의 마지막에 세미콜론을 강제해보겠습니다.

(.eslintrc.json)

{
	"extends": ["react-app", "react-app/jest", "prettier"],
	"rules": {
		"semi": "warn" // "warn", "error" 등의 값으로 error level을 변경해줄 수 있습니다.
	}
}

rules라는 블럭에 다음과 같이 작성하고 에러 레벨도 지정해주었습니다. 이제 세미콜론을 깜빡할 때마다 eslint가 경고할 것입니다.

입력창에 물결표시는 eslint extension의 기능입니다. 이 eslint는 vscode 에디터에 적용해서 사용하기 때문에 라이브러리와 extension이 모두 설치와 세팅이 되어있어야 합니다. prettier extension에서도 많은 기능을 제공합니다.

Q. 이미 prettier extension으로 VSCode Setting에서 prettier를 설정해놓았는데 어쩌죠?
-> 적용 우선 순위가 다릅니다. 만약 프로젝트에 .prettierrc파일이 있다면 VSCode Settings의 설정은 무시되고, .prettierrc 파일로 룰이 적용됩니다.

Format on Save

코드 내에서 lint와 prettier rule에 맞지 않는 코드 상태가 있을 때, 매번 경고 사항을 수정하고 명령어로 formatting해주는 작업은 피곤합니다. 그러므로 저장시 알아서 수정해주는 기능에 대해 알아보겠습니다.

VSCode 상단 메뉴 view -> command palette 에서 Open Settings.json(JSON)을 선택하면 Settings 설정이 JSON 형식으로 나옵니다. 여기서 자동 저장 기능을 설정하는 두 가지 옵션을 설정해 주겠습니다.

editor.codeActionsOnSave

"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},

코드 단에서 eslint rule에 의해 error로 판단되는 부분들을 lint rule에 맞게 수정해주는 설정입니다.

editor.formatOnSave

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

save할 때 VSCode Extension으로 설정된 prettier 환경에 맞게 코드를 수정해주는 옵션입니다.

App.js

스타일 컨벤션 예시

저희 프로젝트에서 사용할 eslint, prettier 컨벤션입니다. 입맛에 맞게 설정하실 수 있도록 다른 플러그인도 함께 소개하겠습니다.

eslint 플러그인 소개

npm install eslint-config-airbnb-base --save-dev
npm install eslint-config-naver  --save-dev

• eslint-config-airbnb-base: airbnb사의 코딩스타일
• eslint-config-naver: 네이버 자바스크립트 코딩컨벤션

에어비앤비와 네이버는 대표적인 코딩 컨벤션입니다. 에어비앤비는 규칙이 세부적인 부분까지 아주 잘 짜여있어 코드를 강제하기 좋습니다. 네이버는 에어비앤비의 규칙을 빌려서 커스텀하여 사용하고 있습니다. 저희 팀은 자바스크립트에 대한 지식이 부족하고, 배워가는 과정이기 때문에 조금 더 간편하게 구성되어 있는 네이버 스타일 가이드를 따르기로 결정했습니다.

스타일 컨벤션 예시

(.eslintrc.json)
{
	"extends": ["react-app", "react-app/jest", "naver" "prettier"],
	"rules": {
		'no-console': 1
	}
}

• extends 부분에는 확장 설정을 넣어줍니다. naver사의 코딩 스타일을 따르며 prettier을 반영하도록 설정했습니다.
• rules에는 extends와 plugins에 대한 세부 설정을 변경하는 코드를 넣을 수 있습니다.. 값을 0으로 주면 에러 검출을 하지 않고, 1로 주면 경고, 2로 주면 에러를 표시합니다.

{
  "printWidth": 80,
  "singleQuote": false,
  "jsxSingleQuote": false,
  "tabWidth": 2,
  "semi": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "always"
}

• printWidth: 80 - 선호되는 한 줄의 길이
• singleQuote: false - 홑따옴표가 아닌 쌍따옴표를 사용
• jsxSingleQuote: false - JSX에서 쌍 따옴표를 사용합니다.
• tabWidth: 2 - 탭을 할 경우 2 스페이스
• semi: true - statement 마지막에 세미콜론을 찍음
• trailingComma: 'all' - 여러줄로 나뉘었을 때는 쉼표를 사용
• bracketSpacing: true - 중괄호 양옆에 한 칸 공백을 추가합니다.
• arrowParens: 'always' - 화살표 함수에서 괄호 사용 의무화
• useTabs: false - 탭을 사용하지 않고 스페이스를 사용

참고

• https://eslint.org/docs/latest/user-guide/
• https://prettier.io/docs/en/index.html
• https://www.youtube.com/watch?v=xinJSYiOB6Q
• https://kimdabin.tistory.com/entry/Reactjs-ESLint%EC%99%80-Prettier%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-React-%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%95-VSCode
• https://helloinyong.tistory.com/325