[husky, lint-staged] husky, lint-staged를 이용한 프로젝트 관리

[husky, lint-staged] husky, lint-staged를 이용한 프로젝트 관리

◆ 참고

해당 게시글은 시리즈로 이루어져 있습니다.

그리고 shell script를 많이 사용하는데 자세한 설명은 없으니 스스로 공부하셔야 합니다.

팀 단위 프로젝트를 진행할 경우 코드, 커밋 컨벤션이 필요하다.

모든 개발자가 각각 자신의 스타일로 코드를 작성하면 코드 리뷰에 어려움을 겪고 인원이 교체되는 경우 코드 분석 시 어려움을 겪을 수 있다.

따라서 해당 게시글에서는 husky, lint-staged를 이용하여 프로젝트 관리 하는 방법을 알아보자.

 

해당 게시글은 프로젝트가 monorepo로 가정하며 monorepo가 아니더라도 딱히 문제는 없다.

packageManager는 yarn을 사용했으며 version은 yarn@3.2.1 이다.

 

husky, lint-staged

◆ husky, lint-staged 간단하게 알아보기

해당 package를 설명하면 아래와 같다.

husky : git hook을 쉽게 사용할 수 있는 package

lint-staged : 현재 staged에 있는 파일만 적용할 수 있도록 해주는 package

 

더 상세하게 궁금한 사람은 아래 npm에 들어가서 확인해보자.

husky : 이동하기

lint-staged : 이동하기

 

◆ husky, lint-staged 설치하기

husky : yarn add -D husky or npm install --dev husky

lint-staged : yarn add -D lint-staged or npm install --dev lint-staged

 

husky의 경우 아래 명령어도 추가적 입력해주자.

npm pkg set scripts.prepare="husky install"

 

그 이후 yarn을 한번 더 입력해주도록 하자.

 

필자와 같은 버전을 사용하고 싶다면 아래 명령어를 사용하면 된다.

husky : yarn add -D husky@^8.0.1 or npm install --dev husky@^8.0.1

lint-staged : yarn add -D lint-staged@^12.4.0 or npm install --dev lint-staged@^12.4.0

 

위 과정을 yarn 명령어로만 작성하면 아래와 같다.

1. yarn add -D husky

2. yarn add -D lint-staged

3. npm pkg set scripts.prepare="husky install"

4. yarn

 

에러 발생

만약 위 과정을 진행하는 데 아래 에러가 발생할 수 있다.

fatal: not a git repository (or any of the parent directories): .git

husky - git command not found, skipping install

그럼 git init 명령어를 통해 git을 초기화 해주면 된다.

 

결과

프로젝트를 보면 .husky 폴더 외 몇 개의 파일 및 폴더가 생성 되었을 것이다.

다음 게시글에서는 이것을 이용하여 commit 전 console.log가 있는 경우 commit 하지 못 하게 막아보자.

 

마지막

틀린 부분이 있다면 댓글로 말씀 부탁드리겠습니다.