在团队多人开发中，规范的commit message可以快速定位代码提交历史，回溯问题根源，方便组内多人协作，提高团队效率。

今天这里的主题是安装 husky + commitlint 配置，话不多说上代码带截图~~~。

今天这里主要用到的插件是以下两个

• commitlint：用于检查提交信息
• husky：拦截git hooks工具

一、首先husky 安装

分以下步骤安装

1、项目内安装

npm install husky --save-dev
复制代码

2、添加prepare指令

这里采用命令行方式：

注: npm需要Version7.x.x以上 我这里的node版本是 16.14.0 npm版本是8.3.1

npm set-script prepare "husky install" && npm run prepare
复制代码

prepare脚本会在执行npm install之后自动执行。也就是说当我们执行npm install安装完项目依赖后会执行 husky install命令。

• 注意事项 以上命令语句存在 && 连接符，终端执行报错处理如下：
  • 终端若使用 PowerShell 需换成 cmd 或者 git Bash
  • 使用 PowerShell需要将 && 添加引号包裹，即：npm set-script prepare "husky install" '&&' npm run prepare

3、添加git hooks

创建一条 pre-commit hook

npx husky add .husky/pre-commit "npm run lint"
复制代码

执行该命令后，会看到.husky/目录下新增了一个名为pre-commit的shell脚本。

这样，在之后执行git commit命令时会先触发pre-commit这个脚本。

pre-commit脚本内容如下：

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

npm run lint

复制代码

注意：npm run lint 命令根据你自己项目中script脚本而定，eslint --ext .js,.vue src在lint脚本中

4、启动hooks

npx husky install

复制代码

启动后，将会自动生成.husky文件夹

5、规范commit message信息

添加commitlint的hook到husky中

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

若出现Usage问题，别慌，我们分开添加命令

• 先添加 npx husky add .husky/commit-msg 生成钩子文件

• 接着替换掉此文件里的 undefined

• 替换成 npx --no-install commitlint --edit $1

husky 使用

随便commit一下

git commit -m "fix: 代码修复"
复制代码

创建了 pre-commit hook之后，在每次执行 git commit 都会先触发pre-commit hook，来执行npm run lint中包含的 eslint 等代码检测工作。这样就可以有效避免将存在 eslint error 的代码提交到远程仓库了~~~

commitlint 安装与配置

错误提示我们需要安装安装 commitlint。

npm i @commitlint/cli @commitlint/config-conventional -D

复制代码

1.创建commitlint.config.js文件

终端命令
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js

复制代码

2.commitlint.config.js配置

这里附上官方文档配置链接 commitlint

这里可以配置自己想要得一些配置文件
module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-enum": [
      2,
      "always",
      [
        "feat", // 新功能 feature
        "fix", // 修复 bug
        "docs", // 项目文档或注释变更
        "style", // 仅仅修改了空格、格式缩进、逗号等等，不改变代码逻辑
        "refactor", // 代码重构，没有加新功能或者修复bug
        "perf", // 优化相关，比如提升性能、体验
        "test", // 增加测试
        "chore", // 改变构建流程、或者增加依赖库、工具等
        "revert", // 回滚到上一个版本
        "build", // 部署版本
      ],
    ],
    // subject 大小写不做校验
    "subject-case": [0],
  },
};

复制代码

我这里提交代码得时候会报错

是因为你复制以上这串代码得时候 commitlint.config.js 得时候编码不是UTF-8需要我们来转换一下编码格式

完成以上配置我们就可以使用commitlint husky来规范我们的代码了 随便commit一下

随便添加改写一个文件，提交暂存一下

git add .

复制代码

然后我们来提交一下吧

git commit -m "fix: 代码修复"

复制代码

你会神奇的发现，现在我们可以使commitlint husky来规范我们的代码提交了~~~~