React(typescript)에 Husky + Lint-staged 추가

나는 당신이 이미 적어도 ReactJs 와 Git에 대한 기본 지식을 가지고 있다고 가정합니다 .

참고: 이 기사는 2021년 8월에 작성되었습니다. 이 구문은 나중에 버전 변경으로 인해 작동하지 않을 수 있습니다.

첫 번째 단계

create-react-app 명령을 사용하여 Typescript로 React 프로젝트를 설정합니다.

npx create-react-app automate-prettier-eslint-with-husky --template typescript

이제 프로젝트에 git을 추가할 수 있습니다. 여기서는 이 프로젝트에 GitHub를 사용합니다.

Github에 빈 저장소를 생성하면 다음과 같이 표시됩니다.

다음으로 아래 명령을 사용하여 git을 추가하고 첫 번째 커밋을 저장소에 푸시할 수 있습니다.

git remote add origin https://github.com/cheulong/automate-prettier-eslint-with-husky.git
git branch -M main
git push -u origin main

세 번째 단계

종속성 추가

yarn add -D husky lint-staged prettier

• lint-staged — 커밋하기 전에 명령을 실행하기 위해 .
• prettier — 코드의 형식을 지정합니다.

.prettierignore무시된 폴더를 추가하려면 만들기

스크립트에 Eslint 및 Prettier 명령 추가

• eslint src 코드 경고 및 오류를 확인합니다.
• prettier --write 코드를 포맷합니다.
• prettier --check . 코드 형식을 확인합니다.

마지막 단계

마지막으로 git hook을 활성화합니다.

npx husky install

npx husky add .husky/pre-commit "yarn lint-staged"

참고: 사전 커밋 파일을 편집할 수도 있습니다.

이제 테스트해보자

git add .
git commit -m"add husky lint-staged"

      

    
      

축하합니다 . ReactJs 프로젝트에 husky 및 lint-staged를 성공적으로 추가했습니다.

이 기사의 저장소 https://github.com/cheulong/automate-prettier-eslint-with-husky