[Husky, commitlint, lint-staged] commit convention 체크를 위한 ESlint 검사 자동화

팀원이 추가되면서 협업을 위해 commit convention을 체크해주는 라이브러리를 사용했다.
이에 대한 내용을 정리하고자 한다.

패키지 매니저는 yarn을 사용했는데
공식문서에서 default로 제공하는 내용과 좀 차이가 있어 npm을 사용하는게 더 나을 것 같다.

Husky 공식문서 - Get Started

Get Started

1. 설치

yarn add --dev husky

2. init

(yarn은 init 대신 How to 섹션에 있는 내용을 참고해야 함)

1) package.son script 작성

{
  "scripts": {
    // Yarn doesn't support prepare script
    "postinstall": "husky",
    // Include this if publishing to npmjs.com
    "prepack": "pinst --disable",
    "postpack": "pinst --enable"
  }
}

2) Run

# Yarn doesn't support `prepare`
yarn run postinstall

---

3. commitlint 라이브러리 추가

커밋 컨벤션 체크를 위해 사용
commitlint 공식문서 Get Started

1) 설치

yarn add --dev @commitlint/{cli,config-conventional}

타입스크립트 사용으로 @commitlint/types도 추가해줬다

yarn add --dev @commitlint/types

2) commitlint.config.ts 파일 추가

echo "export default { extends: ['@commitlint/config-conventional'] };" > commitlint.config.ts

3) typescript-configuration 설정
configuration-rules 참고해서 작성하면 된다.
나는 팀원분이 설정하신 파일을 그대로 사용했다 키득키득

import type { UserConfig } from '@commitlint/types';
import { RuleConfigSeverity } from '@commitlint/types';

// 상세 규칙 : https://commitlint.js.org/reference/rules.html
const Configuration: UserConfig = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      RuleConfigSeverity.Error,
      'always',
      [
        'FEAT',
        'FIX',
     	...
      ],
    ],
    'type-case': [RuleConfigSeverity.Error, 'always', 'upper-case'], // type-enum 대문자만 허용
    'subject-max-length': [RuleConfigSeverity.Warning, 'always', 50], // 제목 50자 이내
    'subject-full-stop': [RuleConfigSeverity.Error, 'never', '.'], // 제목 끝에 마침표 사용하지 않음
  },
};

export default Configuration;

---

4. ./husky/commit-msg 파일 생성

.husky/- 폴더 하위의 파일명으로 파일 컨벤션(ex. commit-msg, pre-push 등) 작성되어 있음 참고!

yarn commitlint --edit "$1" || {
  echo "사용하고 싶은 commit 에러 메시지 작성"
  exit 1
}

---

5. lint-staged 라이브러리 추가

1) 설치

yarn add lint-staged --dev

2) script 추가

"lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "eslint --cache"
    ]
  },

3) ./husky/pre-push 파일 추가

yarn lint-staged