[241220 TIL] 기본적인 husky 세팅

1. husky 추가

pnpm add husky

2. husky init

pnpm exec husky init

3. package.json 수정

lint 와 format 만 수정

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint --cache .",
    "prepare": "husky",
    "format": "prettier --cache --write ."
  }
}

4. pre-commit, pre-push 파일 작성

pre-commit

pnpm lint

 

pre-push

pnpm format

 

추가. build 및 chore 커밋 자동화

위까지 설정해도 린팅 및 포맷팅이 잘 되지만 문제가 하나 있습니다.
매번 commit & push 실행후 .eslintcache 파일이 생성되거나,

포맷팅으로 인해 파일이 변경되어 다시 commit & push 를 해야하는 상황이 빈번합니다.

또한 build 는 실행하지 않으므로, 이 과정에 build 도 추가하고 싶었습니다.

 

최종 설정은 아래와 같습니다.

 

먼저 package.json 입니다. lint-staged 부분을 추가합니다.

{
  //...
    "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "prepare": "husky",
    "format": "prettier --cache --write .",
    "lint": "eslint --cache .",
    "test": "jest",
    "lint-staged": "pnpm dlx lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,yaml,yml}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  },
}

 

다음으로 pre-commit 입니다.
.husky/pre-commit

pnpm lint-staged

 

다음으로 pre-push 입니다. 여기에 build가 추가되었습니다.
.husky/pre-push

pnpm format
pnpm build || exit 1

 

다음으로 post-commit 입니다.
여기서 commit 후 변경점이 있다면 다시 commit & push 하고
자동으로 커밋 메시지를 남깁니다.
.husky/post-commit

git add . && git commit -m "chore: apply lint/format fixes" && git push