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

Lynne，一个能哭爱笑永远少女心的前端开发工程师。身处互联网浪潮之中，热爱生活与技术。(实际上是一只没有对象莫得感情的机器加班狗。)

背景

最近新起了一个后台项目，还要迁移旧的项目代码，练手之余各类踩坑，临近上线才想起来添加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 小白若是看着有疑问能够跟着个人步骤来：

一、项目内安装

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

二、建立.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
复制代码

三、添加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脚本中

四、规范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!~~~大功告成！