리액트-타입스크립트 템플릿 프로젝트 만들기
- CRA, typescript 템플릿
ESLint 설정하기
- CRA로 생성한 프로젝트에는 이미 eslint관련 디펜던시가 존재하고, eslint 설정이 있기 때문에 따로 eslint, eslint-config, eslint-plugin 들을 받지 않아도 된다. 다만, 설정을 내 입맛대로 바꾸고 싶으면 수정이 필요할 수 있다.
Prettier 설치와 설정하기
- prettier와 eslint 규칙이 출돌하는 부분이 있어서 config, plugin 설치해야 한다.
- IDE의 autosave 옵션을 켜도 된다.
husky 설정하기
- 커밋 전 코딩 컨벤션, 문법 오류 확인 또는 테스트를 해보는 용
- lint-staged를 사용하여 스테이징 상태의 파일에 eslint와 prettier를 실행하여 문법오류와 코딩컨벤션 오류를 검사하고 수정하는 데 쓸 수 있다.
참고
'프론트엔드' 카테고리의 다른 글
| React 환경변수 설정하기 (0) | 2022.09.15 |
|---|---|
| eslint plugin과 config 차이 (0) | 2022.09.14 |
| 『기초부터 완성까지, 프런트엔드』 15. 성능 (1) | 2022.02.02 |
| 『기초부터 완성까지, 프런트엔드』 13장. 14장 테스트 코드 예제 리뷰 (0) | 2022.02.02 |
| 『기초부터 완성까지, 프런트엔드』 14. 스냅숏 테스트와 시각적 테스트 (0) | 2022.01.19 |