使用 husky 进行提交前的代码规范校验 husky+lint-staged+commitizen+commitlint

husky 是一个 Git Hook 工具，借助 husky 我们可以在 git 提交的不同生命周期进行一些自动化操作。本文主要介绍提交前 eslint 校验和提交时 commit 信息的规范校验。

husky官网
1.安装

npm i -D husky lint-staged commitizen @commitlint/config-conventional @commitlint/cli

2. husky初始化
   初始化后你的跟目录会出现一个.husky的文件夹

   npx husky install
   2.1维护lint-staged脚本 package.json

     "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix"
    ]
     },

   此时你可以手动执行如下命令就可以检测暂存区的规范了

   npx lint-staged

既可以看到报错信息
2.2 commitizen初始化
安装解适配器,cz-conventional-changelog是一个commitizen的适配器，适配器的作用是按照某个指定的规范帮助我们生成commit message，cz-conventional-changelog预设的是Angular团队的规范。

npx commitizen init cz-conventional-changelog --save-dev --save-exact

安装完成后，会在package.json自动添加如下内容,下面的path就是适配器的路径

 "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }

此后执行npx cz，就相当于执行git commit，不过npx cz会以命令行的方式让我们填写commit的信息，如下图所示，以交互的形式
2.3 commitlint初始化
根目录下创建commitlint.config.js

module.exports = {
  ignores: [commit => commit.includes('init')],
  extends: ['@commitlint/config-conventional'],
  rules: {
    'body-leading-blank': [2, 'always'], //body换行
    'footer-leading-blank': [1, 'always'], // footer以空行开头
    'header-max-length': [2, 'always', 108], // header最长108
    'subject-empty': [2, 'never'], // subject不能为空 内容不为空 subject may not be empty ，type后必须英文冒号加空格例如 feat: 新增用户列表
    'type-empty': [2, 'never'], // never: type不能为空; always: type必须为空
    'type-enum': [
      2,
      'always',
      [
        'feat', //新功能
        'fix', //修补bug
        'perf', // 优化相关，比如提升性能、体验
        'style', // 代码格式修改, 注意不是 css 修改
        'docs', //文档修改
        'test', // 测试用例修改
        'refactor', // 重构
        'build', // 编译相关的修改，例如发布版本、对项目构建或者依赖的改动
        'ci', // 持续集成修改
        'chore', // 其他改动
        'revert' // 代码回滚
      ]
    ]
  }
};

3.添加钩子到husky
上面我们做好所有工具的初始化工作，都能单独的完成它们自己的功能，现在我们需要添加钩子到husky，让他们关联起来；

3.1添加pre-commit钩子(commit之前触发)

npx husky add .husky/pre-commit

执行上面的命令后会自动在.husky中增加pre-commit文件，然后我们将npx lint-staged增加到这个文件里面去,这样我们在commit之前就会执行npx lint-staged命令，这样husky和lint-staged就关联起来了

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

3.2 添加commit-msg钩子

npx husky add .husky/commit-msg  

执行上面的命令后会自动在.husky中增加commit-msg文件，然后我们将npx --no-install commitlint --edit "$1"增加到这个文件里面去

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no-install commitlint --edit "$1"

此时如果我们还像之前那样随意填写内容的话，则会报如下错误
值得注意的是pre-commit在commit-msg之前，如果pre-commit里面执行的npx lint-staged命令检测不通过的话，那么就不会进到commit-msg的钩子了

husky版本

"husky": "^8.0.3",
"lint-staged": "^11.2.6",