husky7.0.1 + commitlint 配置提交代码检查和规范踩坑指南

晓色暮云

2021年07月23日 21:42 · 阅读 8491

背景

最近新起了一个后台项目，还要迁移旧的项目代码，练手之余各种踩坑，临近上线才想起来添加commit提交代码前格式化检查代码并规范提交信息。

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

由于我的项目采用的是 husky + commitlint 配置，接下来围绕这两个简要介绍下我的踩坑史。

注: husky 6.0.0 版本发生了破坏性变更，下述方案使用的是 7.0.1 版本husky，对于低于 6.0.0 版本不适用，低于7.0.1 版本husky也可能存在问题。

husky 安装

参考 husky 的README：GitHub husky 小白如果看着有疑问可以跟着我的步骤来：

1、项目内安装

npm i lint-staged husky -save-dev
复制代码

2、创建.husky/目录并指定该目录为git hooks所在的目录

在package.json中添加prepare脚本

{
  "scripts": {
      "prepare": "husky install"
  }
}
复制代码

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

或者采用命令行方式：

注: 需要npm版本Version 7.x(npm set-script命令需要7.x)

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、规范commit message信息

类似的，我们也可以添加commit-msg钩子，来规范我们的commit message信息

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

husky 使用

随便commit一下

git commit -m "feat: pre-commit优化"
复制代码

创建了 pre-commit hook之后，在每次执行 git commit 或者 git commit --amend时，都会先触发pre-commit hook，来执行npm run lint中包含的 eslint 等代码检测工作。

理论上，这样就可以有效避免将存在 eslint error 的代码提交到远程仓库了~~~

但是点击执行后却报错了：

> eslint --ext .js,.vue src

not found: commitlint
husky - commit-msg hook exited with code 127 (error)
复制代码

commitlint 安装与配置

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

npm i @commitlint/cli @commitlint/config-conventional -D
复制代码

接下来继续commit结果又报错了....害！

> eslint --ext .js,.vue src

⧗   input: feat: pre-commit优化
✖   Please add rules to your `commitlint.config.js`
    - Getting started guide: https://git.io/fhHij
    - Example config: https://git.io/fhHip [empty-rules]

✖   found 1 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky - commit-msg hook exited with code 1 (error)
复制代码

提示可知要配置 commitlint.config.js

于是

echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js
复制代码

ok!~~~大功告成！