git commit convention 잘지키는 환경 구성하기! (with commitlint, release-it)

블로그의 인기글을 보아하니 git commit convention이 인기인거 같아 환경구성에 대해 한번 다뤄보려고 합니다.

---

계획

계획은 다음과 같습니다.

비속어를 감지해서 replace 시키는 모듈을 만들어 npm에 publish 

이때 

1. commitlint와 husky를 이용해서 commit 규칙을 잘지키게끔 유도한다.

2. release-it을 이용해 publishing, versioning, change log도 편하게 관리한다!

 

이 두가지의 제약을 추가해서 구현해볼것입니다!

그럼 ㄱㄱ

---

사전지식

commitlint? husky? release-it? 이 세가지 도구를 처음들어보는 사람도 있을테니 이 도구들을 어떻게 이용할지 설명하자면,

 

commitlint ->

commit의 규칙을 지켰는지 확인할수 있는 도구

 

husky ->
commit 전에 lint를 잘지키고 있는지 등등의 제약을 넣을수 있는 도구

 

release-it ->
npm publishing(release) 시에 changelog를 commit에 따라 자동으로 작성해주고 git에 versioning, release log를 자동으로 업데이트 해준다.

 

다른 부분은 진행하면서 조금씩 설명을 덧붙이겠습니다.

---

환경구성

commitlint 구성

1) install

//homepage대로 global로 설치해도 무방
npm i -D @commitlint/cli @commitlint/config-conventional

2) setting (commitlint.config.js)

//@commitlint/config-conventional <- 룰하나하나 적기 귀찮으니 이용하는 일반적으로 많이 쓰는 rule preset임
module.exports = {
  extends: ['@commitlint/config-conventional']
};

3)제대로 되는지 테스트 <- 이건 아래 링크 Test section 보면 됩니다!

https://commitlint.js.org/#/ 

commitlint - Lint commit messages

---

husky로 commit시, commitlint 테스트

1) install

npm i -D husky

2) setting

# Activate hooks 
npx husky install 
# or
yarn husky install

#
npm pkg set scripts.prepare="husky install"
npm run prepare

3) add hook

npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

4) 제대로 되는지 테스트 

commit을 한번 해보면 됩니다!

 

링크의 로그 보시면, hihi라고 했더니 통과안되는거 보이져?? 
https://app.warp.dev/block/EPzpX4mq750Cf727a1kTxS

Warp

근데 이런식으로 commit을 한다면, 불편한점이 하나 느껴지시나요??

불편..

이런식으로 commit을 입력하게 되면, commitlint의 rule을 외운게 아니라면 쉴새없이 통과가 안될겁니다ㅠ

 

그래서 helper를 이용해서 commit을 편하게 해보죠!

---

commitizen 으로 commitlint에 맞는 commit 편하게 하기!

1) install

npm i -D commitizen cz-conventional-changelog

2) setting

//package.json에서
//...
"config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
//...

//husky에도 추가
npx husky add ./husky/prepare-commit-msg '#!/bin/bash
exec < /dev/tty && node_modules/.bin/cz --hook || true'

3) 테스트

이제 commit시에 cli에서 질문을 할텐데요! 

이런식으로여

질답을 마치면, 알아서 lint에 맞는 commit message를 뱉습니다. 이제 편안하네요!

편안~

링크를 보고 하셔도 되여! 조금 다르게 적혀있지만, 결론적으론 똑같은거에여!

https://github.com/commitizen/cz-cli

GitHub - commitizen/cz-cli: The commitizen command line utility. #BlackLivesMatter

---

release-it

이제.. 이 도구를 이용해서 release시에 지금까지 썼던 commit을 분석해서 npm publish시에 git에 알아서 push하고 change log를 만들고 tag를 만들고 release note를 추가하게 만들거에여!

 

1) install

npm install -D release-it @release-it/conventional-changelog

2) setting (.release-it.json)

이 부분은 복붙하셔도 되구 추가로 원하는 옵션이 있다면, 하단 링크를 보면서 커스텀으로 작성해주셔도 됩니다!

설명은 document에 너무 잘나와있어 생략하겠습니다.

{
  "git": {
    "commitMessage": "chore: release v${version}",
    "tagName": "v${version}"
  },
  "github": {
    "release": true
  },
  "npm": {
    "publish": true
  },
  "plugins": {
    "@release-it/conventional-changelog": {
      "infile": "CHANGELOG.md",
      "preset": {
        "name": "conventionalcommits",
        "types": [
          {
            "type": "feat",
            "section": "Features"
          },
          {
            "type": "fix",
            "section": "Bug Fixes"
          },
          {}
        ]
      }
    }
  }
}

3) package.json에 scripts 추가

"scripts": {
	//...
	"release": "release-it",
	//...
  },

4) 테스트 

https://github.com/release-it/release-it

GitHub - release-it/release-it: 🚀 Automate versioning and package publishing

---

이제 환경세팅은 끝났습니다.. 글로 쓰려니 한세월이네요 ㅠ
글이 길어져서 이 정도로 끊고 다음글로 이어서 쓰겠습니다.

나머지는 그냥.. 코드보시는게 나을거 같아 여기까지 쓰겠습니다. ㅎ 아래에 레포 링크 달아두겠습니다!

https://github.com/Kwonkunkun/cuss-word-filter-ko

GitHub - Kwonkunkun/cuss-word-filter-ko: 욕설 필터링하는 간단한 필터 - 한국어만

npm 모듈로도 배포해놓았으니, 한번 사용해보실 분들은 사용하면 좋을것 같습니다!

https://www.npmjs.com/package/cuss-word-filter-ko

cuss-word-filter-ko