Husky로 Git hooks 자동화하기(+ lint-staged, commitlint)

Git hooks란?

특정 git 이벤트가 발생했을 때 특정 동작을 실행하는 것

예) commit 시에 자동으로 lint를 실행하기

 

Husky란?

손쉬운 Git Hook 적용을 위한 라이브러리

 

Husky와 Github Actions의 차이

Husky: 로컬에서 특정 git 이벤트가 발생했을 때 특정 스크립트를 실행

Github Actions: 팀원들과 함께 사용하는 레퍼지토리에 특정 이벤트가 발생했을 때 특정 작업들을 실행. CI/CD를 위한 도구이다.

 

이 구분이 정확한지는 모르겠지만, 우선 나는 이렇게 이해했다.

 

적용할 수 있는 Git hooks 종류

프로젝트에서 터미널을 열고 아래 명령어를 입력하면 Git hooks 종류를 살펴볼 수 있다!

cd .git/hooks
ls

 

lint-staged, commitlint 함께 사용하기

이 라이브러리들을 이용하면 git hook을 간편하게 설정할 수 있다. 

• lint-staged
  staging 상태의 파일에 대해 자동으로 lint를 실행해주는 라이브러리. 이를 실행하기 위해서는 pre-commit git hook을 설정해야 하고, eslint가 설치되어 있어야 한다.
• commitlint
  commit 메시지의 lint를 실행해주는 라이브러리. commit-msg git hook을 설정해야 한다. 커밋 컨벤션을 별도로 설정하지 않을 경우 commitlint가 제공하는 컨벤션을 따르게 된다. 

 

적용 확인하기

lint-staged가 제대로 적용되었는지 확인해보자. 확인을 위해 아래 이미지처럼 eslint 규칙 상 문제가 있는 코드를 작성하고, 이를 커밋해보자. 

변수 a가 선언되었지만 사용되지 않았다(unused vars)

자동으로 lint가 실행되고, commit이 이뤄지지 않은 것을 확인할 수 있다! 파일은 staging 상태에 머무르게 된다. staging된 여러 파일들 중 한 파일에라도 오류가 있으면 commit이 허용되지 않는다. 

 

commitlint도 확인해보자. 문제 없는 아무 파일을 추가하고, 잘못된 메시지로 커밋을 해보자.

아무 코드

잘못된 커밋 메시지

commit을 허용하지 않는 것을 확인할 수 있다.

 

정리

• Git hook이란 git 폴더에 특정 이벤트 발생 시 특정 스크립트를 실행하도록 하는 것이다.
• lint-staged, commitlint라는 라이브러리를 사용하면 Git hook을 쉽게 설정할 수 있다.