📍설치
yarn add -D husky lint-staged
📍husky 초기화
npx husky init- 그러면 .husky 폴더가 만들어지고, 그 안에 pre-commit 파일이 생긴다
- pre-commit 파일에 pre commit hook을 작성할 수 있다
- 그리고 설치한 내용을 반영하기 위해 커밋을 한번 해준다
📍husky 테스트
- 일단 .husky/pre-commit 파일에 테스트 명령어를 입력해서 pre commit hook이 잘 동작하는지 테스트해본다
echo "pre commit hook test"- 빈 커밋 날려보기 (VS Code에서 소스 컨트롤(GUI)로 커밋을 하면 husky 적용이 안되므로 터미널에 입력해야 함)
git commit --allow-empty -m "test commit"- 터미널에 pre commit hook test 가 출력되면 정상이다
- 이제 pre-commit 훅에 기존 내용을 지우고 lint-staged가 실행되게 수정한다
📍lint-staged config 파일 작성
- package.json에 lint-staged 프로퍼티에 config를 작성할 수 있다
- 아래는 Nuxt3 프로젝트 기준으로 작성한 lint-staged config
"lint-staged": {
"*.{mjs,cjs,js,ts,md,html,css}": "prettier --write",
"app/**/*.{ts,vue}": [
"eslint --fix",
"prettier --write"
],
"server/**/*.ts": [
"eslint --fix",
"prettier --write"
]
},
📍lint-staged 테스트
- 변경사항을 만들고 커밋을 날려본다
- 이 때, 변경 사항이 공백일 경우, git commit 시 --allow-empty 옵션을 추가해야 한다
git add .
git commit -m "test commit"
터미널에 아래 내용이 출력되고, 변경 사항에 lint가 이루어지면 성공이다
