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

欢迎关注前端早茶，与广东靓仔携手共同进阶

前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~

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!~~~大功告成！

 关于本文：https://juejin.cn/post/6988116616923840549

欢迎关注前端早茶，与广东靓仔携手共同进阶

前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~