Commitizen + husky规范提交信息

483 阅读3分钟

背景

git提交信息应该包括明确的清晰明了,有分类; 但是团队小伙伴在提交的时候为了图方便,大多都只是简单写一下,开发一时爽,维护火葬场;

一、使用git cz进行commit选项选择后再提交

// 安装 commitizen
npm i commitizen -g

// 使用 git cz 命令
git cz

使用 git cz 代替 git commit ,出现以下commit选项 image.png

二、自定义团队提交规范

使用 cz-customizable 自定义提交规范

  1. 使用命令 npm cz-customizable --save-dev 安装

  2. package.json 中新增

    "config": {
       "commitizen": {
         "path":"node_modules/cz-customizable"
       }
    }
    
  3. 在根目录中创建 .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: '回滚:    代码回退' }],
      messages: {
        type: '请选择提交的类型;',
        customScope: '请输入修改的范围(可选)',
        subject: '请简要描述提交(必填)',
        body: '请输入详细描述(可选)',
        footer: '请选择要关闭的issue(可选)',
        confirmCommit: '确认要使用以上信息提交?(y/n)'
      },
      // limit subject length
      subjectLimit: 100
    };
    
  4. 再次执行git cz即可见到我们自己配置的规范,如下图 image.png image.png

三、使用husky,在git hooks中增加提交选项

通过上面的步骤,我们已经可以通过 git cz 去规范commit了;但是还存在以下两个问题:

  1. commitizen必须全局安装,否则不能使用该命令
  2. 使用常规的git commit -m xx不能拦截,需要强制使用git cz命令

此时我们可以通过安装husky,在git的hooks中拦截git commit的动作

  1. 安装husky npm install husky --save-dev

  2. package.json 中新增命令行

    "scripts": {
        "prepare": "npx husky install",
    }
    
  3. 执行 npm run prepare

  4. 执行命令 npx husky add .husky/pre-commit 生成该hook的文件

  5. 编辑根目录下.husky文件夹下的 pre-commit

    . "$(dirname "$0")/_/husky.sh"
    
    // 注意:必须有exec < /dev/tty,代表执行命令行
    exec < /dev/tty && git cz --hook || true
    

至此,我们使用 git commit 也可以进行提交规范的约束了

四、使用lint-staged, 对暂存区代码进行eslint校验和prettier格式化

现在我们已经约束了提交规范,但是我们希望在提交前对当前的代码进行格式验证和修复,此时需要使用到lint-staged

  1. 安装 npm i lint-staged --save-dev

  2. package.json中新增配置

    "lint-staged": {
      "**/*.scss": "stylelint --syntax scss",
      "**/*.{js,jsx, tsx,ts }": "npm run lint-staged:js",
      "**/*.{js,jsx,tsx,ts,less,scss,md,json}": [
        "prettier --write"
      ]
    }
    
  3. package.json中新增 lint-stagedlint-staged.js 命令

    "scripts": {
        "lint-staged": "lint-staged",
        "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx "
    }
    
  4. 最后在 pre-commit中新增脚本

    npm run lint-staged
    

本次暂时未添加 commitlint如需配置可以参考 这篇文章

好了,我们现在已经完成所有所有提交规范的操作,小伙伴也可以开心的进行commit提交啦!