문제를 해결하려면
전에 @typescript-eslint그리고 prettier설정되었습니다.
prettier코드 서식 지정 라이브러리이므로 설정할 필요가 없습니다.
eslint의 경우 문제가 있었습니다.
Eslint를 많이 사용할 수 없습니다
전에 나 CRA로 프로젝트를 만들었습니다.
원래 typescript또한 사용
CRA로 생성하면 프로젝트를 실행하거나 수정할 때마다 컴포지션이 갱신되며 Lint 검사도 수행됩니다.
하지만 만약 eslint 설정에서 no-console두번째 error이렇게 정의하면 어떨까요?
콘솔 사진을 찍기 위해 작성되었습니다. console.log() 명령 error된다.
예 no-console두번째 error로 정의하지 않고 그대로 사용하면 console.log() 명령은 배포된 프로젝트에 반영될 수 있는 상황에서 나올 수 있습니다.
결국 아무 조치도 취하지 않으면 eslint제대로 사용하지 못하고 있다고 생각했습니다.
린트 제어가 없습니다.
CRA에 의해 제공 eslint 검사가 자동으로 수행되지 않도록 설정합니다.
그리고 git hook언제든지 린트 검사를 할 수 있습니다!
그래요 craco 도서관을 이용하기 때문에 craco.config.js 파일을 수정했습니다.
이와 같이 enable두번째 false로 설정하면 자동 Lint 검사를 비활성화할 수 있습니다.
module.exports = {
eslint: {
enable: false,
}
}
eslint 규칙 수정
모든 eslint 모든 규칙을 나열할 수는 없지만 no-console, no-empty 다음과 같은 불필요한 코드 사용을 금지하는 규칙을 추가했습니다.
다른 규칙을 설정할 수 있습니다. @typescript-eslint, eslint 페이지에 들어가서 자신에게 맞는 규칙을 추가하면 좋을 것입니다.
git hook보풀 체크 오버
이미 git특정 상황에서 스크립트를 실행할 수 있도록 hook이 기능을 지원합니다!
별도로 설치할 필요 없음 git관리 폴더에서 cd .git/hooks/ 명령을 입력 ls 명령을 입력하면 git이것이 제공하는 특정 상황을 볼 수 있습니다.
하지만 불행하게도 git hook원격으로 저장 및 관리할 수 없습니다.
그래서 git hook그것을 공유하는 방법은 여러 가지가 있었다 husky나는 시도하고 싶었다.
허스키를 소개합니다
쉰
git hook원하는 작업 수행을 도와주는 패키지git hook정책을 관리하고 공유할 수 있습니다.git add나commit,push다양한 조건에서 원하는 스크립트를 실행합니다. B. 실행 전 또는 후.
허스키 설치
yarn add --dev husky
package.json에 코드 작성
"scripts": {
"prepare": "husky install"
}
허스키 폴더 생성
명령을 실행한 후 .husky 폴더가 생성됩니다.
yarn prepare
이 폴더에서 스크립트 파일을 추가할 수 있습니다.
특정 이벤트에서 실행할 스크립트 추가(사전 커밋)
이 스크립트를 추가하면 .husky 폴더 안에 pre-commit 파일이 생성됩니다.
husky제공되는 다양한 관점이 있지만 대부분 pre-commit사용하는 것 같았어요
린트 체크 뿐만 아니라 테스트도 할 수 있어 다양한 분야에서 활용이 가능합니다.
npx husky add .husky/pre-commit 'yarn init'
나중에
'yarn init'. 커밋하기 전에'yarn init'명령을 실행하는 코드입니다.
보푸라기 단계
lint-staged~이다 git~에 stage 이 라이브러리는 단계의 파일만 확인합니다.
위에서 설명한 대로 작업을 했기 때문에 작업 중인 파일뿐만 아니라 모든 프로젝트 파일에 대해 Lint 테스트를 실행했습니다.
작업 중인 파일만 스캔할 수 있는 도구가 필요했습니다.
lint-staged 설치
yarn add --dev lint-staged
package.json에 코드 작성
"scripts": {
"lint-staged": "lint-staged"
}
"lint-staged": {
"src/**": (
"eslint"
)
}
사전 커밋 파일 수정
yarn init --> yarn lint-staged
끝
위에 있는 사람 eslint라는 가정이 있습니다.
husky그리고 lint-staged, 이제부터 디버깅하면서 자유롭게 코드를 작성하고 사용할 수 있습니다!
협력 git사용하는 순간 린트 검사를 하십시오.
prettier write 동일한 작업을 함께 수행하고 테스트 코드를 테스트할 수도 있습니다.
코드 품질이 더 잘 보장되고 프로그래밍 규칙이 준수됩니다!
개인의 Husky그리고 lint-staged적용이 너무 만족스럽습니다!
아직 풀리지 않았습니다..
eslint 검사를 할 때 warning나오기만 하면 warning점수를 주지 않고 통과합니다.
warning팝업 commit그래야 한다고 생각합니다..
그래서 error이 경우에만 가 함께 표시되고 후속 프로세스가 중지됩니다.
이 부분은 조금 더 확인해봐야 할 것 같아요!
sourceTree 를 사용하는 경우
yarn계속 찾을 수 없다는 메시지가 나와서 한참을 헤매고 있었습니다.
Mac의 노드와 관련된 경로 문제로 나열됩니다. 다른 방법으로 해결했습니다!
과거에 pre-commit에 쓰여진 yarn두번째 npx로 바꿨더니 문제가 해결됐네요.. ㅎ
그후에 sourceTree그리고 Intellij와 같은 IDE또한 올바르게 작동했습니다.
원래 IDE 개인적으로 터미널에서 내용을 찾는 것이 가장 편리했습니다.
소스코드를 바로 찾을 수 있다는 것이 가장 큰 장점인 것 같아요!