Husky

以已存在项目为例

1、初始化husky

npx husky-init && npm install       # npm
npx husky-init && yarn              # Yarn 

npm install --save-dev @commitlint/config-conventional @commitlint/cli # 安装commitlint-cli与config-conventional

2、它将修改package.json 文件，新增一个脚本命令，并创建一个可以编辑的pre-commit钩子，默认情况下，当您提交时，它将运行npm test。

"scripts": {    ...    "prepare": "husky install"  },

3、执行以下命令.husky文件下新增commit-msg文件

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

commit-msg文件内容

#!/usr/bin/env sh. "$(dirname -- "$0")/_/husky.sh"npx --no-install commitlint --edit $1

也可以手动添加pre-commit文件

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

4、配置package.json 文件

"husky": {    
    "hooks": {    
        "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" 
   } 
 }

5、生成commitlint.config.js文件

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

6、添加预定义类型

/** 
* fix: 表示修复了一个 bug（这和语义化版本中的 PATCH 相对应）。 
* feat: 表示新增了一个功能（这和语义化版本中的 MINOR 相对应）。 
* docs: 表示修改了文档，没有影响代码。 * style: 表示修改了代码风格，不影响代码原功能。 
* refactor: 表示重构，不同于 style，是在设计层面的修改。 * perf: 表示提升性能。 
* test: 表示修改了测试代码。 * chore: 表示其他杂项修改，build、ci 之类的修改也在这里面。 
* merge: 表示合入代码，在手动提交时使用。Gitlab MR 合入时可以保持默认消息格式。 
* revert: 表示 revert 之前的代码，在手动提交时使用。Gitlab 提供的默认 Revert 消息可以保持。 
*/ 
module.exports = {   
 extends: [   
    '@commitlint/config-conventional' 
 ], 
 rules: {        
  'type-enum': [     
       2,           // 表示必须输入的           
      'always',
       [            
          'fix',          
          'feat',         
          'docs',        
          'style',       
          'refactor',       
          'perf',              
          'test',     
          'chore',             
          'merge',        
          'revert'          
      ]    
   
   ]     
 }
};

7、到这里就可以测试提交类型检测了，如果我们提交信息中不符合提交规范，则会报错

如果package.json文件中，type:"module",则commitlint.config.js中需要通过export default 的形式导出配置，使用module.exports会报错，不信可以试试哦！

这是提交成功样子

Commitizen

#全局安装commitizen node模块

npm install -g commitizen

安装cz-conventional-changelog

yarn add cz-conventional-changelog
npm install cz-conventional-changelog --save-devp

配置package.json

 "scripts": {
    ...
    "commit": "git add . && git cz"  },
"config": {    "commitizen": {      "path": "./node_modules/cz-conventional-changelog"    }  },

还可以在package.json文件中配置自定义描述

也可以引入[cz-customizable](https://juejin.cn/post/7094919796373848071) 对type类型、scope范围进行自定义配置,此处不对此工具做详细讲解，可查看此文章 juejin.cn/post/709491…

有问题的地方欢迎大家指正～～～

react 配置提交规范工具 commitizen + husky

Husky

Commitizen