React-Template-Admin 中后台系统模板搭建（三）—— husky校验 commit mesage

最近使用CRA（Create-React-App）进行中后台系统模板的搭建，通过这个项目的搭建提升自己，感兴趣的小伙伴可以去我的项目主页体验，develop分支不定时更新，等较为完善以后会更新至master，希望对你有所帮助。

【前言】 上一章中我讲解了有关commit message 的提交规范，相信大家已经能够开始掌握angluar规范的提交，也能够以这种方式进行message的书写，但是angluar规范在实际开发中由于团队较大，人员较多带来的实际开发问题也很多，由于angular规范不是强制要求大家写的，团队中总会有一些搅屎棍的存在，message中就写个123456789，无法看出提交更改了什么，实在是让人抓狂，因此做一个git commit提交前的强校验就很有必要，本章将会一步步带着大家去配置git commit校验。

【导读】

1. 了解commitizen、cz-conventional-changelog、cz-customizable
2. 配置commitizen、cz-conventional-changelog、cz-customizable
3. 了解git hooks
4. 了解huksy、lint-staged、commitlint
5. 利用 huksy、lint-staged、commitlint配置git commit 强校验

了解commitizen、cz-conventional-changelog

commitizen

一个书写angular规范提交信息的包，在每次书写angular规范的commit信息时，就会有比较懒的程序员不喜欢每次的重复书写，或者会有因为不熟悉angular规范的小伙伴，每次都需要翻阅对应的文档进行书写，就会浪费十分多的时间，因此有大神就做出了commitizen以对话的方式填写commit信息，确保填写的正确，在每个type上会有详细的标注，不熟悉的小伙伴可以根据自己提交的特点进行选择，填写信息，一步步进行操作

效果如下图：

cz-conventional-changelog

跟commitizen一样，可以将其作为commitizen的依赖包，commitizen可以通过这个包指定默认的angular规范信息，也可以通过这个包指定cz常规变更日志的配置。

cz-customizable

针对提交信息有自定义需求的小伙伴，这个是用于自定义cz命令的，可以自定义提示信息，比如将英文版汉化，拓展type的类型等等

效果如下图：

配置commitizen、cz-conventional-changelog、cz-customizable

了解常规的概念后，就要动手实操啦，跟着来，保姆级教程，包教包会。

新建项目文件夹执行如下命令（文件夹不要有中文，直接全回车即可），初始化整个项目

git init
npm init

在根目录执行如下命令（这里只在项目中安装，有需要全局安装直接改改参数就好啦）

npm install -D commitizen cz-conventional-changelog cz-customizable

接下来在根目录package.json中加入

....
  "scripts": {
      "commit": "cz"
  },
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  }

等待安装完成后，修改项目文件让git追踪到文件变化，执行如下命令

git add .
npm run commit

如果出现下图结果，那么🎉恭喜你已经成功配置commitizen、cz-conventional-changelog

接下来就是配置cz-customizable自定义一下cz命令（npm run commit），🇨🇳就将它汉化吧！

在这里修改刚刚配置的package.json内的config字段，其实就是将path修改为cz-customizable，将路径指向修改一下而已。

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

紧接着在项目根目录下添加.cz-config.js文件，写入如下内容

module.exports = {
  types: [
    {
      value: "feat",
      name: "feat: 常规升级迭代",
    },
    {
      value: "fix",
      name: "fix: 修复bug",
    },
    {
      value: "init",
      name: "init: 初始化",
    },
    {
      value: "docs",
      name: "docs: 文档变更",
    },
    {
      value: "style",
      name: "style: 格式化代码",
    },
    {
      value: "refactor",
      name: "refactor: 重构",
    },
    {
      value: "perf",
      name: "perf: 性能优化",
    },
    {
      value: "test",
      name: "test: 测试",
    },
    {
      value: "revert",
      name: "revert: 回退",
    },
    {
      value: "build",
      name: "build: 打包工具修改",
    },
    {
      value: "chore",
      name: "chore: 构建/工程依赖/工具",
    },
    {
      value: "ci",
      name: "ci: CI related changes",
    },
  ],
  messages: {
    type: "请选择提交类型(必填)",
    customScope: "请输入文件修改范围(可选)",
    subject: "请简要描述提交(必填)",
    body: "请输入详细描述(可选)",
    breaking: "列出任何BREAKING CHANGES(破坏性修改)(可选)",
    footer: "请输入要关闭的issue(可选)",
    confirmCommit: "确定提交此说明吗？",
  },
  allowCustomScopes: true,
  allowBreakingChanges: ["feat", "fix"], // 当提交类型为feat、fix时才有破坏性修改选项
  subjectLimit: 72,
};

这时候再修改项目文件让git追踪到文件变化，执行命令

git add .
npm run commit

就会发现，输出结果已经变成下图

至此，commitizen、cz-conventional-changelog、cz-customizable的配置就已全部完成啦，如有需要拓展的小伙伴可以在网络上查询一下，这里仅作简单例子方便入门。

了解git hooks

git hooks类似于vue的生命周期，在每个阶段都有对应的hooks进行处理，git hooks在git init的时候就已经写好放入在.git/hooks/目录中（.git目录是隐藏目录，取消隐藏即可查看）

在这个文件夹下可以看到很多.sample结尾的文件，前面的文件名就是每个git hooks的名称

如果想加入一些自定义操作，如在git commit时做eslint格式化，可以将pre-commit.sample文件复制一份，删除文件后缀名，文件名变为pre-commit，删除除第一行以外的内容，然后以shell的方式进行编写脚本或者以node的方式进行编写脚本做自定义的需求都是可以的。

了解huksy、lint-staged、commitlint

在上面介绍了git hooks后，相信各位小伙伴也有一定的了解，在上一小节最后提到了以shell的方式进行编写脚本或者以node的方式进行编写脚本做自定义的需求，但是实际上以这两种方式去编写会带来额外的学习成本，很多小伙伴可能只学过javascripts但是没有深入学习node，因此有大佬就开发了huksy令初学者可以快速通过这个库来操作git hooks

Modern native Git hooks made easy（来自huksy官方介绍）

现在查到的huksy文档或者资料，包括其npm上的文档（这个时间点查到的确实是以前的内容），很多都是6.0.0之前的内容，最新版本的husky（6.0.0）已经做了破坏性的变更，之前的设置方式已经失效了。

在下一小节中介绍的都是husky新版的实践配置

接下来简单举一个husky的业务场景：

团队希望提交时将代码格式化，保证在仓库中的代码是统一格式的，这时候就会让husky去操作pre-commit时启用eslint格式化，这是正确的。但是这同时也会带来一个问题！在每次提交时，eslint就会对项目进行一个格式化，如果项目小的话格式化就会比较快，等待时长也会比较短，万一项目很大的情况下，那么就会等很久。🐦有机灵的小伙伴就会说，这不就可以摸鱼了吗！漏漏漏，其实有很好的解决方案，那就是lint-staged啦

lint-staged官方介绍也是十分地简介粗暴

Run linters against staged git files and don't let 💩 slip into your code base!

在提交代码之前运行Linting更有意义。通过这样做，您可以确保没有错误进入存储库并强制执行代码样式。但是，在整个项目上运行一个lint过程很慢，而且lint结果可能无关紧要。最终，您只需要lint将被提交的文件。该项目包含一个脚本，该脚本将运行任意shell任务，并将一系列分段文件作为参数，并通过指定的全局模式进行筛选。

后两句是根据官方文档介绍进行汉译，其实到这里就很清楚lint-staged的作用啦，通过每次仅校验提交的文件来减少每次提交校验的文件，至此lint-staged也介绍完毕啦！

接下来就是commitlint，简单一笔带过，这个库其实是用于校验时添加的备注信息是否符合规范，即校验git commit message

这三个库进行组合使用，就可以达到仅校验提交文件时做自定义操作

利用 huksy、lint-staged、commitlint配置git commit 强校验

了解常规的概念后，还是要动手动手冻手冻手！在项目中执行如下命令（prettier用来格式化css或less等文件）

npm install -D husky lint-staged commitlint prettier

接下来的husky配置都是基于6.0.0以上的版本，请各位小伙伴尤其注意，如果用的是旧版的话，就需要用手动添加需要的git hooks，这些内容就不在这做过多介绍啦。

安装完成后，在项目根目录下新增一个commitlint.config.js文件，内容如下：

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

在package.json的scripts（⚠️注意重复问题，其实只需要添加prepare就行，不需要重复写scripts）中，添加如下内容：

{
  "scripts": {
    "prepare": "husky install"
  }
}

紧接着按顺序执行如下命令

npm run prepare
npx husky add .husky/commit-msg "npx --no-install commitlint --edit "$1""

看到如下效果，🎉恭喜你已经成功了一大半了

如果遇到“@commitlint/config-conventional”的问题，此时需要执行如下命令单独安装即可

npm i @commitlint/config-conventional

这时候就可以测试commitlint是否在commit-msg中生效啦

修改项目文件让git追踪到文件变化，按顺序依次执行如下命令

git add .
git commit -m "abc"

出现如下效果证明commitlint已生效

紧接着执行如下命令（信息只做演示，请各位小伙伴按照自己需要填写正确的信息）

git commit -m "build: 新增依赖"

结果如下，那么🎉恭喜你已经成功配置huksy、commitlint

接下来配置lint-staged，配合prettier进行scss文件格式化，在package.json（⚠️注意重复问题，不需要重复写scripts）中，添加如下内容（规则可以更改成自己需要的，这里仅做展示）：

...
"scripts": {
    "lint-staged": "lint-staged"
},
"lint-staged": {
    "*.{less,css,scss}": [ 
      "prettier --write"
    ]
}
...

执行如下命令，添加pre-commit勾子操作

npx husky add .husky/pre-commit "npm run lint-staged"

随意将scss文件修改一下缩进、换行等等格式错乱问题，再执行如下命令

git add . 
git commit -m "test: 测试"

最后查看自己的scss代码有没有修改即可，如果发现scss的文件被格式化成正确的格式，🎉恭喜你已经成功了！

注意点

1、请一定一定要注意huksy的版本，6.0.0版本前后是有比较大的区别，不同版本会有配置问题，请各位小伙伴自行查阅相关资料

2、有些博客或资料中commitlint文件会写成.commitlintrc.js，这里可能是因为版本的一些问题，无法生效。本文中是改成commitlint.config.js，请注意一下。

3、本文prettier配置是最基础的，在实际项目中需要拓展十分多相关的rules，在相关校验与格式化中会更加严格。

写在最后

React-Template-Admin 将持续更新，励志做好中后台系统模板！本文相关代码及配置已上传至master，感兴趣的小伙伴可以跳转至我的github主页看看！如果对你有帮助，请给文章免费的一个赞吧！项目给个star，感谢使用！