[CI/CD] lint-staged, husky로 린트 검사 자동화하기 (+Jest test)

로컬에서 commit 또는 원격 레포지토리로 push하기 전에 린트 검사를 자동화하는 시스템을 구축해보았다. 

 

개념 정리

 

Git Hook이란?

 

git commit 또는 push 등의 git 이벤트가 일어나기 전에 특정 스크립트를 실행하여 린트 검사를 해주고 싶다면 

 

Git Hook은 Git 저장소에서 발생하는 이벤트에 대응하여 특정 작업을 실행할 수 있는 스크립트이다.

• 종류에는 'pre-commit'(커밋 전), 'pre-push'(푸쉬 전), 'post-commit'(커밋 후)가 있다.
• git 이벤트 사이에 갈고리(hook)을 걸어준다는 의미
• 코드를 커밋하기 전에 코드 검사, 유닛 테스트 실행 등 스크립트를 실행할 수 있다.

 

Git Hook을 관리하고 실행하는 것과 관련된 라이브러리에는 husky가 있다. 

• Husky를 설정하면 Git Hook 스크립트를 쉽게 실행하며, 이를 이용하여 Lint-Staged와 같은 작업을 수행할 수 있다.

 

Lint-Staged ? 

lint-staged는 git add CLI로 스테이징 상태인 파일들을 대상으로 설정한 명령어를 실행시켜주는 라이브러리이다. 

• Lint-Staged는 Git Hook과 함께 사용되는 도구이다.
• 주로 커밋하기 전에 변경된 파일 중에서 코드 스타일 린트, 테스트 등의 작업을 수행한다.

 

pre-commit 설정했을 때 예시

• 변경한 파일을 git add를 통해 staging시킨 후, git commit -m '커밋 메시지' 입력 후 엔터
• Husky가 pre-commit Git Hook을 활성화시킴
• pre-commit Hook이 Lint-Staged를 실행하고 변경된 파일 중에서 코드 린트를 수행 
• 만약 린트 오류가 있으면, 커밋 거부
• 코드가 린트를 통과하면 커밋 완료

 

pre-commit 린트 자동화 

 

Husky 설치

# 개발 전용으로 설치
pnpm install husky -D
npx husky install

 

만약 커밋하기 전에 타입 검사와 prettier로 코드포매팅을 하고 싶다면 아래와 같이 CLI를 입력하면 된다. 

# 타입 에러 검사 및 프리티어로 코드 자동 포매팅
npx husky add .husky/pre-commit "npx tsc --noEmit && npx eslint --fix . && npx prettier --write ."

 

그러면 아래와 같이 루트에 존재하는 .husky 파일 속 pre-commit 파일이 생성되며 아래와 같이 작성이 된다.

(CLI로도 가능하지만 파일에 직접 스크립트를 적어줘도 된다.)

 

.husky/pre-commit

 

lint-staged 설치

pnpm install lint-staged -D

 

아래와 같이 npx lint-staged를 입력하면 .ts, .tsx 파일에 대해 린트 검사와 prettier 포매팅을 시켜준다.

 

나의 경우에는 저장할 때 마다 코드포매팅을 시켜주고 있었기 때문에 아래와 같이 Jest 테스트 실행과 스타일 린트 검사만 추가해주었다.

 

.lintstagedrc.js

module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'eslint'],
  '*.{scss}': ['stylelint --fix']
  '*.{json,yaml}': ['prettier --write'],
};

 

 

 

.husky/pre-commit

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

echo "let's check the code! =^ . ｡.^="
pnpm lint-staged && pnpm ci-test

 

package.json

  "scripts": {
.
.

    "ci-test": "jest"
  },

 

결과

 

메시지는 그냥 넣어보았다..ㅋ

 

 

통과 안 됐을 때 (에러 출력)

 

통과 됐을 때 (커밋 완료)

 

레퍼런스

https://dev.to/joshchu/how-to-setup-prettier-eslint-husky-and-lint-staged-with-a-nextjs-and-typescript-project-i7b 

How to setup Prettier, ESLint, Husky and Lint-Staged with a NextJS and Typescript Project

 

mrm 사용

https://velog.io/@do_dadu/husky-lint-staged%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%9E%90-sub-ESLint-%EC%9E%90%EB%8F%99%ED%99%94%ED%95%98%EA%B8%B0

husky, lint-staged를 사용하자( sub : ESLint 자동화하기 )