使用commitlint 规范commit格式

7,454 阅读2分钟

1、所使用插件

规范commit格式:commitizen & cz-conventional-changelog

  • commitizen/cz-cli:需要借助它提供的 git cz 命令替代 git commit 命令, 帮助生成符合规范的 commit message.
  • cz-conventional-changelog:做为 commitizen 指定的 Adapter,使得 commitizen 按照指定的规范帮助我们生成 commit message。

校验commit格式:@commitlint/config-conventional & @commitlint/cli & husky

  • commitlint: 可以帮助我们 lint commit messages, 如果提交的不符合指向的规范, 直接拒绝提交。
  •  @commitlint/config-conventional :作为校验的配置。
  • husky:提供git hook。

2、配置步骤

规范commit格式

step1: 全局安装:npm install -g commitizen

step2: 项目级安装:npm cz-conventional-changelog

step3: 在package.json中配置:

"config": {
   "commitizen": {
        "path""node_modules/cz-conventional-changelog"
    }
}

测试修改一处代码,执行git add . ,再执行git cz ,出现提示如下,则说明配置成功

image.png

校验commit格式

step1: 项目级安装:npm i -D @commitlint/config-conventional @commitlint/cli

step2: 同时需要在项目目录下创建配置文件commitlint.config.js, 写入:

module.exports = {
    extends: ['@commitlint/config-conventional'],
    rules: {}
};

step3: 结合 Husky校验 commit message 的最佳方式是结合 git hook, 所以需要配合 Huskynpm i -D husky

step4:查看husky版本

若husky版本<5.0.0:

在package.json中配置:

"husky": {
    "hooks": {
      "commit-msg""commitlint -e $GIT_PARAMS"
   }
},
  • 若husky版本>=5.0.0:

执行 npx husky install 安装git钩子

执行 npx husky add .husky/commit-msg 'npx commitlint --edit $1'  启用适配commitlint的commit-msg hook

(注意这里使用的是单引号而不是双引号)

1. 安装及配置成功后,执行git add . ,再执行git commit -m "feat: test" ,出现提示如下:

image.png

补充1: 有可能遇到husky安装后提示"lint-staged command is not found"的情况:

解决方法:

运行npm install lint-staged --save-dev,然后在package.json中配置:

"lint-staged": {
    "*": [
        "mew fix --replace"
    ]
},

补充2: 若出现husky不生效情况:

解决方法:

运行git config --list 查看git配置

查看是否存在 hooksPath,如果存在 hooksPath 则将其移除

移除命令:git config --unset core.hookspath

3、使用方法

方法一:通过git cz命令引导填写commit msg,提交commit并校验

image.png

image.png

方法二:跳过引导,直接使用git commit -m "msg",提交commit并校验

  • 不符合规范,提交失败:

image.png

  • 提交成功:

image.png

方法三:使用SourceTree,提交commit并校验

注意: 必须使用命令行打开SourceTree,git hook才生效

打开Iterm,输入:open -n /Applications/Sourcetree.app 打开SourceTree,然后正常进行操作即可。

  • 不符合规范,提交失败效果如下:

image.png