husky & lint-staged 설정

Yeji·2023년 7월 23일

Before start ...

Vue3 프로젝트 초기설정을 하면서 코드 스타일을 통일시키기 위해 ESLint와 Prettier 설정을 진행했는데, 이 둘에는 치명적인 문제가 있다. 자동으로 실행되지 않기 때문에 특정 명령어를 실행해야 한다거나 VSCode와 같은 코드 편집기에 Extension을 설치해야 한다는 것이다.

만약 누군가가 이 작업을 적용하지 않고 그대로 push나 merge를 진행한다면 코드 스타일이 통일되지 않아 불필요한 충돌이 발생할 것이다.

1. Git Hooks

위와 같은 상황을 방지하기 위해 Git에서는 Git Hooks라는 기능을 제공한다.

1-1. 정의

Git에 발생한 이벤트에 대해 특정 스크립트를 실행하도록 설정할 수 있는 기능이다.

1-2. 종류

클라이언트 훅

클라이언트에서 commit, merge, push가 발생하기 전후에 실행하는 훅이다.

서버 훅

push가 발생했을 때 서버에서 실행하는 훅이다.
push 전에 실행되는 훅이 0이 아닌 값을 반환하면 push는 거절된다.

1-3. 적용

.git/hooks 하위에 파일을 생성하고 그 안에 실행하고 싶은 명령어를 작성하면 된다. 예를 들어, 클라이언트에서 commit 전에 특정 작업을 수행하고 싶다면 .git/hooks/pre-commit (확장자명 없음) 안에 작성하면 된다.

Git Hooks는 .git 디렉토리에 저장되어 있어 버전 관리 대상이 아니므로 레포에 올라가지 않기 때문에 기본적으로 공유가 불가하다.

이를 해결하기 위해 Git Hooks 스크립트 공유, Git template 활용 등 다양한 방법이 있지만 역시나 개발자가 Git Hooks를 적용하는 작업을 수행하지 않으면 훅이 적용되지 않는 상황이 또 발생한다.

2. husky

2-1. 정의

만약 프로젝트의 모듈 의존성을 npm을 통해 관리하고 있다면 husky를 사용할 수 있다.

husky는 npm 모듈 중 하나로 Git Hooks를 쉽게 설정할 수 있도록 도와주는 도구다.

2-2. 설치

husky 공식문서 기반

husky는 .git과 동일한 위치에 설치되어야 한다. 그런데 나는 레포지토리 하나에 backend와 frontend 폴더가 나눠져 있고 frontend 폴더 하위에 package.json이 있다. 이런 경우 어떻게 해야 하는지 알아보자.

1. `package.json` 에 명령어 등록

"scripts": {
        "prepare": "cd .. && husky install frontend/.husky"
    },

package.json의 script 필드에 있는 prepare는 npm 패키지가 설치되거나 업데이트 될 때 자동으로 실행되는 스크립트다. 해당 명령어는 다음과 같이 동작한다.

현재 디렉토리의 상위 디렉토리로 이동한 후 (.git이 존재하는 곳)
husky를 사용해 Git hooks를 프로젝트에 설치하고 설정 파일을 frontend/.husky 디렉토리에 생성한다.

2. `npm install`를 통해 해당 명령어 실행

그러면 다음과 같이 .husky 디렉토리가 생겨난다.

3. `pre-commit` 파일 생성

나는 commit 실행 전에 ESLint와 prettier 교정 작업을 실행시키고 싶다.
따라서 pre-commit을 생성하고 원하는 명령어를 입력한다.

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

그럼 아래와 같이 파일이 생성됨을 알 수 있다.

pre-commit

3. lint-staged

그럼 pre-commit 파일에서 npx lint-staged의 lint-staged는 무엇일까?

3-1. 정의

커밋시 변경된 파일, 즉 staged된 파일에 대해서만 lint를 실행하는 도구다.

나는 변경된 파일에 대해서만 Git Hooks를 실행해주고 싶기 때문에 lint-staged를 함께 설치한다.

3-2. 적용

커밋 전에 lint-staged를 실행해 달라고 한다면 그 이후에는 어떻게 동작할까?

package.json에 lint-staged 필드를 만들고 다음과 같은 명령어를 추가한다.


    "scripts": {
        "prepare": "cd .. && husky install frontend/.husky"
    },
    "lint-staged": {
        "*.{ts,tsx,vue}": [
            "npx eslint --fix",
            "npx prettier --write"
        ]
    },

.ts, .tsx, .vue가 확장자인 파일에 대해서 ESLint와 prettier를 실행하라는 명령어다.