Angular의 허스키 후크 🐶

허스키란?
Husky는 테스트 실패 또는 형식이 올바르지 않은 파일과 같이 바람직하지 않은 변경 사항을 저장소에 푸시/커밋하는 것을 방지합니다. 우리가 올바르지 않은 일을 저지르려고 하면 🐶는 이렇게 말할 것입니다: 우와!

어떻게 작동합니까?

npm install husky --save-dev

package.json에 후크를 추가합니다.

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "npm test",
      "pre-push": "npm test",
      "...": "..."
    }
  }
}

허스키가 우리를 어떻게 도울 수 있으며 이 게시물에서 무엇을 다룰까요?

Prettier를 실행하고 형식이 올바르지 않은 파일 피하기

푸시하기 전에 테스트를 실행하고 모두 통과하는지 확인하십시오

.

프리티어가 뭔가요?
Prettier는 프로젝트 파일에 대해 통일된 패턴을 갖도록 코드 형식을 지정합니다.

어떻게 작동합니까?
종속성을 설치하고 다음 단계를 따라야 합니다.

npm i prettier --save-dev

.prettierrc를 추가하여 편집자가 Prettier를 사용하고 있음을 알립니다

포맷할 파일을 제외하기 위해 .prettierignore를 추가함

프로젝트에 Prettier가 실행 중이므로 첫 번째 후크를 추가하겠습니다.

후크 #1: 더 예쁘다
우선 우리는 설치해야합니다

npm install --save-dev pretty-quick husky

package.json에 사전 커밋 후크를 추가합니다.

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }
}

그게 다야, 이제 우리는 그것이 작동하는지 볼 것입니다

app.component.html에 추가 공백을 추가하겠습니다(모든 파일 가능).

마지막으로 나는 무슨 일이 일어나는지 보기로 약속할 것이다

멋진! Prettier pre-hook이 내 파일을 수정했습니다(더 이상 추가 공백 없음).

Prettier Visual Codeextension를 사용하고 IDE를 설정하여 파일을 저장할 때 코드를 포맷할 수도 있습니다. 그러나 로컬에서만 작동하며 팀의 모든 개발자 컴퓨터에서 이 구성이 필요합니다. 어떤 이유로 개발자에게 이 설정이 없는 경우 형식이 지정되지 않은 일부 코드가 푸시되어 병합 충돌이 발생할 수 있습니다.

후크 #2: 테스트 실행
이것은 매우 간단합니다. 단위 테스트 실패로 커밋을 방지합니다. 우리가 해야 할 유일한 일은 사전 커밋 후크에 추가 문장을 추가하는 것입니다(브라우저를 열지 않기 위해 헤드리스 테스트를 실행하고 있음에 유의하십시오).

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged && ng test --watch=false --browsers=ChromeHeadless
    }
  }
}