eslint + husky + lint-staged로 CI 부담 덜어주기

0. TL;DR

• CI/CD 구축이 완료되었으나, CI단계에서 lint와 test를 모두 진행하는 것이 적절한지 고민
  • CI단계에서는 많은 코드가 한번에 추가될 것
  • 어긋난 코드를 한번에 수정하는데 많은 리소스가 소모될 우려가 있음
• Git hooks를 사용해 pre-commit 단계에서 lint catch를 하기로 결정
• husky와 lint-staged를 사용해서 구현

---

1. Why?

Pennyway 프로젝트에서 CI/CD 파이프라인 구축이 완료되었다. 대략적인 로직은 아래와 같다.

CI & CD

더 자세한 사항은 repository wiki에서 볼 수 있다.

고민

근데 CI에서 eslint를 catch하는 게 적절한지에 대한 고민이 생겼다. 현재 CI의 로직은 다음과 같다.

1. Main branch로 PR 작성
2. Github Actions와 AWS Amplify가 실행
   • test.yml workflow에 등록된 lint와 test를 진행
   • AWS Amplify가 Pull Request 요청에 대한 Web Preview URL을 댓글로 제공
3. 2번 단계가 성공적으로 완료될 시, 코드 리뷰 진행

우려되는 부분은 2번의 lint test 부분이였다. CI단계에서는 한번에 많은 코드가 추가될 것이고, 이걸 모두 확인하고 수정하는 것은 그 과정에서 많은 리소스가 소모될 우려가 있다.

 

이를 해결하기 위해 commit마다 pre-commit단계에서 eslint를 catch하는 방식으로 수정해보자.

---

2. How?

pre-commit단계에서 eslint를 catch하도록 하기 위해 3가지를 사용했다. Git Hooks, Husky, Lint-staged다.

사용 도구 설명

Git Hooks

• Git의 특정 중요한 이벤트가 발생할 때 자동으로 실행되는 스크립트
• 클라이언트 훅 / 서버 훅으로 나뉜다
  • 클라이언트 훅 : commit, merge, push 전(혹은 후)에 클라이언트에서 실행
  • 서버 훅 : git repo로 push되었을 때 서버에서 실행
• 이번에 사용한 hook은 commit 전 실행되는 pre-commit

Husky

• Git Hooks를 쉽게 관리할 수 있게 해주는 도구
• 사용자가 ./git/hooks 디렉토리에 스크립트를 넣을 경우 git에 올라가지 않음.
  • .git 폴더는 원칙적으로 gitignore 대상이기 때문
• 하지만.husky 폴더 내에 스크립트를 저장하면 git hook을 다른 개발자와 공유할 수 있다.
• 단, ./git 이 존재하는 디렉토리에 ./husky 파일이 있어야 정상적으로 작동이 가능
  • 이를 위해 package.json에서 install 실행 시, husky도 함께 install 되도록 설정해야

Lint-staged

• staged상태인 파일들에만 자동으로 lint를 적용하는 도구
• 매번 commit 할 때마다 전체 파일들에 lint를 적용하는 것은 비효율적, 이를 방지하고자 사용

구현

현재 yarn berry에서 임시로 버전을 낮춰 yarn classic을 사용하고 있기 때문에, 이에 맞춰서 구현하였다.

 

1. Lint-staged 설치

yarn add -D lint-staged

2. Husky 설치 및 기본 세팅

npx husky-init && yarn

3. pre-commit 설정

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

echo "🐶 Running lint-staged..."
yarn lint-front

• echo 부분은 실행될 경우 terminal에 출력되는 문구인데, 귀엽기도 하고 실행된다는걸 보여주려고 넣었다.

4. package.json 설정

  "scripts": {
    "postinstall": "husky install",
    "lint-front": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": "eslint --fix",
    "*.{js,jsx,ts,tsx,css,md}": "prettier --write"
  }

• 기본 설정은 prepare로 되는데, yarn은 prepare를 지원하지 않기에 postinstall로 해야한다.
• pre-commit에서 lint-front가 실행되면, lint-staged에 명시된 작업이 동작한다.

---

3. 래퍼런스

https://typicode.github.io/husky/

Husky

https://velog.io/@rookieand/Git-Hook은-무엇이고-Husky는-왜-쓰는걸까

Git Hook은 무엇이고, Husky는 왜 쓰는걸까?

https://mong-blog.tistory.com/entry/husky%EB%A1%9C-Conventional-Commit-%EC%B2%B4%ED%81%AC%ED%95%98%EA%B8%B0

husky로 Conventional Commit 체크하기

https://kyounghwan01.github.io/blog/etc/husky

husky, lint-staged로 git commit 전에 eslint, prettier 체크하기