-
오늘은 회사에서 일하면서 우연히 알게된 husky와 lint-staged에
대해 정리해보려고 한다.
그 이유는 최근에 관심이 가는 부분 중 하나가 '일관성 있는 코드'이기 때문이다.
혼자서 일을 하다보니 사실 지금은 문제가 없지만 새로운 사람이 들어올 수도있고,
내가 이직을 하고 다른 사람이 들어올 수도 있기 때문에 여러 상황을 고려하는 것이 좋겠다는
생각이 들었다.
그리고 사실 저는 코딩을 그렇게 잘하지 못하기 때문에 좋지 않은 코드라도 일관성 있게 작성하면
다른 분들이 오셨을 때 좀 더 빠르게 코드를 파악하실 수 있지 않을까? 하는 생각도 있었다 😥
여튼 그래서 알게된 husky와 lint-staged!
Husky
- husky는 깃을 좀 더 일관적으로 사용할 수 있게끔 도와주는 라이브러리이다.
- husky는 모든 git hooks를 대응한다.
❓ Git hooks란
- 깃에서 사용하는 hooks
- hooks는 깃이 실행하는 어느 포인트에서 트리거되는 액션 프로그램이다.
출처 : git
사실상 git hooks를 그냥 사용해도 된다 🤗
Huksy를 사용하는 방법
- husky-init을 사용하면 프로젝트에서 바로 husky를 사용할 수 있도록 기본 세팅을 도와준다
npx husky-init && npm install # npm npx husky-init && yarn # Yarn 1 yarn dlx husky-init --yarn2 && yarn # Yarn 2+ pnpm dlx husky-init && pnpm install # pnpm
- 해당 코드를 실행하면 package.json을 알아서 수정해주고, pre-commit이라는 hook을 샘플로 만들어준다.
pre-commit
- 해당 파일은 커밋 전에 실행되는 훅이다.
- 나 같은 경우에는 lint와 prettier을 꼭 커밋전에 실행하고 싶었기 때문에 해당 코드를 작성했다.
#!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh" yarn prettier:format yarn lint-staged
- 참고로 여기서 prettier:format과 lint-staged는 package.json의 script이다.
- pre-commit외에도 다양한 훅을 지원한다.
출처 : https://git-scm.com/docs/githooks
lint-staged
- 이 역시 일관된 코드 스타일을 유지하기 위해 사용하며, 수정한 최신 파일만 확인하도록 도와주는 라이브러리이다.
yarn install lint-staged
- 하단 코드는 package.json에 적어줬다.
- 참고로 리액트-타입스크립트 프로젝트이기 때문에 ts와 tsx파일을 확인해 준다.
"lint-staged": { "src/**/*{.ts,.tsx}": [ "eslint --fix", "prettier --write" ] },
출처 : https://www.npmjs.com/package/lint-staged
'TIL > FrontEnd' 카테고리의 다른 글
230214 TIL : 비동기 프로그래밍 (Promise) (0) 2023.02.15 230213 TIL : 비동기 프로그래밍 (call stack, task queue, event loop) (0) 2023.02.14 230207 TIL : JS 객체의 속성에 대하여 (0) 2023.02.07 230111 TIL : 장바구니 만들기 (feat. msw) (0) 2023.01.12 230109 TIL : 장바구니 만들기 (feat. redux-toolkit) (0) 2023.01.10 댓글