husky 세팅하기

Husky는 git hook을 쉽게 설정할 수 있는 도구로, 코드를 커밋하기 전 린트와 같은 스크립트를 자동으로 실행할 수 있다. 여기에 lint-staged를 함께 사용하면 staging된 파일에 대해서만 린트 작업을 수행할 수 있어, 빠르고 효율적으로 코드 퀄리티를 유지할 수 있다.

1️⃣ 프로젝트에 husky 설치

npm i -D husky

2️⃣ husky 초기화 및 pre-commit 훅 파일 생성

.husky/pre-commit 파일을 자동으로 생성

npx husky-init && npm install

3️⃣ lint-staged 설치

staging 상태의 파일에 대해서만 린트 작업을 수행하기 위해 lint-staged 설치

npm i -D lint-staged

4️⃣ pre-commit 훅에 lint-staged 추가

pre-commit 훅을 설정하여 커밋 전에 lint-staged를 실행하도록 설정

npx husky add .husky/pre-commit 'npx lint-staged'

아래와 같이 .husky/pre-commit 파일에 lint-staged 명령어가 추가된다.

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

npx lint-staged

5️⃣ package.json에 lint-staged 설정 추가

staged 상태의 파일에 대해 ESLint, Prettier, Stylelint를 자동으로 실행하기 위한 설정을 package.json에 추가

  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "eslint --cache --fix",
      "prettier --cache --write"
    ],
    "src/**/*.scss": [
      "stylelint --fix"
    ]
  }

🚨 실행 안 되는 경우 🚨

💡 실행 권한이 없어서 오류가 발생할 경우, chmod +x 명령어를 사용해 실행 권한을 추가해야 한다.

chmod +x .husky/pre-commit

• chmod는 파일의 권한을 변경하는 명령어이며, +x는 실행 권한을 추가하는 옵션이다.
• .husky/pre-commit은 실행 권한을 부여할 대상 파일이다.