React - Husky

https://github.com/typicode/husky

typicode/husky

---

• husky 란?
  • git hook 관리
    
    
• git hook 이란?
  • git을 쓰다가 특정 이벤트(커밋,푸시 등)가 발생했을 때, 그 순간 특정 스크립트가 실행
    
    

• husky 설치
  • npm i -D husky
    
    

• git hook 설치
  • npx husky install
    
    

• package.json scripts prepare 추가

// package.json
{
  "name": "react-basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "prepare": "husky install",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "husky": "^6.0.0"
  }
}

• husky 적용
  • 예) npx husky add .husty/pre-commit "npm test"
    => 커밋 전 npm test 실행
    
    

• lint-staged 설치
  • npm i -D lint-staged
    
    

• lint-staged 설정
  • package.json lint-staged 옵션 추가
  • npx husky add .husky/pre-commit "npx lint-staged"
  • prettier --write 옵션을 사용하기 위해서 npm i -D prettier 설치
  • commit 시, eslint에 설정된 옵션에 맞게 js 파일 자동 변경 후 커밋 실행

// package.json
{
  "name": "tictactoe",
  "version": "0.1.0",
  "private": true,
  "lint-staged" : {
    // 모든 js 파일이 stage에 올라왔을 때, eslint 수정하고 prettier 변경하고 git에 다시 추가
    "**/*.js" : [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  }
}