husky, lint-staged란 무엇인가?!

김정민·2022년 5월 24일

husky란

Git는 Hook이라는 기능을 가지고 있습니다. Git에서 특정 이벤트(add, commit, push 등)를 실행할 때, 그 이벤트에 Hook을 설정하여 Hook에 설정된 스크립트를 실행할 수 있습니다.

1. 여기서 잠깐 Git hook이란 간단하게,

Git Hooks 는 Git 과 관련한 어떤 이벤트가 발생했을 때 특정 스크립트를 실행할 수 있도록 하는 기능이다. 크게 클라이언트 훅 과 서버 훅 으로 나뉘는데 클라이언트 훅 은 커밋, Merge 가 발생하거나 push 가 발생하기 전 클라이언트에서 실행하는 훅이다. 반면 서버 훅 은 Git repository 로 push 가 발생했을 때 서버에서 실행하는 훅이다.

husky란 Git Hook을 간편하게 사용할 수 있도록 도와주는 툴입니다.

2. 그럼 husky는 왜 쓰나요??

개발자는 Git 같은 서비스를 이용해서 코드를 공유하는 경우가 많은데, 보통은 팀이나 프로젝트 협업 하는 분들은 ESLint와 Prettier로 팀내의 규칙을 정해서 코딩을 진행합니다. 하지만 가끔씩 ESLint와 Prettier가 확인하지 않은, 오류가 있거나 읽기 어려운 코드가 Git에 공유되는 경우가 종종 있습니다.
그런경우를 사전에 방지하기위해 Husky를 이용하면, Git에 특정 이벤트(add, commit, push 등)이 일어나기 전 자동으로 ESLint와 Prettier가 작동하게 할 수 있다.

3. 설치방법

(husky@4에서 사용하던 package.json에 직접 설정하는 방법은 이제 사용불가(husky@6부터 변경))

// -d : package.json의 devDependencies에 저장
npm i -d husky
npx husky install

4. 설정

위의 코드를 정상적으로 실행하였다면 preject폴더에는 .husky 폴더가 생성되었을 것이다.
그리고 협업이나 다른 PC에서의 작업할 때를 생각해 아래의 스크립트를 추가해 주면 좋다.

//package.json
"scripts": {
	...
	"prepare": "husky install",
	..
}

---> 추가 설정은 lint-staged와 함께 설명

lint-staged란

정리하자면, lint-staged란 내가 add한 파일들에 대해서 git 파일에 대해 lint와 우리가 설정해둔 명령어를 실행해주는 라이브러리다. pre-commit
(문법 오류나 스타일 오류를 분석하고 표시 및 수정해주는 도구이다.)

왜 필요하냐,

husky만 사용하면 프로젝트의 모든 코드를 검사히기 때문에 비효율적이지만,
lint-staged는 Git의 staged한 코드만 검사해서, 보다 효율적인 lint가 가능하다

1. 설치방법

// -d : package.json의 devDependencies에 저장
npm i -d lint-staged

2. 설정

staged에 적용시킬 기능을 추가

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

project 내 모든 tsx,ts,jsx,js파일에 대해 검사하는 설정

3. +husky 설정

마지막으로 아래를 실행해준다

npx husky add .husky/pre-commit "npm run lin-staged" or "npx lint-staged" or "yarn lint-staged"

원하는 것과 쓰는 패키지툴에 따라 다른 것 같다!!

4. 마무리

그럼 이제 .husky/pre-commit 파일이 생겨났을 것이며 내용은 아래와 같은지 확인하기!!

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

npx lint-staged OR npm run lin-staged OR yarn lint-staged

이제 모든 설정이 끝나 커밋할 때마다 lint staged가 실행될 것입니다!!

추가정보

npx mrm lint-staged

라는 명령어를 실행하면 보다 간단하게 husky + lint-staged를 설정할 수 있다는데 경험해보는 것도 좋을 것 같다!!

같이보면 좋은 글

https://kir93.tistory.com/entry/husky-lint-staged%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%98%EC%97%AC-git-hook%EA%B1%B8%EA%B8%B0
https://velog.io/@do_dadu/husky-lint-staged%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%9E%90-sub-ESLint-%EC%9E%90%EB%8F%99%ED%99%94%ED%95%98%EA%B8%B0