(husky) Husky와 Lint-staged를 이용한 Lint 자동화

Husky

Husky란 eslint나 prettier와 같은 설정을 자동화를 통해 특정 상황에서 무조건 적용이 되도록 도와주는 도구입니다.
아무리 eslint, prettier와 같은 규칙을 설정해도 작업자가 사용을 하지 않으면 소용이 없습니다 🥲

// package.json

{
  "scripts": {
    "postinstall": "husky install"
  }
}

우리는 지금부터 husky를 적용해서 다음 과정을 자동화 할 것입니다.

1. commit 전에 prettier formatting이 잘 적용 되어있는지 검사

2. push 전에 eslint 규칙이 적용 되었는지 검사

• pass 되었을 때만 push 하도록 함

Husky의 역할

• git hook 역할
  • git에서 특정 이벤트 발생하기 전, 후로 특정 hook 동작을 실행할 수 있게 합니다. (ex. commit, push)
• git hook 설정은 까다로우며 모든 팀원들이 사전에 repo를 클론받고 메뉴얼하게 사전 과정을 수행해야지만 hook이 실행됨을 보장할 수 있습니다.
  • 실수로라도 사전 과정을 시행하지 않는다면 hook이 실행되지 않습니다.
  • 해결법은? husky
    • husky를 통해서 pre-commit, pre-push hook을 설정할 수 있습니다.

Husky를 통한 Git Hook 적용

1. npm install husky --save-dev

2. (처음 husky 세팅하는 사람만 실행 필요)

1. npx husky install : husky에 등록된 hook을 실제 .git에 적용시키기 위한 스크립트

2. add postinstall script in package.json

   • 이후에 clone 받아서 사용하는 사람들은 npm install후에 자동으로 husky install 이 될 수 있도록 하는 설정입니다.

   // package.json
   
   {
     "scripts": {
       "postinstall": "husky install"
     }
   }
   

3. scripts 설정

// package.json

{
  "scripts": {
    "postinstall": "husky install",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --cache",
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "**/*.{tsx,ts,jsx,js}": ["prettier --write"]
  }
}

4. add pre-commit, pre-push hook

1. npx husky add .husky/pre-commit "yarn lint-staged"

2. npx husky add .husky/pre-push "yarn lint"

   해당 명령어를 입력하면 루트 위치에 .husky 폴더가 생성됩니다.
   

5. prettier 포맷 검사를 해주는 lint-staged 설치

• lint-staged의 장점
  • 포맷팅을 수행 한 뒤 git add 명령어를 자동으로 수행되게 할 수 있습니다.
  • 포맷팅을 전체 파일 대상이 아닌 현재 git stage에 올라온 변경사항 대상으로만 수행할 수 있습니다.

yarn add -D lint-staged

6. .gitignore에 .eslintcache 파일 추가

.eslintcache

Husky를 적용해서 commit, push 하기

1. commit: 커밋할 파일이 prettier가 적용이 되었는지 검사합니다.

• 강제성은 없기 때문에 적용이 안 되어있더라도 commit은 가능합니다.

git add 파일
git commit -m "내용"

2. push: push할 파일들이 eslint 규칙에 어긋나지 않는지 검사합니다.

• 강제성이 있기 때문에 규칙에 어긋난다면 push를 할 수 없습니다.

git push origin main

(규칙에 어긋난 경우 에러와 워닝을 표시해줍니다.)

과정 요약

1. package.json에 있는 postinstall로 인해서, yarn install만 해도 모든 사람이 husky 설치를 하게 됩니다.
2. pre-commit git hook이 적용되어서 commit 할 때 package.json에 있는 “lint-staged”가 실행됩니다. 이것은 prettier 포맷팅을 검사합니다.
3. pre-push git hook이 적용되어서 push 할 때 package.json에 있는 “lint”가 실행됩니다. 이 때 commit과 다르게 lint 규칙이 맞지 않으면 push가 되지 않습니다. (강제성)