commitlint + commitizen 代码提交规范踩坑实战

踏雪无痕丶
1,608 阅读3分钟

1 、先初始化一个项目

$ mkdir test-git-lint
$ cd ./test-git-lint
$ git init
$ npm init

2、规范commit message信息

使用commitlint，利用 git hooks 拦截不符合规范的 commit msg

yarn add @commitlint/{config-conventional,cli} -D 
# windows
yarn add @commitlint/config-conventional @commitlint/cli -D

yarn add yorkie -D

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

可修改下配置

// 在根目录创建 commitlint.config.js 文件：
module.exports = {
  // 继承的规则
  extends: ['@commitlint/config-conventional'],
  // 定义规则类型
  rules: {
    // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
    'type-enum': [
      2,
      'always',
      [
        'wip', // 开发中
        'feat', // 新功能 feature
        'fix', // 修复 bug
        'style', // 代码格式(不影响代码运行的变动)
        'refactor', // 重构(既不增加新功能，也不是修复bug)
        'ci', // ci
        'revert', // 回退
        'build', // 打包
        'chore', // 构建过程或辅助工具的变动
        'test', // 增加测试
        'docs', // 文档注释
        'init', // 初始化
      ],
    ],
    // subject 大小写不做校验
    'subject-case': [0],
  },
}

配置git hooks， 在package.json

"gitHooks": {
  "commit-msg": "commitlint -e $GIT_PARAMS"
}

提交测试一下

3、更方便的通过问答生成commit msg格式

commitizen/cz-cli 借助它提供的 git cz 命令替代 git commit 命令，生成符合规范的 commit message，

commitizen 默认的提交规范是 angular 团队强规定的，若想自定义我们还需配合 Adapter（适配器）

$ yarn add commitizen cz-customizable -D

在 package.json文件中 scripts 和 config 字段进行配置

{
  ...
  "scripts": {
    "commit": "cz"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-customizable"
    },
    "cz-customizable": {
      "config": ".cz-configrc.js"
    }
  }
}

添加cz配置文件，并添加配置

$ touch .cz-config.js

'use strict'

module.exports = {
  types: [
    { value: 'wip', name: '💪  Work in Progress | 开发中' },
    { value: 'feat', name: '✨  Features | 新功能' },
    { value: 'fix', name: '🐛  Bug Fixes | 修复' },
    { value: 'style', name: '💄  Styles | 代码样式' },
    { value: 'refactor', name: '🔨  Code Refactoring | 代码重构' },
    { value: 'ci', name: '💚  Fixing CI Build | CI 配置' },
    { value: 'revert', name: '⏪  Revert | 回退' },
    { value: 'build', name: '📦  Build System | 打包构建' },
    { value: 'chore', name: '🗯   Chore | 构建/工程依赖/工具' },
    { value: 'test', name: '✅  Tests | 测试' },
    { value: 'docs', name: '📝  Documentation | 文档变更' },
    { value: 'init', name: '🚀  Init | 初始化' },
  ],

  // 步骤
  messages: {
    type: '请选择提交的类型；',
    customScope: '请输入修改的范围（可选）',
    subject: '请简要描述提交（必填）',
    body: '请输入详细描述（可选）',
    footer: '请选择要关闭的issue（可选）',
    confirmCommit: '确认要使用以上信息提交？（y/n）',
  },

  // 跳过步骤
  skipQuestions: ['customScope','body', 'footer'],

  // 模块名
  // scopes: [{ name: 'account' }]

  // 默认长度
  subjectLimit: 72,
}

具体配置查看 github.com/leoforfree/…

测试一下效果

4、问题

尝试husky接入git hook，./git/hook 一直没能覆盖。

看了下官方文档的说明

Hooks not running

  1. Ensure that you don't have a typo in your filename. For example, precommit or pre-commit.sh are invalid names. See Git hooks documentation for valid names.
  2. Check that git config core.hooksPath returns .husky (or your custom hooks directory).
  3. Verify that hook files are executable. This is automatically set when using husky add command but you can run chmod +x .husky/<hookname> to fix that.
  4. Check that your version of Git is greater than 2.9.

因为安装husky版本是7.0.0，官方在6.x之后进行了更新。

新版husky的工作原理: 新版的husky使用了从git 2.9开始引入的一个新功能core.hooksPath。core.hooksPath可以让你指定git hooks所在的目录而不是使用默认的.git/hooks/。这样husky可以使用husky install将git hooks的目录指定为.husky/，然后使用husky add命令向.husky/中添加hook。通过这种方式我们就可以只添加我们需要的git hook，而且所有的脚本都保存在了一个地方（.husky/目录下）因此也就不存在同步文件的问题了。

看了下本地git的版本是 2.3.8 , 更新了下mac git版本大于 2.9 就能正常使用husky了。

参考

avatar
文章
阅读
粉丝