husky와 lint-staged를 사용한 코드 품질 관리 자동화

husky? lint-staged?

husky

• husky는 jsonplaceholder와 json-server를 만든 곳으로 알려져있는 typicode에서 제작한 코드 품질 관리 자동화를 돕는 패키지다.
• .git 디렉토리의 특성상 로컬환경의 git hooks를 팀원들과 공유할 수 없는 단점을 보완하여 husky에서는 git hooks를 지원하여 이를 가능하게 해준다.

lint-staged

• lint-staged는 Staging-Area로 Stage된 파일들을 린터로 검사하는 기능을 수행하는 패키지다.

husky + lint-staged = 🚫💩

• husky와 lint-staged 패키지를 조합하여 사용하게되면 협업 과정에서 각 팀원들의 개성 넘치고 규칙 따윈 지키지 않는(?) 코드를 commit 전에 차단시켜서 통일화된 코드 품질을 유지할 수 있게 도와준다.

초기 구성

1. 프로젝트 디렉토리 생성

• 먼저 프로젝트 디렉토리를 만들고 IDE를 실행한다.

mkdir learn-husky
cd learn-husky
code .

2. git 저장소 초기화 & npm 초기화

• git 저장소를 초기화하여 .git 디렉토리를 생성하고 npm을 초기화하여 package.json 파일을 생성한다.

git init
npm init -y

3. prettier와 eslint 패키지 설치

• 코드 품질 관리에 필요한 포맷터와 린터(대표적으로 Prettier와 ESLint)를 개발의존성 패키지로 설치한다.
• 이미 IDE에 관련 익스텐션이 설치되어 있더라도 패키지를 따로 설치해야한다. 익스텐션은 로컬 환경에만 적용이 되므로 협업 시 서로 공유할 수 있는 패키지가 필요하다.

npm i prettier -D
npm i eslint -D

4. prettier와 eslint configuration

• 공식문서를 참고여 configuration file을 생성한다.
  • Prettier Docs
  • ESLint Docs

5. mrm 패키지를 사용하여 husky와 lint-staged 구성 및 .gitignore 파일 생성

• 여러 유용한 코드 구성들을 모아놓은 mrm 패키지를 사용하여 husky와 lint-staged를 구성하고 .gitignore 파일도 생성한다.

npx mrm@latest lint-staged
npx mrm@latest gitignore

동작

• husky와 lint-staged 구성이 완료되었다면, husky 디렉토리 내에 pre-commit 이라는 쉘 스크립트파일이 생성되고 package.json 파일에 lint-staged라는 새로운 항목이 생겼을 것이다.

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

{
  "lint-staged": {
    "*.js": "eslint --cache --fix",
    "*.{js,css,md}": "prettier --write"
}

• lint-staged 항목 안에 명시한 확장자를 가진 파일은 husky의 pre-commit hook이 실행될 때 즉, staging된 파일을 commit 하는 시점에서 lint-staged에 의해 검사가 수행된다.
• 만약 검사 후 에러가 발생한다면 commit이 취소되고 오류 팝업창이 나타나고 --fix 옵션으로 인해 린터가 스스로 Fix할 수 있는 부분은 자동으로 수정이 된다.

Reference

• 커버 이미지 출처 : https://dev.to/shashwatnautiyal/complete-guide-to-eslint-prettier-husky-and-lint-staged-fh9