Husky는 뭘까? 정의와 사용방법

프론트엔드 협업시 유용한 라이브러리인 husky에대한 내용 정리이다.
코드형식이 맞지 않거나 오류가 발생했을 때 푸쉬를 막아준다!

husky란?

---

• git hook 사용을 도와주는 라이브러리
• prettier나 lint가 적용되지 않고 커밋되는 것을 방지함

Git hooks 이란? (+ Husky + lint-staged)

사용법

---

[husky] husky version 8 설치하기

1. crate-next-app

npx create next-app

• eslint 설치에 Y할것

2. prettier

yarn add prettier

3. git 원격 저장소 연결

git init
git add .
git commit -m "init message" //add 후 commit해야 push 가 됨!
git branch -M main
git remote add origin https://github.com/oasis0981/레포명.git
git push -u origin main

4. husky 설치

yarn add --dev husky

npx husky install

• .husky 폴더 생성됨

5. hooks 설정- commit전에 실행할 명령어(yarn lint)

npx husky add .husky/pre-commit "yarn lint"

6. .husky/_/pre-commit 파일

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

yarn lint-staged --no-stash

7. package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "18.15.12",
    "@types/react": "18.0.37",
    "@types/react-dom": "18.0.11",
    "autoprefixer": "10.4.14",
    "eslint": "8.38.0",
    "eslint-config-next": "13.3.0",
    "next": "13.3.0",
    "postcss": "8.4.23",
    "prettier": "^2.8.7",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.1",
    "typescript": "5.0.4"
  },
  "devDependencies": {
    "husky": "^8.0.3",
    "lint-staged": "^13.2.1"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  }
}

8. git commit, push

$ git add .

$ yarn lint

$ git commit -m "message"

$ git push