lint-staged

• git staged 상태의 파일들을 타겟으로 뭔가 할 수 있게 해줌

husky

• git hook 동작에 대한 정의를 .git 파일이 아닌 .husky에서 관리하여 repository에서 공유가능
• prettier가 달라서 불필요하게 커밋 히스토리가 쌓이는 문제 해결
• eslint를 지키면서 코드 통일을 유지

-> 커밋 전에 위 규칙을 지킬 수 있도록, eslint 체크 + prettier 적용을 자동화하기 위해 lint-staged와 husky를 적용하였습니다.

1. 패키지 설치 및 다음 명령어 입력

yarn add -D lint-staged husky
yarn husky install
yarn husky add .husky/pre-commit "yarn init lint-staged --no-stash"
 

2. package.json에 다음 코드 추가(동작시키고 싶은 명령어 순서대로 입력)

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

Reference

• https://github.com/okonet/lint-staged
• https://github.com/typicode/husky