Husky와 lint-staged 활용한 Git Hooks에서의 포매팅 및 린팅 전략

1. 현재 상황:

프로젝트를 진행하면서 husky를 사용해 Git Hooks에서 자동으로 코드 포매팅과 린팅을 적용하고자 했습니다. 현재 설정에 따르면:
1. pre-commit 시점에서: 전체 코드 베이스에 prettier 포매팅이 적용됩니다.
2. pre-push 시점에서: 전체 코드 베이스에 eslint 검사가 수행됩니다.

//package.json
  "scripts": {
    "lint": "eslint --cache .",
    "format": "prettier --cache --write .",
    "postinstall": "husky install"
  },

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

npm run format

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

npm run lint

2. 문제점:

1. git commit 할 때마다 전체 파일에 prettier가 적용되면, 커밋하고자 하는 파일이 아닌 다른 파일까지 포매팅이 되어 원하지 않는 변화가 일어나기 쉽습니다.
2. 이로 인해 파일을 나눠서 커밋하고자 할 때, 선택적으로 파일을 스테이징하더라도 결국 모든 변경된 파일이 커밋에 포함됩니다.

3. 해결 방법: lint-staged 사용하여 pre-commit에서의 포매팅 조정

우리의 목표는 커밋할 파일만 포매팅하고 전체 코드 베이스의 린팅은 푸시하기 전에만 수행하는 것입니다.

lint-staged를 사용하여 스테이징된 파일에만 prettier 포매팅을 적용합니다. 즉,

1. list-staged를 다운로드하고
2. package.json에 다음과 같이 설정을 추가합니다
3. .husky/pre-commit 파일에서 list-staged를 실행시킵니다.

npm i -D lint-staged

//package.json
"lint-staged": {
  "*.{js,jsx,ts,tsx}": [
    "prettier --write"
  ]
}

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

npx lint-staged

이제 git commit 시에 스테이징된 파일에만 포매팅이 적용됩니다.

.husky/pre-push 파일의 내용은 그대로 유지합니다. 이렇게 하면 git push 직전에 전체 코드 베이스에 eslint 검사를 수행합니다.

4. 결론:

이 설정은 개발 중간에 빠르게 반복되는 커밋 작업에서는 포매팅만 적용하여 빠른 작업 플로우를 유지하고, 코드를 원격 저장소에 푸시하기 전에 코드 품질을 확인하여 안정성을 보장합니다.

5. 추가정보

mrm을 이용하여 해당 명령어를 실행하면 lint-staged와 husky를 간편하게 설정해줄 수 있습니다. 여기서 mrm이란 오픈소스 프로젝트의 환경 설정을 동기화 하기 위한 도구입니다. mrm을 이용하면 lint-staged와 husky를 간편하게 설정해줄 수 있습니다

npx mrm lint-staged 

REFERENCE

1. https://velog.io/@jma1020/husky-lint-staged%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
2. 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