效仿Angular团队使用git提交代码规范

一、前言

• 1、一般我们使用git提交代码,一般常见的命令就是

  • git add .
  • git commit -m '这是什么代码'
  • git push origin master

• 2、使用传统的方式进行git提交代码就是下面的结果
  

• 3、这种方式主要存在几个弊端

  • 时间越久自己也不知道自己提交了什么
  • 对提交的代码没进行分类管理
  • 寻找某次的修改不方便

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

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

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

• 5、使用规范后提交代码的格式

  

二、使用方式

• 1、安装包

  npm i -D commitlint-config-cz  cz-customizable
  npm i -D @commitlint/cli @commitlint/config-conventional
  npm i -D commitizen commitlint-config-cz
  

• 2、在项目的根目录下创建.cz-config.js文件

  module.exports = {
    types: [
      { value: 'init', name: 'init: 初始提交' },
      { value: 'feat', name: 'feat: 增加新功能' },
      { value: 'fix', name: 'fix: 修复bug' },
      { value: 'improvement', name: 'improvement: 对当前特性的改进' },
      { value: 'docs', name: 'docs:修改文档' },
      { value: 'style', name: 'style: 样式修改不影响逻辑' },
      { value: 'refactor', name: 'refactor: 代码重构(既不修复bug也不添加特性的代码更改)' },
      { value: 'perf', name: 'perf: 代码重构(改进性能的代码更改)' },
      { value: 'test', name: 'test: 添加缺失的测试或修改现有的测试' },
      { value: 'build', name: 'build: 影响构建系统或外部依赖项的更改(例如作用域:gulp、broccoli、npm)' },
      { value: 'ci', name: 'ci: 对CI配置文件和脚本的更改(示例范围:Travis、Circle、BrowserStack、SauceLabs)' },
      { value: 'chore', name: 'chore: 不修改src或测试文件的其他更改' },
      { value: 'revert', name: 'revert: 版本回退' },
      { value: 'ui', name: 'ui: 更新UI' },
      { value: 'release', name: 'release: 发布' },
      { value: 'deploy', name: 'deploy: 部署' },
      { value: 'chore', name: 'chore: 更改配置文件' },
      { value: 'add', name: 'add: 添加依赖' },
      { value: 'minus', name: 'minus: 版本回退' },
      { value: 'del', name: 'del: 删除代码/文件' }
    ],
    scopes: [],
    messages: {
      type: '选择更改类型:\n',
      scope: '更改的范围:\n',
      // 如果allowcustomscopes为true，则使用
      customScope: '此更改的范围(例如组件或文件名称)',
      subject: '简短描述:',
      body: '详细描述. 使用"|"换行:',
      breaking: '变化文件的列表:',
      footer: '关闭的issues列表. E.g.: #31, #34:',
      confirmCommit: '确认提交?'
    },
    allowCustomScopes: true,
    allowBreakingChanges: ["feat", "fix"]
  };
  

• 3、在项目的根目录下创建commitlint.config.js

  module.exports = {
    extends: [
      '@commitlint/config-conventional',
      'cz'
    ],
    rules: {
      // Header 
      'header-max-length': [2, 'always', 200],
      // 枚举
      'type-enum': [2, 'always', [
        'init',
        'feat',
        'fix',
        'improvement',
        'docs',
        'style',
        'refactor',
        'perf',
        'test',
        'build',
        'ci',
        'chore',
        'revert',
        'ui',
        'release',
        'deploy',
        'chore',
        'add',
        'minus',
        'del',
      ]],
      //  不能为空
      'type-empty': [2, 'never'],
      //  格式 小写 
      'type-case': [2, 'always', 'lower-case'],
      //  不能为空
      'scope-empty': [2, 'never'],
      //  格式 小写
      'scope-case': [2, 'always', 'lower-case'],
      //  不能为空
      'subject-empty': [2, 'never'],
      //  以.为结束标志
      'subject-full-stop': [2, 'never', '.'],
      //  格式
      // 可选值
      // '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-leading-blank': [1, 'always'],
      // 
   以空行开头
      'footer-leading-blank': [1, 'always']
    }
  }
  

• 4、package.json中添加

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

• 5、结合git hook来检验commit message这样当你提交代码不符合规范的时候阻止你提交

  npm install husky -D
  

• 6、在package.json中配置git hook的钩子函数

  {
    ...
    "husky": {
      "hooks": {
        "commit-msg": "commitlint -e $GIT_PARAMS"
      }
    },
  }
  

• 7、直接在package.json中配置命令方式进行commit

  {
    "scripts": {
      "commit": "./node_modules/cz-customizable/standalone.js"
    },
  }
  

• 8、提交代码的方式

  git add .
  npm run commit
  git push origin master
  ```![在这里插入图片描述](https://img-blog.csdnimg.cn/20200107144931441.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2t1YW5nc2hwMTI4,size_16,color_FFFFFF,t_70)