husky + lint-staged : 커밋 전 eslint, prettier 검사

husky + lint-staged를 이용해 eslint와 prettier가 적용 됐을 때만 커밋 가능하게 만들것이다~

 

그전에 husky와 lint-staged를 알아보자

 

# Husky

Automatically lint your commit messages,code, and run tests upon committing or pushing.

커밋 메시지, 코드를 자동으로 린트하고 커밋 또는 푸시 시 테스트를 실행하세요.

 

Husky는 git hook을 이용해 위와 같은 기능을 수행한다

Git Hooks란? 어떤 이벤트가 생겼을 때 자동으로 특정 스크립트를 실행하도록 할 수 있다. 클라이언트 훅은 커밋이나 Merge 할 때 실행되고 서버 훅은 Push 할 때 서버에서 실행된다. (https://git-scm.com/book/ko/v2/Git%EB%A7%9E%EC%B6%A4-Git-Hooks)

 

여기서는 git hook 중 pre-commit을 사용할 것이다!

말그대로 커밋 전에 검사하는 것~

 

# lint-staged

staged 상태의 파일만 lint 검사하는 노드 패키지이다.

 

커밋 할 때 husky의 pre-commit을 타고

yarn lint

를 실행한다면 모든 파일에 대해 lint가 실행된다.

하지만

yarn lint-staged

를 실행하면 staged된 파일(수정해서 git add된 파일)만 lint 검사를 한다

훨씬 효율적이고 검사속도도 빨라진다

 

---

 

설치 환경 yarn

 

# husky 설치

yarn add husky --dev

 

husky ver. 9.0부터는 init을 해줘야한다

npx husky init

Release v9.0.1 · typicode/husky

 

# package.json
"scripts": {
	...
    "prepare": "husky"
}

init을 하면 package.json - scripts에 prepare : husky 가 생긴다

 

echo "yarn run lint-staged" > .husky/pre-commit

husky ver. 9.0부터는 add 가 deprecated 돼서 아래와 같이 쳐야한다

echo 뒤에 명령어를 쳐주면 된다

npm 환경이라면 npm run lint-staged와 같이 치면 된다

이게 더 쉬워보인다

 

아무튼 허스키 설정은 여기서 끝

 

 

# lint-staged 설치

yarn add lint-staged --dev

husky도 lint-staged도 다 개발단계에서 사용해서 뒤에 --dev 붙였다

 

# package.json
"scripts": {
	...
    "lint-staged": "lint-staged",
},
  "lint-staged": {
    "*.{js,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
}

package.json에 위 코드를 추가해준다

lint-staged 안에 내용은 커스텀 하면 된다..

 

bae@MacBookPro test % git commit                                     
Debugger attached.
yarn run v1.22.19
$ lint-staged
Debugger attached.
✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
Waiting for the debugger to disconnect...
✨  Done in 4.30s.

터미널에 커밋을 하면 lint-staged가 돌아간다

 

✖ prettier --write failed without output (ENOENT).

 

그리고 커밋해봤는데 계속 이게 뜨길래 검색해봤는데.. prettier 설치를 안했었다 ㅍvㅍ..