Husky && Lint-staged 도입하기

곽태민·2024년 1월 12일
0

TIL

목록 보기
62/65

개요

회사에 점점 더 프로젝트에 참여하는 인원들이 증가하고, 회사에서 새로운 개발문화 gitFlow를 도입하면서 서로 작업한 코드를 PR을 올리게 됐다.

현재 회사에서 프로젝트는 nestJS를 사용하고 있다. 하지만 PR을 올리고 코드리뷰를 하면서 eslint와 같은 이슈들이 종종 발견이 된다.

사용하지 않는 패키지가 import가 되었다던지, eslint가 적용되지 않은채 해당 코드만 덩그러니 다른 스타일을 갖는다던지,, 그래서 생각해낸게 Husky를 도입하는 것이였다!

Husky

💡Husky란? git에 commit하거나 push할 때 commit 메시지lint하고, 테스트를 실행하고, 코드를 lint하는 등의 작업에 사용할 수 있습니다. Husky는 모든 클라이언트 측 Git 후크를 지원한다.

일단 Husky는 NodeJS 기반 모듈이다. 따라서 사용을 하기 위해서는 npm 혹은 yarn을 이용해서 NodeJS 기반의 프로젝트에서 적용이 가능하다.

일단 본인은 회사 내에서 커밋 시 바로 실행이 되도록 pre-commit을 사용하려고 한다. (이 외의 여러 커밋 이벤트들이 존재.)

pre-commit을 사용하면 커밋 시 바로 실행이 되는데 실패하면 어쩌지? 라는 생각을하지만 다행히 husky를 실행 시 실패하면 commit을 취소해준다.

그런데 여기서 Husky를 사용하지 않고, 그냥 Git hook을 사용하면 안되나? 라는 생각을 가질 수 있다. 그럴 수 있지만 왜 Husky를 사용하려고 하냐면 Git hook을 사용했을 때 hook 파일들을 git을 통해서 repository나 다른 사용자들과 공유를 할 수 없다.

이제 본론으로 돌아와서 NodeJS 기반의 프로젝트에서 터미널을 켜고 아래와 같은 명령어를 실행한다.

npx husky-init -y && npm install -D husky

npm install -D husky은 다들 아시다시피 husky를 devDependency로 설치를 해주고, npx husky-init-y를 해주면 package.json.husky/pre-commit 이 경로를 만들어준다.

package.json에서 script에 아래와 같은 script를 추가해준다.

"prepare": "husky install"

그리고 .huskypre-commit을 자동으로 생성해주는데

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

npm test

기본 구성은 위와 같다. 여기서 이제 본인에게 필요한 명령을 넣어주면 commit시 husky가 실행이돼서 테스트를 진행한다.

Lint-staged

lint-staged를 사용하면 현재 git commit으로 올라가 있는 코드 중 변경 사항만 lint 체크를 진행한다. 매 commit 시 코드 전체를 lint 검사를 한다면 굉장히 느릴 수도 있고, 매번 같은 코드를 테스트를 하는 것이기 때문에 이보다 더 비효율적일 수 없다.

그래서 등장한게 바로 lint-staged다. 위에서 설명했다시피 commit 후 변경된 코드들만 테스트를 하기 때문에 효율적인 lint 검사가 가능하다!

우선 lint-staged를 사용하기 전에 본인이 사용하는 패키지 매니저(npm, yarn...) 를 통해서 설치를한다. (아래 명령어를 터미널에 입력)

npm install -D lint-staged

설치가 완료됐으면 package.json 파일에서 아래와 같은 script를 추가해준다. 본인은 git commit 시 prettier가 적용 안된 코드가 있는 확인을 하고, eslint를 체크할 수 있도록 해줬다.

만약 스테이징된 코드를 commit 시 다 맞춰준다면 다른 사람이 현재 프로젝트에서 어떤 컨벤션을 모를 수도 있기 때문이다.

{
  ...,
  "lint-staged": {
    "*.ts": [
      "prettier --list-different",
      "eslint --cache"
    ]
  }
}

그 후에 npx husky-init -y로 생성된 .husky/pre-commit으로 들어가서 아래와 같이 수정해주면 끝난다!

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

npx lint-staged

하지만 git commit 시 아래와 같은 메시지가 터미널에 나타날 수 있다.

hint: The '.husky/pre-commit' hook was ignored because it's not set as executable.
hint: You can disable this warning with `git config advice.ignoredHook false`.

만약 이런 메시지가 뜬다면 아래와 같은 명령어를 통해서 해결할 수 있다.
chmod +x .husky/pre-commit

해당 명령어는 change modex(execute)를 더하고(+), .husky/pre-commit에 실행 권한을 부여한다는 뜻이다.

profile
Node.js 백엔드 개발자입니다!

0개의 댓글