Webpack 이해하기 (7) - Husky로 local 코드 품질 관리하기

7. Husky로 local 코드 품질 관리하기

Whay is Husky?

• pre-commit (커밋 전) 단계에서 코드 린팅 및 포매팅 자동화를 통해 코드 품질을 관리하는 도구
• 팀으로 작업시에 설정한 린팅,포매팅을 자동 적용하기 때문에 일관성 있는 코드를 작성할 수 있다.

[1] 디펜던시 설치

yarn add -D husky@4 lint-staged

husky

• husky는 Git 훅(hooks)을 쉽게 관리하고 사용할 수 있게 해주는 도구입니다.
  • ( *Git Hook : 특정한 Git 이벤트(예: 커밋, 푸시)가 발생할 때 자동으로 실행되는 스크립트 )

lint-staged

• Git의 staged 파일(커밋하기 전에 스테이징된 파일)에 대해 린트(lint)나 다른 자동화된 프로세스를 실행하는 도구

husky를 사용하여 Git의 pre-commit 훅에 ESLint와 Prettier를 연결할 수 있습니다.

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "eslint src/**/*.js && prettier --check src/**/*.js"
    }
  }
}

 

 

[2] package.json : lint-staged configuration 추가

• Git pre-commit 시점에서 자동으로 실행될 명령들을 정의한다.
  • src폴더 내부 모든 디렉토리에 대해 해당 확장자의 파일에 자동 린팅 수정 & 포매팅 수정을 commit 전에 적용
  • 린팅에러가 아니라 formatting 에러만 존재한다면 이를 자동으로 수정하고 커밋을 진행한다.

"lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json}": [
      "eslint --fix"
    ],
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write"
    ]
  }

 

[3] package.json : husky를 통해 pre-commit 단계에서 실행할 git hook 정의

• 프리커밋 단계에서 lint-staged 명령어 실행 ( lint-staged 옵션에 정의한 설정이 적용된다.)

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },

위 설정을 적용시 linting 관련 수정할 수 없는 에러가 존재하는 코드는 commit단계에서 커밋을 중단하고 에러를 띄운다.

( formatting 관련은 자동수정 후 커밋 )

예시)

• 사용되지 않는 변수 에러 : 린팅에러 발생
• jsx외부 홑따옴표(’’) 사용 포매팅에러 : 자동 수정 후 커밋

 

Reference 

https://www.youtube.com/watch?v=8b0OfT0vBsU&t=97s