문제 해결하기
이전에 @typescript-eslint와 prettier를 설정한 적이 있습니다.
prettier는 코드 포맷팅을 하기 위한 라이브러리이기 때문에 크게 설정할 내용이 없었는데요.
eslint의 경우에는 문제가 있었습니다.
eslint를 강하게 사용할 수 없다 💪
저는 기존에 CRA을 이용해서 프로젝트를 생성했었습니다.
기본적으로 typescript도 사용하고 있었습니다.
CRA로 생성하게 되면 프로젝트를 실행, 수정할 때마다 컴파일이 새롭게 되고 lint 검사도 같이 진행하게 됩니다.
그런데 만약 eslint 설정에서 no-console을 error로 정의하게 되면 어떨까요?
콘솔을 찍어보기 위해서 작성한 console.log() 명령어를 error가 됩니다.
그렇다고 no-console을 error로 정의하지 않고 그대로 사용한다면, 배포했을 때 console.log() 명령어가 배포된 프로젝트에 반영될 수 있는 상황을 나올 수 있습니다.
결국 어떠한 조치를 하지 않으면, eslint를 제대로 활용하고 있지 않다라는 생각이 들었습니다.
혹시 위의 내용을 더 쉽게 풀어나갈 수 있는 방법이 있다면 공유해주시면 감사하겠습니다 🙏
그렇다면lint 검사를 하지 않는다.
CRA에서 제공하는 eslint 검사를 자동으로 하지 않게 설정하는 것입니다.
그리고 git hook을 이용해서 특정 시점에 lint 검사를 할 수 있도록 하는 것이죠!
저는 craco 라이브러리를 사용하고 있기 때문에 craco.config.js 파일을 수정했습니다.
아래와 같이 enable을 false로 설정하면 자동으로 lint 검사하는 설정을 끌 수 있습니다.
module.exports = {
eslint: {
enable: false,
}
}eslint 룰 수정하기 ✏️
모든 eslint 룰을 다 나열할 수는 없지만, no-console, no-empty 와 같이 불필요한 코드를 사용하지 않게 해주는 룰을 추가했습니다.
다양한 룰들을 설정할 수 있으니 @typescript-eslint, eslint 페이지에 들어가셔서 본인에게 맞는 룰들을 추가하면 좋을 것 같습니다.
git hook을 통한 lint 검사
이미 git은 특정 상황에서 스크립트를 실행할 수 있도록 hook이라는 기능을 지원하고 있습니다!
별도로 설치할 필요도 없고, git으로 관리되고 있는 폴더에서 cd .git/hooks/ 명령어를 입력하고 ls 명령어를 입력하면 git이 제공하는 특정 상황을 볼 수 있습니다.
하지만 아쉽게도 git hook은 원격으로 저장하고 관리할 수 없습니다.
그래서 git hook을 공유하기 위한 여러가지 방법들이 나왔는데 저는 그 중 husky를 사용해보고자 했습니다.
Husky 도입 🐶
Husky
git hook에 따라 원하는 동작을 하게 도와주는 패키지git hook에 대한 정책을 관리하고 공유할 수 있다.git add나commit,push가 시행되기 전이나 후 등 여러 조건에 원하는 스크립트를 실행시켜준다.
husky 설치
yarn add --dev huskypackage.json에 코드 작성
"scripts": {
"prepare": "husky install"
}husky 폴더 생성
명령어를 실행하고 나면 .husky 폴더가 생성됩니다.
yarn prepare해당 폴더에서 스크립트 파일을 추가할 수 있습니다.
특정 이벤트에 실행할 스크립트 추가 (pre-commit)
해당 스크립트를 추가하면 .husky 폴더 안에 pre-commit 파일이 생성됩니다.
husky에서 제공하는 다양한 시점이 있지만, 대부분 pre-commit을 사용하는 것 같았습니다.
lint 검사 뿐만 아니라 테스트를 진행할 수도 있으니 다양한 부분에서 활용이 가능합니다.
npx husky add .husky/pre-commit 'yarn init'추후에
'yarn init'과 같은 명령어가 수정되면 해당 파일 안에서 수정하면 됩니다.
commit 전에'yarn init'명령어를 실행하는 코드입니다.
lint-staged ⚙️
lint-staged는 git에서 stage 단계에 있는 파일들만 검사해주는 라이브러리입니다.
위와 같이 작업을 하다보니 제가 작업한 파일만 lint 검사를 하는 것이 아니라, 모든 프로젝트 파일에 대해서 lint 검사를 진행하게 됐습니다.
제가 작업한 파일에 대해서만 검사를 해줄 수 있는 도구가 필요했습니다.
lint-staged 설치
yarn add --dev lint-stagedpackage.json에 코드 작성
"scripts": {
"lint-staged": "lint-staged"
}
"lint-staged": {
"src/**": [
"eslint"
]
}pre-commit 파일 수정
yarn init --> yarn lint-staged마무리
위의 내용들은 eslint가 설정이 되어 있는 가정이 있습니다.
husky와 lint-staged를 적용했기 때문에, 앞으로는 디버그할 때는 자유롭게 코드를 작성해서 사용할 수 있습니다! 👏
협업하기 위해서 git을 사용하는 순간에는 lint 검사를 진행하게 될 것입니다.
prettier write 같은 작업도 같이 할 수 있고 테스트 코드에 대한 테스트도 진행할 수 있습니다.
코드 퀄리티도 더 보장이 잘 될 것이고, 코딩 컨벤션도 잘 지킬 수 있게 되겠죠!
개인적으로 Husky와 lint-staged의 적용은 너무 만족하고 있습니다!
아직 해결하지 못한.. 🤦♂️
eslint 검사를 진행할 때 warning만 나온다면, warning에 대한 표시는 해주지 않고 통과됩니다..
warning을 띄워주고 commit이 되야할 것 같은데 말이죠..
그래서 error가 있을 때만 같이 보여주고 이후의 작업이 멈춥니다.
이 부분은 조금 더 확인을 해봐야될 것 같습니다!
혹시나 sourceTree를 사용한다면 🌲
yarn을 찾을 수 없다는 메시지가 계속 나와서 한참을 헤맸습니다..
맥에서 node와 관련된 경로 이슈로 나와 있는데.. 저는 다른 방향으로 해결이 됐습니다!
기존에 pre-commit에 작성된 yarn을 npx로 변경했더니 문제가 해결됐습니다.. ㅎ
이후에는 sourceTree와 Intellij와 같은 IDE에서도 제대로 동작이 됐습니다.
기본적으로 IDE 터미널에서 해당 내용을 파악하는 것이 개인적으로 제일 편했습니다.
해당 소스코드를 바로 찾아갈 수 있다는 장점이 제일 큰 것 같습니다!
