git hook 설정으로 코드 포맷팅 자동화하기 with Husky

지난번에 eslint와 prettier의 설정방법에 대해 포스팅 했다.

이번 포스팅에서는 husky를 사용해서 git hook을 간편하게 설정해 코드 포맷팅을 자동화 하는 방법에 대해 알아본다.

 

Git Hook 이란?

특정 액션이 일어났을 때 커스텀 스크립트를 실행 할 수 있도록 하는 기능이다.

 

git 하위 디렉터리에 포함되어 있기 때문에 별도 설치 없이 git init 명령어를 입력하면 .git/hooks 디렉토리가 생성되고
이 안에는 깃훅의 종류와 예시 스크립트가 포함되어 있다.

이미 git과 연동이 되어있는 경우에는  cd .git/hooks 를 통해 hooks 폴더에 들어가면 볼 수 있다.

git hook 종류와 예시 스크립트

코드 포맷팅 자동화를 위해서는 이중에서 커밋과 푸시되기 전에 실행되는 pre-commit 훅과 pre-push 훅을 사용해야 한다.

 

Husky 란?

git hook 설정을 도와주는 npm package로 번거로운 git hook 설정을 편하게 하도록 도와준다.

 

husky를 통해 git hook을 설정해두면 이후에 협업할 때 다른 팀원이 npm install시 git hook 설정을 그대로 적용할 수 있어 편리하다는 장점이 있다.

그럼 본격적으로 husky를 사용해 git hook을 설정해보자.

 

Husky 설치 및 Git Hook 적용하기

1. Husky 설치

npm install husky --save -dev

 

npx husky install -> !! 처음 husky 세팅하는 사람만 실행 필요 !!

• husky에 등록된 hook을 실제 .git에 적용시키기 위한 스크립트로 .husky 폴더가 생성된다.

생성된 .husky 폴더

2. package.json에 script 추가

    "scripts": {
        ...
        "format": "prettier --cache --write .",
        "lint": "eslint --cache .",
        "postinstall": "husky install"
    },

"format": "prettier --cache --write ." : prettier 포맷팅 검사 스크립트

"lint": "eslint --cache ." : eslint 포맷팅 검사 스크립트

"postinstall": "husky install" : 이후 clone 받아 사용하는 팀원들은 npm install 시 자동으로 husky install 되도록 설정하는 스크립트

 

3. pre-commit, pre-push hook 추가

 

위처럼 .husky 폴더 내부에 pre-commit, pre-push 파일을 추가하고 사진과 같이 npm script 추가해준다.

추가한 내용은 아래와 같다.
- commit 전에 prettier가 코드를 설정한 포맷에 맞게 수정한다.

- push 전에 eslint 문법을 확인한다.

 

4. 테스트 해보기

적용이 잘 되었는지 테스트 진행을 위해

- eslint로 "no-console": 'error'로 설정

- prettier는 "signleQuote": true로 설정

 

기대 결과는 다음과 같다.

- commit시 쌍따옴표 코드는 홑따옴표로 변경

- push는 실패

(좌)커밋 전 / (우)커밋 후

 

커밋하면 자동으로 prettier에러가 수정된 것을 볼 수 있다 🥹

다음으로 App.tsx 파일에 console.log()를 작성하고 코드를 푸시하면 에러가 나야하는데

 

너무나도 푸시가 잘되었다,,^^ 

eslint --cache . 명령어가 실행된걸 봐서는 pre-push 는 잘 먹은거 같은데,, 원인을 파악하기 위해서

eslint --cache . 명령어만 따로 실행해 보았다.

콘솔로그 에러가 나와야되는데 아무 에러가 안뜨는걸로 봐서 App.tsx 파일이 eslint 검사 대상 파일이 아닌거 같다는 생각이 들어서 디버깅을 해보았다. eslint 디버깅은 eslint --debug . 명령어로 실행 할 수 있다.

 

디버깅을 해보니 역시 css, ts, tsx 파일들은 검사 대상에 포함되지 않는 것을 발견했다 ㅠㅠ eslint는 기본적으로 js 파일만 검사를 실행하기 때문에 js 이외의 파일들은 따로 overrides 옵션을 사용해 설정을 추가해주어야 한다고 한다.

// .eslintrc.js

module.exports =  {
	...
    overrides: [
            {
                files: ['*.js', '*.jsx', '*.ts', '*.tsx'],
            },
    ],
}

위 처럼 설정을 추가하고 npx eslint . 명령어를 다시 실행해봤다.

이제 eslint 에러가 잘 잡힌다 🥹🥹 이제 푸시를 해보면 ..?

 

원했던 결과대로 eslint 에러가 있어서 푸시가 되지 않는것을 볼 수 있었다 🥳

정리

husky 라이브러리를 사용해서 git hook을 간편하게 설정하고 코드 포맷팅 규정을 자동화 하는 것을 알아보았다.
git hook은 코드 포맷팅 뿐만 아니라 다양한 곳에서 활용할 수 있어서 협업할 때 굉장히 유용할 것 같은 기능이다.