하나의 프로젝트에서 협업을 할 때에 코드 컨벤션은 더욱 중요시된다. 그래서 서로의 코드를 쉽게 보기 위한 노력의 일환으로 코딩 스타일을 일치시키기 위한 Linter, Code Formatting 도구를 사용한다.
이번 글에서는 이러한 도구들을 왜 사용하는지 목적을 되짚고, 목적을 제대로 충족하기 위한 가이드들을 정리했다.
(원티드 프리온보딩 수업을 듣고 정리한 글입니다. )
ESLint, Prettier 알아보기
ESLint란?
- 코드의 일관성과 버그 방지를 위해 만들어진 툴이다.
- 코드의 문법 교정과 더불어 가벼운 코드 스타일링도 제공한다.
- 설정 커스터마이징을 통해 규칙 커스텀이 가능하다.
- 규칙에 정의된 문법에 어긋난 코드에 대해서는 경고를 띄워준다.
Prettier란?
- 코드의 일관된 스타일을 위한 툴이다.
- 포맷팅 규칙 커스텀이 가능하다.
- 규칙에 정의된 스타일대로 코드의 자동 수정을 지원한다.
왜 쓰지?
- 생산성을 높이기 위해서는 자동화를 잘 해야한다.
- 사람이하면 휴먼 오류가 발생하기 때문에 컴퓨터에게 시키는데, 코드 포맷팅의 경우 ESLint, Prettier에게 시키는 것이다.
생산성을 높여보기
목적 정리하기
- 자동화 도구를 사용하는 목적은 팀원간의 원활한 협업이다. 그러니 내 컴퓨터의 코드 에디터에서 설정된 ESLint, Prettier를 사용하면 안된다. 툴을 세팅하고 스크립트가 자동 실행되게 만들어 팀원간 공유해야한다.
- 커밋전에 formatting이 되도록 자동화할 것이다.
- 푸쉬전에 lint하도록 자동화 할 것이다.
설치하기
npm i eslint-config-prettier --save-dev: eslint에서 스타일링 관련 기능을 끄는 명령어이다. 스타일링은 전적으로 prettier에 위임하고 eslint에서 문법 교정만 담당하도록 역할을 나누어 충돌을 방지한다.npm install prettier --save-dev
설정하기
- Prettier는 프로젝트의 루트 디렉토리에
.prettierrc.확장자파일을 통해서 설정할 수 있다. - 다양한 설정 옵션은 링크에서 확인 가능하다.
// .prettierrc.js module.exports = { printWidth: 100, // printWidth default 80 => 100 으로 변경 singleQuote: true, // "" => '' arrowParens: 'avoid', // arrow function parameter가 하나일 경우 괄호 생략 }; - ESLint 설정은 언어별, 환경별로 세팅을 해야하는 부분이 많아 다소 복잡하다.
- 처음부터 모든 규칙을 설정하는 것 보다는, 필요하다고 판단되면 config를 확장해 나가는 방법이 효율적이다.
- 다양한 옵션 보기
{ "env": { "es6": true }, "extends": ["./.eslintrc.base.js"], "rules": { "no-var": "warn" // var 금지 } }
실행 명령어 등록하기
- 자동화를 위해서는 실행 명령어를 스크립트로 관리하여 자동 실행되도록 해야한다.
npx prettier --write --cache .: 현재 폴더에서 prettier의 실행 결과를 파일에 저장한다. 변경된 사항이 없다면 캐싱된 내용을 가져와서 반복 검사를 수행하지 않는다.npx eslint --cache .
위 명령어를 매번 실행하는 것은 번거로우니 스크립트에 등록한다.
scripts : {
‘format’ : ‘prettier —write —cache .’,
'lint' : ‘eslint —wirte —cache .’,
}이제 npm format && lint으로 코드 포맷팅이 자동화된다.
Husky 알아보기
Husky란?
- 위에서
npm format && lint으로 코드 포맷팅의 자동화를 만들었지만, 사람이 입력하는 과정이 필요한만큼 휴먼 오류는 여전히 존재한다. - husky는 git hook을 쉽게 사용할 수 있도록 지원해주는 도구로, 특정 상황에서 자동 실행되어 포맷팅을 강제화할 수 있다.
- git hook을 개별적으로 설치하고 설정하는 일은 까다로운데, husky는 npm install 과정에서 사전 세팅된 git hook을 적용켜준다.
사용 목적 정리하기
- commit된 코드는 무조건 formatting이 완료되도록 할 것이다.
- push된 코드는 무조건 eslint가 pass된 상태이도록 만들 것이다.
설치하기
npm install husky --save-dev
세팅하기
npx husky install
- 세팅은 처음 세팅하는 사람만 하면 된다.
- husky에 등록된 hook을 실제 .git에 적용시키기 위한 스크립트이다.
postinstall를 스크립트에 등록한다.
- postinstall은 예약어로 install후에 자동 실행되는 스크립트이다.
- npm install은 모두가 반드시 거치는 단계이기 때문에, 휴먼 오류를 없앨 수 있다.
// package.json
{
"scripts": {
"postinstall": "husky install"
},
}실행 명령어 등록하기
npx husky add .husky/pre-commit "npm run format && git add ."
- pre-commit으로 커밋 전에 명령어가 실행될 수 있도록 한다.
- 코드 스타일링은 기존 코드를 자동 수정해주기 때문에, formmating 후 다시 저장해야할 필요가 있다.
- 따라서
git add .명령어를 추가하여 자동화한다.
npx husky add .husky/pre-push "npm run lint"
- pre-push로 푸쉬 전에 lint 검사를 강제화한다.
- lint를 통과하지 못한 커밋은 푸쉬되지 못한다.
불편함을 개선하기
- 위의 세팅으로 프로젝트를 진행하던 중, 커밋을 하면 모든 변경사항이 스테이징에 올라가고 함께 커밋되는 불편함을 발견하였다.
- 원인이 되는 코드는
.husky/pre-commit파일의git add .이다. - 모든 변경사항을 커밋하는 대신,
lint-staged패키지를 이용하여 스테이징된 사항만 커밋할 수 있다.
패키지 설치하기
$ npm install lint-staged --save-dev스크립트 수정하기
// package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"postinstall": "husky install",
// husky에서 pre-commit으로 format을 실행하면 "lint-staged"스크립트를 실행한다.
"format": "lint-staged",
"lint": "eslint --cache ."
},
// 스테이징된 변경사항에 대해 아래의 작업을 수행한다.
"lint-staged": {
// .ts, .tsx 확장자 파일을 대상으로 한다.
"*.{ts,tsx}": [
"prettier --cache --write ."
]
},Husky 파일 수정하기
- 변경전
모든 변경사항을 스테이징에 올리는git add .로 인해 커밋의 불편함이 존재했다.#!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh" npm run format && git add . - 변경후
원인이 되었던 명령어를 제거하고, 스크립트에서 스테이징된 변경사항만 prettier가 실행되도록 변경하였다.#!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh" npm run format
