husky와 lint-staged는 JavaScript 프로젝트에서 코드 품질을 유지하고 자동화를 통해 개발자들의 작업을 효율적으로 관리하기 위한 도구이다.

git hooks와 함께 사용되어 코드가 커밋되기 전에 특정 작업을 자동으로 수행할 수 있도록 한다.

husky

• git hooks를 관리하는 라이브러리
• 커밋이나 푸시와 같은 git 이벤트가 발생하기 전에 특정 스크립트를 실행할 수 있도록 해줌
• 코드 포맷팅, 테스트 실행, 커밋 메시지 검증 등 다양한 작업을 자동화할 수 있음

lint-staged

• git에 스테이징된 파일에 대해서 린트나 포맷팅 작업을 수행하도록 하는 도구
• 전체 코드베이스를 검사하는 대신 변경된 파일만 검사하여 성능을 최적화함

설정

# husky 설치 및 초기화
npm install --save-dev husky
npx husky init

이렇게 하면 .husky 폴더와 함께 관련 파일들이 생성된다. 이 중 .husky/pre-commit파일에 적혀있는 명령어가 commit 이벤트가 발생하기 전에 실행된다. .husky/pre-commit 파일을 보면 npm test가 들어있는 것을 볼 수 있는데, 커밋을 해보면 npm test가 자동으로 실행된다. (나는 스크립트를 따로 작성하지 않아서 에러가 발생함)

lint-staged 를 설치한 후 package.json 내에 설정을 추가한다.

# lint-staged 설치
npm install --save-dev lint-staged

// package.json
"lint-staged": {
  "*.ts": [
    "eslint --fix", // 대상 파일을 린트하고, 가능한 경우 자동으로 문제를 수정
    "prettier --write" // 대상 파일의 포맷을 수정함
  ]
}

그런 다음 npx lint-staged를 입력해보면 package.json에 설정된 포맷팅 커맨드가 실행되는걸 볼 수 있다. 그런데 이 때 프로젝트에 eslint랑 prettier가 설치되어 있는지 잘 확인해주자.. 특히 prettier는 평소에 ide에 따로 설정해주고 사용해서 프로젝트에 설치하는걸 놓쳐가지고 한참 삽질했다 ㅎㅎ

이제 커밋되었을 때 lint-staged가 실행되도록 하기 위한 설정이 필요한다. 그러기 위해서 .husky/pre-commit 파일 내의 내용을 npx lint-staged으로 수정해준다.

# .husky/pre-commit
npx lint-staged

이렇게 하고 커밋을 해보면

잘 실행됨!

이렇게 하면 커밋 전에 놓친 부분이 있는지 확인할 수 있다. 커밋 전에 코드 포맷팅을 확인하는 방법 외에도 더 활용할 수 있는 방법이 있을 것 같은데 한번 고민해봐야겠다.