git hooks实现提交前校验与规范提交

1.前置：git hooks

客户端hooks不随代码提交

• 位置：默认在.git/hooks， 不会被 push 到远端。也可以通过以下配置指定，然后push到远端，不用每个人都配置。

#+BEGIN_SRC bash :noeval
git config core.hooksPath hooks
#_END_SRC

• 要求：.git目录下的hooks子目录中，任何一个正确命名的可执行文件，里面可以是任意脚本：nodejs, shell, python, ruby等
• 钩子：
  • 提交钩子:
    • pre-commit：键入提交信息前运行
    • prepare-commit-msg:启动提交信息编辑器之前，默认信息被创建之后运行
    • commit-msg： 用来在提交通过前验证项目状态或提交信息
    • post-commit：整个提交过程完成后运行。该钩子一般用于通知之类的事情，通知有人push了代码等
  • 电子邮件工作流钩子
  • 其他钩子

pre-commit

键入提交信息前运行，通常用来检查代码防干扰，类似lint功能，行位空格等

• 根目录创建文件夹.mygithooks，在下面创建一个文件 pre-commit

npx eslint ./src

注： 如果是在.git/hooks下创建一个文件 pre-commit是一样的效果。只是此方式文件在.git下不会被推送到远程

• 配置git提交读取自己写的.mygithooks下的pre-commit

git config core.hooksPath .mygithooks

• 提交测试

# 提交前将代码改成错误的lint进行提交测试
git status
git add .
git commit -m "测试lint"

注：若git commit的时候报错如下

原因：没有执行权限，需要给文件添加写的权限

chmod +x .mygithooks/pre-commit

commit-msg

用来在提交通过前验证项目状态或提交信息

• 要求：
  • feat: 新功能（feature）
  • fix: 修补bug
  • docs: 文档
  • style： 格式
  • refactor: 重构
  • perf: 性能
  • test: 增加测试或者修改测试
  • build: 影响构建系统或外部依赖项的更改
  • ci: 对CI配置文件和脚本的更改
  • chore：对非 src 和 test目录的修改
  • revert：Revert a commit
• 实现

#!/bin/sh

# 用 `` 可以将命令的输出结果复制给变量
# 获取当前提交的 commit msg
commit_msg=`cat $1`

# 获取用户 email
email=`git config user.email`
msg_re="^(feat|fix|docs|style|refactor|perf|test|workflow|build|ci|chore|release|workflow)(\(.+\))?: .{1,10}"

if [[ ! $commit_msg =~ $msg_re]]
then echo "\n不合法的 commit 消息提交格式，请使用正确的格式：\
			\nfeat: add comments\
   		\nfix: handle events on blur (close #28)\
      \n 详情请查看 git commit 提交规范"
      # 异常退出
      exit 1
fi

2.实操：husky+commitizen+ commitlint实现校验

提交时进行eslint验证

• 安装husky
  husky 是一个git hook工具

yarn add husky -D

• 使husky 生效

# 执行一次， 会在根目录生成一个.husky的文件夹
yarn husky install

为了以后能在npm install之后自动地启用git hooks，在package.json添加script

"scripts": {
	// prepare脚本会在npm install之后自动执行，它是npm的一个生命周期脚本
	"prepare": "husky install"
}

• 添加 pre-commit 钩子
  执行完成会在.husky目录下生成一个pre-commit文件
  通过 husky 监测 pre-commit 钩子，在该钩子下执行 npm eslint --ext .js,.vue src 指令来去进行相关eslint检测

# 注意： window上需要把 npx husky 换成 .\node_modules\.bin\husky
# 即：.\node_modules\.bin\husky add .husky/pre-commit "npx eslint --ext .js,.vue src"
 npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src"

• 提交时自动修复格式lint-staged
  lint-staged 可以让你当前的代码检查 只检查本次修改更新的代码，并在出现错误的时候，自动修复并且推送。
  • 安装lint-staged 如果在生成项目eslint时，我们选择的是Lint and fix on commit，则不需要单独安装，cli已经帮我们安装过了。

  yarn install lint-staged -dev
  

  • 修改package.json配置

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

  • 修改 .husky/pre-commit 文件

  ...
  # npx eslint --ext .js,.vue src
  npx lint-staged
  

规范提交信息

• 局部安装commitizen
  commitizen可帮助规范提交信息

# 新版不需要额外安装cz-conventional-changelog,安装commitizen时会自动安装在node_modules里面
yarn add commitizen --dev

• 修改 package.json配置

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

此时可以用 yarn cz 代替 git commit 提交

• 定义自己的校验规范
  • 安装cz-customizable

  yarn add cz-customizable -D
  

  • 修改package.json配置

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

  • 添加 .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: "perf", name: "perf:    性能优化"},
      {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)"
    },
    // 跳过问题
    skipQuestions: ["body","footer"],
    // subject文字长度默认是72
    subjectLimit: 72
  }
  

• 安装插件commitlint
  上面完成后。主动用yarn cz 提交是没有问题的，但是如果用git commit提交就可以绕过规则，所以要拦截git commit

yarn add @commitlint/cli @commitlint/config-conventional -D

• 添加 commitlint.config.js 配置文件

module.exports = {
  extends: ["@commitlint/config-conventional"],
  // 定义规则类型
  rules: {
    // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
    'type-enum': [
      // 当前验证的错误级别，2代表错误级别的错误
      2,
      // 在什么情况下进行验证，always表示任何情况下都进行验证
      'always',
      // 泛型内容, 对应cz-config定义的types
      [
        'feat', // 新功能 feature
        'fix', // 修复 bug
        'docs', // 文档注释
        'style', // 代码格式(不影响代码运行的变动)
        'refactor', // 重构(既不增加新功能，也不是修复bug)
        'perf', // 性能优化
        'test', // 增加测试
        'chore', // 构建过程或辅助工具的变动
        'revert', // 回退
        'build' // 打包
      ]
    ],
    // subject 大小写不做校验
    'subject-case': [0]
  }
};

此时可以 使用 yarn cz 按照提示步骤来 或者 用 git commit 按照标准写注释才能提交

3.后续：根据规范提交生成changelog

• 安装standard-version（自动生成、打tag）

yarn add standard-version -D

• package.json配置scripts

"scripts": {
	"release": "standard-version"
}

• 运行

# 生成changelog和打tag
npm run release

# 将tag push上去
git tag
git tag -m "info"
git push --tags