husky, lint-staged를 사용하자( sub : ESLint 자동화하기 )

1. husky? lint-stage?

 우리는 ESLint를 프로젝트에 적용시킬 때는 협업하는 모든 사람들이 같은 규칙 내에서 코딩을 하는 것을 예상한다. 하지만 가끔은 규칙을 지키지 않고 깃헙에 코드를 푸시할 때가 생긴다. 내 경우에도 가끔 오랜 코딩에 지쳐서 깜빡하고 ESLint 확인을 안하고 푸시할 때가 있었다. 뿐만 아니라 내가 직접 본 적은 없지만 어떤 팀에서는 전혀 규칙을 지키지 않고 코딩을 하는 사람도 있다고 한다.(그럼 왜 굳이 ESLint를 적용시켰을까...🥲)

 그래서 우리는 git commit 또는 git push와 같은 git 이벤트가 일어나기 전에 우리가 원하는 스크립트를 실행하기 위해서 git 이벤트 사이에 갈고리(hook)를 걸어주는 것이다. 이것을 git hook 제어라고 한다. 우리는 이런 git hook 제어를 위해서 husky 라이브러리를 사용할 것이다.

 그러면 lint-staged는 뭐냐? 우선 stage 상태를 이해해야한다. 파일들이 git add로 커밋 대상이 된 상태를 stage 상태라고 한다. stage 상태의 git 파일에 대해 lint와 우리가 설정해둔 명령어를 실행해주는 라이브러리다.

---

2. husky & lint-staged 사용하기

2-1.husky & lint-staged 설치하기💻

 이제 실질적인 코드들을 살펴보자. 우선 husky & lint-staged를 설치하자.

npx mrm lint-staged

 여기서 mrm이란 오픈소스 프로젝트의 환경 설정을 동기화 하기 위한 도구이다. mrm을 이용하면 lint-staged와 husky를 간편하게 설정해줄 수 있다.👍

 위 명령어를 실행하면 .husky폴더가 생기고 package.json 파일에 다음과 같은 코드가 추가로 생길 것이다.

{
  "scripts": {
    "prepare": "husky install"
  },
  "devDependencies": {
    "husky": "^6.0.0",
    "lint-staged": "^11.0.0",
  },
  "lint-staged": {
    "*.js": "eslint --cache --fix"
  }
}

---

2-2. husky 설정하기

 husky는 .husky폴더에서 설정을 해주면 된다.
하지만 우리는 mrm이 기본 설정을 해준 덕에 따로 설정을 해줄 것이 없다ㅎㅎ
.husky 폴더를 보면 pre-commit 파일에 다음과 같은 명령어가 있을 것이다.

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

npx lint-staged

위의 설정대로 git commit을 하기전에 npx lint-staged 명령어를 실행할 것이다.

---

2-3. lint-staged 설정하기

lint-staged는 약간 설정이 필요하다.

{
  "lint-staged": {
    "*.js": "eslint --cache --fix"
  }
}

기본적으로는 package.json 파일에 위와 같이 설정이 된다. 만약 .js파일에 eslint만 사용한다면 위처럼 놓고 사용해도 되지만 나는 타입스크립트를 이용할 것이므로 .ts 파일과 .tsx 파일 둘 다 검사할 것 이고 prettier도 사용하므로 다음과 같이 변형해서 사용했다.

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

---

2-4. Test해보기🌻

 이제 제대로 작동하는지 확인을 해보겠다.

git add .
git commit -m 'Test husky & lint-staged'

위의 명령어를 넣으면 다음처럼 나온다면 제대로 동작하는 것이다.

 위의 사진을 보면 우리가 설정한대로 git commit를 하기 전에 stage 상태에 있는 .ts와 .tsx파일들을 대상으로 eslint --fix와 prettier --write 명령어를 실행하고 있다. 그러다가 eslint 규칙상 에러가 난 부분이 있어 git commit을 못하게된 상황이다. 한마디로 아주 잘 작동한다!!😎

---

3. 마치며🥳

 이렇게 husky와 lint-staged 라이브러리를 이용하여 eslint를 강제로 할 수 밖에 없게 설정을 해보았다. 꼭 강제한다는 부분 말고도 내가 따로 eslint를 실행하지 않아도 자동으로 명령어를 실행해준다는 점도 매우 매력적이라고 생각된다.

💡직접 읽어보면 뼈가 되고 살이 되는 출처
👉https://go2zo.github.io/blog/2021/05/23/husky-v6/
👉https://github.com/typicode/husky/issues/949
👉https://taegon.kim/archives/10276
👉https://dev-syhy.tistory.com/57
👉https://shiningjean.tistory.com/86