[project] husky 초기세팅 #17
Conversation
related to: #14
There was a problem hiding this comment.
To. 준민
저희가 사용하는 lint는 eslint, stylelint, prettier가 있으므로 이 세 가지를 다 검사해주셔야 해요!!
지금은 제가 추가했지만 다음 번 프로젝트에선 이 부분도 신경 써주시면 좋을 듯 합니다!
husky와 lint staged 쉽지 않은데 정말 잘 해주셨어요!! 고생하셨습니다 :)
To. 모두들
eslint, stylelint와 prettier 에러 관련 테스트 완료했습니다 ◡̈
사실 prettier는 cmd + s 할 시 자동으로 고쳐줘서 에러 날 일이 없기에 없어도 될 거 같지만
혹여나 prettier 자동 수정 안 해주고 (ex. 모종의 이유로 prettier extension을 disabled 했을 때 등) commit 하려고 할 때 에러가 발생하는 것이 아닌 자동으로 수정되게 했습니다
본인 코드에서도 실행 되는지 확인들 해보시고
(바쁘면 스킵하세용~ 뭐 잘 되겠지 ㅋ)
코드 관련해서 궁금하신 점 있으시면 코멘트 남겨주세요
!! trouble shooting !!
위와 같은 오류가 뜨면서 husky가 작동이 안 된다면
이 2개의 명령어를 실행해보세요
|
감사합니다! 이번 초기세팅을 하면서 자주 사용하는 라이브러리들에 대해 알게되는 계기가 되었습니다! |
| "lint-staged": { | ||
| "src/**/*.{ts,tsx}": [ | ||
| "eslint --fix", | ||
| "stylelint --fix", | ||
| "prettier --write" | ||
| ] |
There was a problem hiding this comment.
굿굿! 야무지게 3개 다 잘 걸어주셨군요 최고최고
There was a problem hiding this comment.
언석형의 도움으로 되지 않았나.. 생각합니다
package.json
Outdated
| "prepare": "husky install", | ||
| "postinstall": "husky install", |
There was a problem hiding this comment.
prepare와 postinstall 두 개 다 써준 이유가 궁금합니다!
특별한 이유가 없다면 postinstall만 사용해도 괜찮을것 같아요
husky 공식 문서에서도 postinstall로 예시를 써주고 있고,
이 링크에서도 postinstall을 권하고 있네요! 한 번 읽어보면 좋을것 같습니다
src/App.tsx
Outdated
| const Text = styled.div` | ||
| width: 100%; | ||
| height: 100%; | ||
| border: 1px; | ||
| `; |
🔥 Related Issues
💜 작업 내용
✅ PR Point
하지만 eslint와 prettier가 우선적으로 완료되지 않아, 아직 부족한게 있을 수 있어용...
😡 Trouble Shooting
husky 등장배경: eslint나 prettier를 통해서 오류가 나타나거나 어느정도 자동수정이 되더라도
사람인지라 실수로 모든 것을 수정하지 못하였을 때 커밋하는 것을 방지함!
husky란? git hook 사용을 도와주는 라이브러리
→ git hook은 git이 어떤 이벤트가 생겼을 때 자동으로 특정한 스크립트를 실행하도록 함!
lint-staged란? 내가 add한 파일들( staged 상태)에 대해서 lint와 설정한 명령어를 실행하도록 하는 라이브러리
☀️ 스크린샷 / GIF / 화면 녹화
📚 Reference
참고