commitizen + husky 规范git提交信息

mrLwc
12,130 阅读5分钟

前言

你是否有过这样的体验：

  1. 快下班了，提交代码赶紧溜，一顿啪啪啪，(git add .)(git commit -m "吧拉吧啦")（git push）；
  2. 修改的东西有点杂，，不知道提交信息写啥，又是一顿啪啪啪，好了提交了；
  3. 提交一时爽，查找泪两行，想寻当时的某次修改发现无从下手。。。。

有什么需求，就有什么工具，针对这些问题，现在业界用的最多的就是Angular团队使用的规范；通过git commit的时候弹出一个vim编辑器来编辑模板类型的一份提交信息，主要格式如下：

<type>(<scope>):<subject>
<BlLANK_LINE>
<?body>
<BLANK_LINE>
<?footer>

  • 第一行为必填项：主要就是 【提交类型(影响范围):简要描述】
  • body为详细描述，个人没怎么用过
  • 页脚为破坏性改变或者关闭了某个issues

安装

个人习惯针对于项目设置，所以直接在项目安装，而非全局配置，原理一样

$ npm i -D commitizen cz-conventional-changelog
$ npm i -g commitizen cz-conventional-changelog

### package.json

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

这里如果你是使用全局模式安装的话需要在全局根目录下建立.czrc文件,然后文件中输入内容{“path”:"cz-conventional-changelog"}或者键入如下命令：

echo '{"path":"cz-conventional-changelog"}' > ~/.czrc

如果你是使用全局安装的那么现在你到项目目录下使用git cz命令就可以看到vim编辑器的弹出内容了,如果是项目级安装，可以到package.json中的scripts命令中配置一条运行命令即可（type的具体类型配置文件介绍）

"scripts":{
    commit:"git-cz"
}


选择了提交类型后，会让你继续选择代码的影响范围


选择完影响范围后会让你依次填写简要信息，详细信息，页脚信息，是否提交（不一一概述了，都是写完enter键下一步）

commitlint校验

进行了上面的操作，其实对于一个自觉地人来说，已经够了，但是没有约束就代表了自由，自由就有人越界，我如果不按约束提交，照样玩的嗨起，那么怎么给这些自由加一些约束呢？

$ npm i -D @commitlint/config-conventional @commitlint/cli

在项目更目录下建立配置文件 commitlint.config.js 或者 .commitlintrc.js

module.exports = {
    extents:[
        "@commitlint/config-conventional"
    ],
    rules:{
        'body-leading-blank': [1, 'always'],
        'footer-leading-blank': [1, 'always'],
        'header-max-length': [2, 'always', 72],
        'scope-case': [2, 'always', 'lower-case'],
        'subject-case': [
            2,
            'never',
            ['sentence-case', 'start-case', 'pascal-case', 'upper-case']
        ],
        'subject-empty': [2, 'never'],
        'subject-full-stop': [2, 'never', '.'],
        'type-case': [2, 'always', 'lower-case'],
        'type-empty': [2, 'never'],
        'type-enum': [
            2,
            'always',
            [
                'build',
                'chore',
                'ci',
                'docs',
                'feat',
                'fix',
                'improvement',
                'perf',
                'refactor',
                'revert',
                'style',
                'test'
            ]
        ]
    }
}

你可以使用官网的方式测试一下你的提交是否符合规范



Husky限制

结合git hook来检验commit message,这样当你的提交不符合规范时就会阻止你提交

$ npm i -D husky

package.json

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

这样当你有不符合规范的时候你将提交不了(我这里是scope为空，拒绝提交)


自定义提交规范

当然你们如果想自己定义提交规范也是可以的，首先要下载自定义规范约束的包替换Angular团队使用的规范。

$ npm i -D commitlint-config-cz  cz-customizable
###并且在项目根目录创建.cz-config.js

commitlint.config.js（rules为我自定义的规则,这里同时使用了两个规范，可以只要cz）

module.exports = {    
    extends: [        
        '@commitlint/config-conventional',
        'cz'    
    ],
     rules:{
      // Header 
     'header-max-length': [2, 'always', 200],
      // <type>枚举
      'type-enum': [2, 'always', [
        'init',
        'feat',
        'fix',
        'ui',
        'refactor',
        'replace',
        'deploy',
        'docs',
        'test',
        'chore',
        'style',
        'revert',
        'add',
        'minus',
        'del'
      ]],
      // <type> 不能为空
      'type-empty': [2, 'never'],
      // <type> 格式 小写 
     'type-case': [2, 'always', 'lower-case'],
      // <scope> 不能为空
      'scope-empty': [2, 'never'],
      // <scope> 格式 小写
      'scope-case': [2, 'always', 'lower-case'],
      // <subject> 不能为空
      'subject-empty': [2, 'never'],
      // <subject> 以.为结束标志
      'subject-full-stop': [2, 'never', '.'],
      // <subject> 格式
      // 可选值
      // 'lower-case' 小写 lowercase
      // 'upper-case' 大写 UPPERCASE
      // 'camel-case' 小驼峰 camelCase
      // 'kebab-case' 短横线 kebab-case
      // 'pascal-case' 大驼峰 PascalCase
      // 'sentence-case' 首字母大写 Sentence case
      // 'snake-case' 下划线 snake_case
      // 'start-case' 所有首字母大写 start-case
      'subject-case': [2, 'never', []],
      // <body> 以空行开头
      'body-leading-blank': [1, 'always'],
      // <footer> 以空行开头
      'footer-leading-blank': [1, 'always']
    }}

package.json

"config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  },

.cz-config.js（这是我自定义的配置）

module.exports = {
  types: [
    {      value: 'init',      name: 'init:     初始提交'    },
    {      value: 'feat',      name: 'feat:     增加新功能'    },
    {      value: 'fix',      name: 'fix:      修复bug'    },
    {      value: 'ui',      name: 'ui:       更新UI'    },
    {      value: 'refactor',      name: 'refactor: 代码重构'    },
    {      value: 'release',      name: 'release:  发布'    },
    {      value: 'deploy',      name: 'deploy:   部署'    },
    {      value: 'docs',      name: 'docs:     修改文档'    },
    {      value: 'test',      name: 'test:     增删测试'    },
    {      value: 'chore',      name: 'chore:    更改配置文件'    },
    {      value: 'style',      name: 'style:    样式修改不影响逻辑'    },
    {      value: 'revert',      name: 'revert:   版本回退'    },
    {      value: 'add',      name: 'add:      添加依赖'    },
    {      value: 'minus',      name: 'minus:    版本回退'    },
    {      value: 'del',      name: 'del:      删除代码/文件'    }
  ],
  scopes: [],
  messages: {
    type: '选择更改类型:\n',
    scope: '更改的范围:\n',
    // 如果allowcustomscopes为true，则使用
    // customScope: 'Denote the SCOPE of this change:',
    subject: '简短描述:\n',
    body: '详细描述. 使用"|"换行:\n',
    breaking: 'Breaking Changes列表:\n',
    footer: '关闭的issues列表. E.g.: #31, #34:\n',
    confirmCommit: '确认提交?'
  },
  allowCustomScopes: true,
  allowBreakingChanges: ["feat", "fix"]};

借鉴了一篇网文的汉化 .cz-config.js 具体地址忘记保存了，之后找到补上

'use strict';
module.exports = {
  types: [
    {value: '✨特性',     name: '特性:    一个新的特性'},
    {value: '🐛修复',     name: '修复:    修复一个Bug'},
    {value: '📝文档',     name: '文档:    变更的只有文档'},
    {value: '💄格式',     name: '格式:    空格, 分号等格式修复'},
    {value: '♻️重构',     name: '重构:    代码重构，注意和特性、修复区分开'},
    {value: '⚡️性能',     name: '性能:    提升性能'},
    {value: '✅测试',     name: '测试:    添加一个测试'},
    {value: '🔧工具',     name: '工具:    开发工具变动(构建、脚手架工具等)'},
    {value: '⏪回滚',     name: '回滚:    代码回退'}  ],
  scopes: [
    {name: '模块1'},
    {name: '模块2'},
    {name: '模块3'},
    {name: '模块4'}
  ],
  // it needs to match the value for field type. Eg.: 'fix'
  /*  scopeOverrides: {
    fix: [
      {name: 'merge'},
      {name: 'style'},
      {name: 'e2eTest'},
      {name: 'unitTest'}
    ]
  },  */
  // override the messages, defaults are as follows
  messages: {
    type: '选择一种你的提交类型:',
    scope: '选择一个scope (可选):',
    // used if allowCustomScopes is true
    customScope: 'Denote the SCOPE of this change:',
    subject: '短说明:\n',
    body: '长说明，使用"|"换行(可选)：\n',
    breaking: '非兼容性说明 (可选):\n',
    footer: '关联关闭的issue，例如：#31, #34(可选):\n',
    confirmCommit: '确定提交说明?'  },
  allowCustomScopes: true,
  allowBreakingChanges: ['特性', '修复'],
  // limit subject length
  subjectLimit: 100};

### commitlint.config.js

module.exports = {
        extends: [
                'cz'
        ]
}


### package.json
"config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  },

最后：如果你觉得对你有帮助，留下个脚印吧！如果你觉得文章有问题，留下点意见吧！


avatar
文章
阅读
粉丝