前言

在前端工程化的道路上，少不了许许多多出色的工具的铺垫，今天就来学习一下，在团队合作的项目中，如何规范大家提交的commit，以便项目的管理。

commitlint

commitlint是对我们提交commit的格式的一种约束，可以起到很好的统一作用，如果有人提交的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	测试用例修改

在使用他之前还需要认识一个东西，那就是husky

husky

Modern native Git hooks made easy (轻松创建现代化的原生 git hooks) Husky improves your commits and more 🐶 woof!

它可以在 git 提交代码的前后，执行一系列的 git hooks，以对代码、文件等进行预设的检查，一旦检查不通过，就可以阻止当前的代码提交，避免了不规范的代码和 git 提交出现在项目中。

通俗一点来说就是husky可以执行git的一些列钩子，例如git commit,git push等等。通过他，再搭配上commitlint，就可以完成我们的规范提交commit的操作了，下面就来一起操作一下吧

开始

首先安装一下这两个依赖

npm install -D husky

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

接下来在根目录创建一个配置文件commitlint.config.js，当然也可以是 .commitlintrc.js

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

下面就是去配置husky了。

在husky（6.0.0）版本之前以及之后的配置方式有点不一样，低版本的配置方法如下

在package.json中写入

{
  "husky": {
    "hooks": {
      "pre-commit": "npm run test", // 在执行git commit之前先自动执行npm run test命令
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS" // 校验commit时添加的备注信息是否符合我们要求的规范
    }
  }
}

6.0.0版本之后需要我们自己去生成脚本

首先在package.json中配置

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

执行这个命令会生成一个.husky/的文件夹，这里面可以对husky进行一些列配置以及放置钩子脚本

执行

npx husky add .husky/pre-commit "npm run test" 

运行完该命令后我们会看到.husky/目录下新增了一个名为pre-commit的shell脚本。也就是说在在执行git commit命令时会先执行pre-commit这个脚本。pre-commit脚本内容如下：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
   
npm run  test

可以看到该脚本的功能就是执行npm run test这个命令

再执行

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

就会生成commit-msg脚本

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install commitlint --edit $1

这样，当我们在提交代码的时候就可以进行自动校验或者在commit之前执行一些脚本拉，比如在提交commit之前先执行一下测试脚本，或者先执行lint代码检查之类的。

更新

husky9.0版本之后 不在需要给执行脚本添加

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

拿commit-msg文件举例，我们只需要在里面写上

npx --no-install commitlint --edit $1

这样就可以了