Git - husky와 lint-staged로 커밋전 eslint 검사하기(feat.pnpm)

 

 

eslint 설치까지 완료되었다

eslint 검사을 하려면 3가지 방법 정도가 있다. (검사하는 타이밍에 따라 다른 방법을 사용한다고 본다)

1. 직접 명령어로 검사하기

2. 커밋전/푸시전 자동으로 검사하기

3. 빌드 단계에서 검사하기

 

나는 2번째 방법인 커밋 전 자동으로 린트 검사를 실행 하도록 만들어주고 싶었다.

깃훅(git hook) 이라는 친구가 있다. 깃의 특정 이벤트에 트리거링되어 실행되는 스크립트 모음집 이랄까

이를 활용해서 커밋 전의 검사 동작을 추가할 수 있다. 이를 pre-commit 이라고 한다

 

준비물은 husky와 lint-staged 라는 라이브러리들 이다.

이 둘을 믹스해서 세팅을 해보려고 한다.

- husky 는 pre-commit 을 타이밍을 잡아낼 수 있고

- lint-staged 는 스테이징된 파일들에 한정해서 린트 검사를 실행할 수 있다.

 

---

Git - husky와 lint-staged로 커밋전 eslint 검사하기(feat.pnpm)

1. husky 설치를 해보자

$ pnpm add husky --save-dev

설치가 잘 되었다

 

 

2. husky가 잘 동작하는지 테스트를 해보자

일단 init 명령어를 실행하면 .husky 라는 폴더가 루트디렉터리에 생성된다.

$ pnpm exec husky init

 

.husty/pre-commit 이라는 파일에서 아래 내용을 입력해보고 저장!

 

커밋해보면 커밋 직전에 테스트 메시지가 나온다

 

 

3. 바로 lint-staged 를 설치해보자 

아래 명령어로 설치를 시작하자

$ pnpm add lint-staged --save-dev

설치가 잘되었다

 

 

4. husky와 lint-staged 라이브러리는 준비되었다. 이제는 명령어를 추가해보자

 

package.json

파일 내에 prepare 과 lint-staged 라는 속성를 추가해주었다.

#package.json
{
	...
	"scripts": {
            ...
            "lint": "eslint . -c eslint.config.js --max-warnings 0",
            "lint:fix": "eslint . -c eslint.config.js --max-warnings 0 --fix",
            "prepare": "husky" #추가하기 (v9.1.7 기준)
        },
        "lint-staged": { # 요 블럭 통째로 추가해주기
            "*.{ts,tsx}": [
                "eslint . -c eslint.config.js --max-warnings 0 --fix"
            ]
        },
}

 

 

5. .husky/pre-commit 파일 안에 명령어 한줄만 적어주자

$ npx lint-staged

 

 

 

실행

일부러 규칙에 어긋나게 커밋을 해보았다. 커밋이 막힌다 👍