规范化Git提交日志（Commitizen + husky + Git hooks ）

commit message 应该清晰明了，说明本次提交的目的，但是很多人在提交git信息的时候，为了图方便，大多都会简单的写一下，开发一时爽，维护火葬场。
清晰且统一的提交风格，有利于团队的协作和后期的维护，本文分享了我们如何通过限制代码提交的规范。

一、配置自己的提交规范

// 安装commitizen
npm install -g commitizen

// commitizen根据不同的`adapter`配置commit message
npm install -g cz-conventional-changelog
echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc

配置完成后，在你本地进入任何的 git repository， 使用 git cz 代替 git commit 都会出现选项，用来生成符合格式的 Commit message，如下图：

二、自定义提交规范

以下讲的式项目中的自定义提交规范，全局配置参考：这篇大佬的文章
自定义提交规范，我们需要用到 cz-customizable。
cz-customizable 和 cz-conventional-changelog 一样，都是 commitize n的 adapter，但是 cz-customizable 支持一定程度上的自定义

1. 安装 npm i cz-customizable --save-dev

2. 将以下配置添加到 package.json中

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

3. 项目根目录下创建 .cz-config.js 自定义提示文件

   module.exports = {
     // 可选类型
     types:[
       { value: 'feat',     name: 'feat:      新功能'},
       { value: 'fix',      name: 'fix:       修复'},
       { value: 'docs',     name: 'docs:      文档变更'},
       { value: 'style',    name: 'style:     代码格式（不影响代码运行的变动）'},
       { value: 'refactor', name: 'refactor:  重构（既不是增加feature）,也不是修复bug'},
       { value: 'pref',     name: 'pref:      性能优化'},
       { value: 'test',     name: 'test:      增加测试'},
       { value: 'chore',    name: 'chore:     构建过程或辅助工具的变动'},
       { value: 'revert',   name: 'revert:    回退'},
       { value: 'build',    name: 'build:     打包'}
     ],
   
     // 步骤
     messages: {
       type: '请选择提交的类型；',
       customScope: '请输入修改的范围（可选）',
       subject: '请简要描述提交（必填）',
       body: '请输入详细描述（可选）',
       footer: '请选择要关闭的issue（可选）',
       confirmCommit: '确认要使用以上信息提交？（y/n）'
     },
   
     // 跳过步骤
     skip: ['body', 'footer'],
   
     // 默认长度
     subjectLimit: 72
   }
   

4. 此时，我们执行 git cz 的时候即可按照自己配置的规范，进行选项信息的填写，如下图

   

三、husky + Git hooks 配置提交校验

1. Git Hooks

整体的hooks非常多,但是我们用的比较多的其实只有两个

1. commit-msg
   • 由 git commit 和 git merge 调用
   • 可以使用 git commit --no-verify 绕过
2. pre-commit
   • 由 git commit 调用
   • 可以使用 git commit --no-verify 绕过
   • 在获取建议的提交日志消息和进行提交之前被调用

2. husky

husky 是一个 Git Hook 工具
husky 的具体使用可以参考：这篇大佬文章

1、使用 husky + commitlint 检查提交 message 是否符合规范

在前面的配置中，我们已经可以实现使用 git cz 调出规范选项，进行规范的 message 的编辑；

但是如果我们忘记使用 git cz, 直接使用了 git commit -m "my commit", message 信息依然会被提交上去，项目中会出现不规范的提交 message

因此我们需要 husky + commit-msg + commitlint 校验我们的提交信息是否规范。

安装配置commitlint

1. 安装依赖 npm install --save-dev @commitlint/config-conventional @commitlint/cli

2. 创建 commitlint.config.js 文件

   module.exports = {
     extends: ['@commitlint/config-conventional'],
     // 定义规则类型
     rules: {
       // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
       'type-enum': [
         2,
         'always',
         [
           'feat', // 新功能
           'fix', //  修复
           'docs', // 文档变更
           'style', // 代码格式（不影响代码运行的变动）
           'refactor', // 重构（既不是增加feature）,也不是修复bug
           'pref', // 性能优化
           'test', // 增加测试
           'chore', // 构建过程或辅助工具的变动
           'revert', // 回退
           'build' // 打包
         ]
       ],
       // subject 大小写不做校验
       'subject-case': [0]
     }
   }
   

   注意：这里这个文件需要保存为utf-8的格式，否则可能出现错误

   

安装配置husky

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

2. 启动 hooks, 生成 .husky 文件夹 npx husky install

   

3. 在 package.json 中生成 prepare指令 npm set-script prepare "husky install"

   注意：这个需要 npm > 7.0 版本
   可以使用 npm install -g npm 升版本

   

4. 执行 prepare 指令 npm run prepare

   

5. 添加 commitlint 的 hook 到 husky 中，commit-msg 时进行校验

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

   添加完成后：
   

6. 此时，不符合规范的 commit 将不会被允许提交，我们的任务也完成啦！测试如下图：

   

2、pre-commit 检验当前代码是否有 ESLint 错误

我们期望在代码被提交之前，可以执行 npx eslint --ext .js,.ts,.vue src 指令来检测代码是否规范

pre-commit 检测

1. 添加 commit 时的 hook，pre-commit 时运行 npx eslint --ext .js,.ts,.vue src

   npx husky add .husky/pre-commit "npx eslint --ext .js,.ts,.vue src"

   结果如下图：

   

2. 此时提交代码，如果项目中有错误，无法提交，想要提交代码，必须解决所有的错误信息

   

lint-staged自动修复格式错误

lint-staged 可以让你当前的代码检查只检查本次修改更新的代码，并在出现错误的时候，自动修复并推送

lint-staged 无需安装，生成项目时，vue-cli 已经帮我们安装了

1. 修改 package.json 配置

   "lint-staged": {
    "src/**/*.{js,ts,vue}": [
      "eslint --fix",
      "git add ."
    ]
   }
   

2. 如上配置，每次它在你本地 commit 之前，校验你所提的内容是否符合你本地配置的 eslint 规则

   1. 符合规则，提交成功
   2. 不符合规则，他会自动执行 eslint --fix 尝试帮你自动修复
      2.1 修复成功，则会自动帮你把修复好的代码提交；
      2.2 修复失败，提示你错误，让你修复好才可以提交代码；

3. 配置 .husky/pre-commit 文件

   #!/bin/sh
   . "$(dirname "$0")/_/husky.sh"
   
   npx lint-staged