prettier, eslint 자동 적용 ( feat.husky)

Doodream·2023년 2월 22일

husky란 ?

git commit, git push 같은 이벤트가 일어났을 때 실행시켜주는 스크립트를 훅이라고 합니다.

이러한 git hook을 구현해주기 위해서 husky라는 것이 필요합니다.

왜 필요한가요 ?

혼자 코딩을 하는 사람도 있지만 대부분 협업을 통해서 프로젝트를 완성합니다. 때문에 다른 사람이 보기에 이해하기 쉽고 편한 코드로 짜기위해서 여러한 규칙 (convention)을 추가합니다. eslint, prettier 를 통해서 코드의 일정한 규칙을 감지하거나 자동으로 수정할 수 있는데요.

husky 라는 도구를 통해서 깜빡 잊고 수정을 안했을 경우를 대비해 commit 이벤트가 발생하면 eslint, prettier를 적용하여 자동 수정함으로서 규칙을 자동으로 맞추는 상황이 필요합니다. 사람손으로 매번 lint check 하기 귀찮습니다. 혹은 리뷰에서 하기 귀찮죠. 아니면 서로 다른 IDE를 통해서 eslint, prettier 수정 설정을 하지 않은 사람도 있습니다. 이들 모두 다른 환경속에서 코드를 짜기 때문에 같은 환경에서 코드를 짤 필요가 있습니다. 이는 생산성의 향상으로 이어지기 때문입니다.

위 과정에서 commit 시 eslint 및 prettier를 자동적용시켜주는 git hook을 만들려고 합니다.

lint-staged 라는 개념이 필요한데 아래와 같습니다.

lint-staged ?

일반적으로 prettier나 eslint와 같은 linter를 설치해서 코드의 일관성과 품질을 높일 수 있도록 돕습니다.

이는 git의 pre-commit 훅을 이용해서 lint-staged 설정파일에 설정된 명령어로 linter를 실행하고 이런 변경사항에 대해서 git stage 상태에 추가합니다.

자동 코드 수정 과정

위 방식을 이용해서 linter와 포멧팅이 auto fix되는 자동화 순서를 알아봅시다.

git commit 이벤트 발생 → git husky에서 제공하는 pre-commit 파일 실행
pre-commit 파일에서 _/husky.sh 파일 실행 : husky 스크립트 실행,
package.json에서 설정한 lint-staged 실행 , eslint-staged, prettier 자동 수정후 stage 반영
commit 실행

lint-staged & husky 설치

yarn add -D lint-staged husky

git husky 파일 설정

/.husky/pre-commit

#!/usr/bin/env sh
# 현재 브렌치의 네임을 branch에 저장
branch="$(git rev-parse --abbrev-ref HEAD)"

# branch가 main이라면 문구를 노출 시키며 종료
if [ "$branch" = "main" ]; then
  echo "You can't commit directly to main branch"
  exit 1
fi

# husky 스크립트를 쉽게 제공해주는  _/husky.sh 스크립트를 실행합니다. 
. "$(dirname -- "$0")/_/husky.sh"

yarn lint-staged

# Merge시에 새로 생성된 파일에서 잘못된 import가 발생할 수 있으므로 전역에서 type error 체크
yarn tsc --noEmit

현재 브렌치가 main 이라면 push 하는 것을 금지했습니다. github의 branch 룰을 통해서도 설정해줄수 있습니다만, 안전은 다다익선...

package.json 에서 lint-staged 설정

{
	// eslint --fix: eslint가 감지한 코드 스타일 문제를 자동으로 수정합니다. 
	// prettier --write: prettier가 감지한 코드 스타일 문제를 자동으로 수정합니다. 
	"lint-staged": {
    "**/*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  },
}