husky로 prettier, eslint 적용 자동화하기

가끔 팀원 중 한 명이 prettier 적용을 하지 않고 push하는 일이 있었다. 그래서 이런 실수를 아예 방지하기 위해 husky를 이용해 prettier, eslint 적용을 자동화하기로 했다.

 

1) husky 설치

yarn add -D husky

// or

npm install --save-dev husky

devDependency로 husky를 설치한다. husky v5에서 잠깐 라이선스 문제가 있었지만, 지금은 괜찮다. 최신 버전으로 설치해도 된다.

 

1-1) script 설정 후 실행

//package.json
"scripts": {
  ...
    "prepare": "cd .. && husky install frontend/.husky && cd frontend",
    "prepare:mac": "cd .. && husky install frontend/.husky && chmod +x frontend/.husky/* && git update-index --chmod=+x && cd frontend"
  },

명령어를 설정해 준 다음 실행해 준다.

- window의 경우, prepare

- mac의 경우, prepare:mac

❗루트 폴더가 아닌 frontend 폴더에만 husky를 설치했기 때문에  "cd .. && frontend/ .husky && cd frontend" 경로 설정을 따로 해주었다. 만약 루트 폴더에서 바로 husky를 설치했다면 "prepare": "husky install"만 해줘도 된다. 

yarn prepare 
yarn prepare:mac

// or

npm run prepare
npm run prepare:mac

 

2) lint-staged 설치

yarn add -D lint-staged

// or

npm install --save-dev lint-staged

 

3) package.json에 적용할 명령어와 확장자 설정

//package.json
...
"lint-staged": {
    "**/*.{js,jsx,ts,tsx,md,json}": [
      "eslint --fix",
      "prettier --write"
    ]
}

lint-staged라는 명령어가 실행될 때, js,jsx,ts,tsx,md,json 확장자를 가진 파일들에 eslint와 prettier 적용을 해주는 코드이다.

4) .husky 폴더 안 pre-commit 파일에 명령어 입력

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

cd frontend
yarn lint-staged

// or

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

cd frontend
npx lint-staged

여기서도 역시 루트 폴더가 아닌 frontend 폴더 안에  package.json과 prettierrc를 사용하기 때문에 frontend 폴더로 이동하는 cd frontend 명령어를 넣어줬다.