husky , lint-staged

husky

 

https://github.com/typicode/husky

 

GitHub - typicode/husky: Git hooks made easy 🐶 woof!

 

 

git hooks를 쉽게 사용하게 도와주는 package

git을 쓰다가  push, commit을 하기 전 점검을 한 번 더 할 수 있다. 

 

 

사용방법

1. 프로젝트를 준비하고 terminal 에 npm init -y 작성

2. git init

3. npm i husky -D

4. package.json 파일 "scripts" 부분에

"prepare": "husky install",

를 추가해준다.

 

 

5. npx husky install

 

6. npx husky add .husty/pre-commit "npm test" 

 husky 폴더안에 pre-commit  파일이 생김

 

7. git add -A

 

8. git commit -m "husky-test" 

 아래에서 에러가 뜬 부분 등을 보며 commit 하기 전 다시 한번 확인할 수 있다.

 

---

https://github.com/okonet/lint-staged

GitHub - okonet/lint-staged: 🚫💩 — Run linters on git staged files

lint- staged

변경사항이 있어 commit 하려는 파일이 있을때 lint를 돌리고 싶을때 사용하는 파일

 

1. npm i lint-staged -D

2.  json 파일이나 js 파일에서 설정을 추가한다

  "lint-staged" : {

    "**/*.js" : [                     // 모든 js파일

        "eslint --fix",             //틀린부분 수정

        "prettier --write",          // 이때 prettier가 설치가 안되어 있다면 설치 해야 한다.  npm i prettier -D

        "git add"                 //  변경된 사항을 git add 실행

    ]

  }

 

 

 

이렇게 하고 commit 을 했을때 에러가 나온다면

 

pre-commit에 있는 lint-staged 가 그냥 적혀있으면 어떤 명령어인지 모르기 때문에 

앞에 npx를 적어줘야 한다.

 

 

---

https://slides.com/woongjae/react2021#/17/3    패캠 공부중

React 2021