[Husky] Git Hooks 설정을 통한 커밋 전 코드 포맷팅 자동 적용하기 (Lint-Staged)

GitHub에서 다른 사람의 프로젝트를 보다가 .husky 폴더가 있는 걸 보고 이건 뭘까?하고 찾아보게 되었다. 찾아본 내용을 바탕으로 지금 작업 중인 프로젝트에도 적용해 보고, 그 과정을 정리해봤다.

 

Husky는 Git Hooks 사용을 도와주는 라이브러리이다. 

 

Git Hooks란 Git에서  어떤 이벤트가 생겼을 때 자동으로 특정 스크립트를 실행하도록 하는 기능이다.

 

Husky를 사용하면 커밋 전, 푸쉬 전에 특정 동작을 수행할 수 있다. 이를 통해 주로 lint, prettier를 자동 적용하는 경우가 많다. 나도 개발하면서 lint, prettier을 제대로 적용하지 않은 파일을 그대로 커밋할 때가 많았다. 이후에 뒤늦게 ci/cd에서 오류를 발견하거나 포맷팅을 다시 해야 해서 번거로움을 겪었다. 팀 프로젝트의 경우 팀원의 실수로 이런 일이 일어날 수도 있다. Husky와 Lint-staged를 이용하면 커밋 전 lint, prettier를 자동 적용해주어 코드를 포맷팅하고 잠재적인 오류를 사전에 방지할 수 있다!

 

 

 

Husky 설치 및 초기화

npx husky init && npm install

powershell에서 && 오류 발생 시 cmd에서 수행

 

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prepare": "husky install"
  }

package.json에 "prepare" 스크립트가 추가되었다.

 

 

 

lint-staged 설치

npm install --save-dev lint-staged

 

 

package.json에 lint-staged 추가

{ 
 "scripts": ...
  (...)
 "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "prettier --write",
      "eslint --fix"
    ]
  }
}

 

 

생성된 .husky/pre-commit 파일에서 lint-staged 적용

// .husky/pre-commit

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

npx lint-staged

 

 

이제 커밋할 때마다 스테이징된 파일들에 포맷팅을 적용하고 잠재적 오류를 잡아낸다. 지정한 lint 규칙을 통과하지 못하면 커밋에 실패한다. husky를 통해 이런 실수들을 사전에 방지하고 안전성을 높일 수 있어서 만족스러웠다.