前言

最近发现前端团队提交代码时发现commit真的是杂乱无章，五花八门，为了杜绝这种乱象，想到的是git的hook机制，去写shell脚本去实现。这当然可以，其实JavaScript有一个很好的工具可以实现这个模板，它就是commitlint。接下来将会讲解如何一步步的使用commitlint。

pre-commit和husky都是较好的工具，但是husky使用人说更多更早，这里只说husky，介绍一下vue-cli 快速集成commitlint规范。

commitlint工作原理

为了快速使用commitlint规范就简单的看了一下vue-cli集成插件源码以及husky和commitlint相关资料，大概的执行过程是这样的，如图所示： preview 如果上面这张图看不太懂，这没关系，但你至少要看懂下面这张图： preview

安装方法

1、vue-cli 项目配置

VUE采用内置插件进行安装，出现选择时按回车键即可；

#安装依赖插件
vue-add-commitlint

#部分vue-cli版本可能缺少  right-pad 依赖，需手动安装

npm install right-pad 

#项目中不能有yarn.lock文件，如存在需要暂时移除；

项目中出现以下内容则认为commitlint安装成功：

生成配置文件commitlint.config.js，当然也可以是 .commitlintrc.js
package.json文件出现以下代码

  
// package.json
  ...
   "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "cz": "npm run log && git add . && git cz",
    "log": "conventional-changelog --config ./node_modules/vue-cli-plugin-commitlint/lib/log -i CHANGELOG.md -s -r 0"
  },
  ....
  
  "config": {
    "commitizen": {
      "path": "./node_modules/vue-cli-plugin-commitlint/lib/cz"
    }
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }

2、非vue-cli 项目配置

commitlint: 安装，制定提交规范（采用默认）

npm install --save-dev @commitlint/config-conventional @commitlint/cli

手动生成配置文件commitlint.config.js，当然也可以是 .commitlintrc.js

// commitlint.config.js 
module.exports = {
  extends: [ "@commitlint/config-conventional"],
  rules: {
    "type-enum": [
      2,
      "always",
      ["upd", "feat", "fix", "refactor", "docs", "chore", "style", "revert"],
    ],
    "type-case": [0],
    "type-empty": [0],
    "scope-empty": [0],
    "scope-case": [0],
    "subject-full-stop": [0, "never"],
    "subject-case": [0, "never"],
    "header-max-length": [0, "always", 72],
  },
};

husky: 还要为 git 配置 husky ，对 git 的 commit 操作进行校验。husky继承了Git下所有的钩子，在触发钩子的时候，husky可以阻止不合法的commit，push等等。

项目中如没有使用husky 需手动进行安装：

npm install husky --save-dev

在 package.json 中引入 husky相关依赖配置

// package.json
{
  ...
    "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "cz": "npm run log && git add . && git cz",
    "log": "conventional-changelog --config ./node_modules/vue-cli-plugin-commitlint/lib/log -i CHANGELOG.md -s -r 0"
  },
  ...
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }  
  }
}

这段配置告诉了git hooks，当我们在当前项目中执行 git commit -m '测试提交' 时将触发commit-msg事件钩子并通知husky，从而执行 commitlint -E HUSKY_GIT_PARAMS命令，也就是我们刚开始安装的./node_modules/.bin/commitlint，它将读取commitlint.config.js配置规则并对我们刚刚提交的测试提交这串文字进行校验，若校验不通过，则在终端输出错误，commit终止。

Commitlint 提交规范

commitlint 推荐我们使用 config-conventional 配置去写 commit；

提交格式（注意冒号后面有空格）

git commit -m <type>[optional scope]: <description>

type ：用于表明我们这次提交的改动类型，是新增了功能？还是修改了测试代码？又或者是更新了文档？ 

optional scope：一个可选的修改范围。用于标识此次提交主要涉及到代码中哪个模块。

description：一句话描述此次提交的主要内容，做到言简意赅。

常用type类型

类型	描述
build	编译相关的修改，例如发布版本、对项目构建或者依赖的改动
chore	其他修改, 比如改变构建流程、或者增加依赖库、工具等
ci	持续集成修改
docs	文档修改
feat	新特性、新功能
fix	修改bug
perf	优化相关，比如提升性能、体验
refactor	代码重构
revert	回滚到上一个版本
style	代码格式修改, 注意不是 css 修改
test	测试用例修改

例子

常规Git 命令行提交方法

正确方法：

git commit -m 'fix(account): 修复xxx的bug'
git commit -m 'refactor: 重构整个项目'

错误方法：

git commit -m '重构整个项目'

在这里插入图片描述

需要提示提交方法

此方法为傻瓜式提交，不会出现commit fail 问题，按照提示操作即可：

npm run cz

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iJpw22sP-1639555014666)(C:\Users\bing.yang\AppData\Roaming\Typora\typora-user-images\image-20211215140729643.png)]$

总结

使用 commitlint 可以规范我们每一次的 commit，我们可以用来自动生成 changeLog 等文件，方便代码管理。

vue 集成 commitlint 规范

前言