허스키를 통한 린팅, 포맷팅 자동화

일단 기본적으로 prettier와 eslint가 보일러 플레이트에 어느정도 설치가 되있는 상황이였습니다. 

그런데 eslintrc에는 아주 단순한 심플 담백하게 셋업이 되어있어서 다시 처음부터 해봐도 괜찮다는 생각이 들었습니다.

일단 처음 npm init @eslint/config를 통해 초기 세팅을 도움 받아보고자 합니다.

 

1. Eslint 설치 및 초기 세팅 

위 처럼 세팅이 되는데, 피어 디펜던시가 많이 안맞는다면.. 강제로 다운로드하고

저는 위와 같이 airbnb 코드 스타일에 타입스크립트까지 적용되게끔 열심히 구글링해서 적용해봤습니다.  

 

2. prettier 설치 및 Script 추가 

 

https://prettier.io/docs/en/install.html

Prettier · Opinionated Code Formatter

허허허헣.... 에러가 많이 나오네요. 일단 먼저 잡고 갈게요. .  여기서 prettier랑 eslint랑 rule이 겹치는 부분이 생기는데요. 그때는 이걸 더해주시면 됩니다. extends도 설치해주세요. 

eslint랑 prettier 겹치는 rule들을 알아서 비활성화 시켜줍니다. 그리고 눈감아줄 Rule들은 Off해줍니다. 

 

3. husky, lint-staged 설치 및 script 추가 

이제 허스키를 설치해봅시다. 여기를 많이 참고했습니다. 

https://amorfati0310.github.io/learning-note/elint-prettier-lint-staged.html

ESlint - Prettier - Lint-Staged-Husky 적용기 | Dali's devLog

 

일단 husky와 lint-staged를 설치하겠습니다. 

prepare에 넣은 명령어는 npm install 할때 자동으로 실행이 되게 됩니다. 기존 .husky 지우고 허스키에 pre-commit 명령어를 추가해주고, lint-staged를 실행시켜줄 스크립트 추가했습니다. 그리고 밑에 husky, lint-staged 설정은 package.json 하단과 같이 추가했습니다. 

 

정상적으로 이제 잘 되는거 같네요. ㅎㅎ... 이거 한다고 애먹었네요.