Prostargram - Husky로 커밋하기 전 타입 체크, 린팅, 포맷팅 하기

서론

Git에서 제공하는 Git Hook이라고 하는 기능이 있습니다.

여러 이벤트(커밋 전, 커밋 후, 푸시 전, 푸시 후 등)가 발생 했을 때

사전에 정의한 쉘 스크립트를 실행하여 반복적인 동작을 자동화하기가 편합니다.

(어떤 유형이 있는지 궁금하다면 여기로)

 

이 Git Hook만을 별도로 설정하려면 사람들마다 개별로 적용하거나,

실수로 적용하는 것을 잊었을 때와 같은 상황이 발생하여

동일한 환경을 구축하는 데 번거로운 점이 있습니다. (참고: 가비아 - husky로 git hook하자)

 

이 Git Hook을 설정하기 편하도록 도와주는 라이브러리가 바로 Husky입니다.

 

우선적으로 Prostargram에서는 커밋을 하기 전,

작성된 TypeScript 코드에 대한 타입 체크를 하고,

ESLint 규칙과 맞지 않는 코드는 없는지 확인 한 뒤,

전체 파일에 대해 (적용 가능한 파일에 대해) Prettier 포맷팅을 자동화 해 보겠습니다.

(이는 원격 레포지토리로 push하기 전, 추후 빌드 등의 상황에 실패하는 경우를 최소화 하는데 도움이 됩니다.)

 

 

---

Husky

우선 아래 명령어를 실행하여 .husky 폴더를 생성해 봅시다.

npx husky install

생성된 .husky 폴더

 

 

그리고 본격적으로 husky를 통한 Git Hook을 작성하기 전에

터미널에 npm install을 실행 시, 자동으로 .husky 폴더가 생성되도록 만들어 봅시다.

 

package.json의 "script" 속성에 아래처럼 스크립트를 추가해 줍니다.

  ...
  
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "prepare": "npx husky install" // 추가
  },

  ...

"prepare"는 npm install 명령어을 통해 패키지를 설치하기 전, 자동으로 실행하는 스크립트 입니다.

(참고: beomy님의 package.json의 scripts - https://beomy.github.io/tech/etc/package-json-scripts/)

 

다음은 커밋 하기 전에 스테이징 된 파일에 대해서

TypeScript 컴파일러의 타입 체크와

Lint 검사, Prettier의 포맷팅을 실행시켜주기 위해서

 

lint-staged 패키지를 설치 후

npm install -D lint-staged

 

package.json 파일에 아래처럼 속성과 스크립트를 추가해 줍니다.

 

 

그리고 실제 git hook을 통해서

커밋 전에 해당 lint-staged 명령어를 실행시키기 위해서

터미널에 아래 명령어를 실행합니다.

npx husky add .husky/pre-commit "npm run checkTs && npm run lint-staged"​

 

실행하면 .husky 폴더 하위로 pre-commit이 생성되고

파일을 보면 추가한 명령어처럼 npm run lint-staged 명령어가 추가된 것을 볼 수 있습니다.

이 명령어가 실제로 커밋 전에 실행될 명령어가 됩니다.

 

 

그리고 스테이징 후 커밋을 해보면 아래와 같이

Lint 검사와 포맷팅이 잘 실행되는 것을 확인할 수 있습니다.

 

 

이렇게 husky를 통하여 git hook - pre-commit을 설정해보고,

매 커밋 전마다 ESLint의 Lint 검사와 Prettier의 Formatting을 실행할 수 있도록 설정해봤습니다.

추후 협업 시에도 일관성 있는 코드 작성 환경을 구축하는 데 조금 더 도움이 될 것입니다.

 

 

참고

---

- husky + lint-staged를 활용하여 git hook 걸기

https://kir93.tistory.com/entry/husky-lint-staged%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%98%EC%97%AC-git-hook%EA%B1%B8%EA%B8%B0

husky + lint-staged를 활용하여 git hook걸기