使用 husky 进行提交前的代码规范校验和 commit 信息检查

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

husky官网

一、使用新版 husky （v6.x）进行配置

提交前 eslint 校验配置流程

1. 安装插件

npm i -D husky lint-staged

注意：推荐使用 npm 安装 eslint 和 husky，因为在 windows 操作系统下, 用 yarn 安装依赖，不会触发 husky pre-commit 钩子命令。 

lint-staged: 用于实现每次提交只检查本次提交所修改的文件。 

2. 在 package.json 添加 scripts

{
  "prepare": "husky install",
  "lint": "eslint src",
  "lint-staged": "lint-staged"
}

3. 执行 npm run prepare 来启动 husky

4. 添加 pre-commit 钩子

npx husky add .husky/pre-commit "npm run lint-staged" 

执行完根目录会自动生成一个 .husky/pre-commit  脚本。

5. 创建 .lintstagedrc 配置文件

{
  "src/**/*.{js,vue}": "npm run lint"
}

到这里，代码提交前的 eslint 校验已经配置好了。当然，提前是你已经配置好 Eslint 了。

提交时 commit 信息规范校验配置流程

commitlint

1. 安装插件

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

2. 在 package.json 添加 scripts 

{
  "commitlint": "commitlint --config commitlint.config.js -e -V"
}

3. 添加 commit-msg 钩子

npx husky add .husky/commit-msg "npm run commitlint"

4. 创建 commitlint.config.js 配置文件

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [ // type枚举
        2, 'always',
        [
          'build', // 编译相关的修改，例如发布版本、对项目构建或者依赖的改动
          'feat', // 新功能
          'fix', // 修补bug
          'docs', // 文档修改
          'style', // 代码格式修改, 注意不是 css 修改
          'refactor', // 重构
          'perf', // 优化相关，比如提升性能、体验
          'test', // 测试用例修改
          'revert', // 代码回滚
          'ci', // 持续集成修改
          'config', // 配置修改
          'chore', // 其他改动
        ],
    ],
    'type-empty': [2, 'never'], // never: type不能为空; always: type必须为空
    'type-case': [0, 'always', 'lower-case'], // type必须小写，upper-case大写，camel-case小驼峰，kebab-case短横线，pascal-case大驼峰，等等
    'scope-empty': [0],
    'scope-case': [0],
    'subject-empty': [2, 'never'], // subject不能为空
    'subject-case': [0],
    'subject-full-stop': [0, 'never', '.'], // subject以.为结束标记
    'header-max-length': [2, 'always', 72], // header最长72
    'body-leading-blank': [0], // body换行
    'footer-leading-blank': [0, always], // footer以空行开头
  }
}

二、commitlint 提交信息规范 

提交信息规范

提交信息语法：

type(scope?): subject 换行 body 换行 footer

示例：

chore: run tests on travis ci

feat(blog): add comment section

commitlint rule 语法

rule 语法：规则名称: [级别, 适用, 值]

• 级别：可选0,1,2。0禁用规则，1警告，2报错。
• 适用：可选 always, never。

三、旧版 husky 配置流程（v4.x）

安装（同上）

创建 .huskyrc

{
  "hooks": {
    // 提交commit时触发
    "pre-commit": "lint-staged",
    // 检测commit的message时触发
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}

创建 .lintstagedrc（同上）

设置 fix 可以自动修复错误：

{
   "src/**/*.js": ["eslint --fix", "git add"]
}

或者使用下面的配置，自动格式化代码（谨慎使用）：

{
   "src/**/*.js": ["prettier --write", "git add"]
}

创建 commitlint.config.js（同上）

三、配置不拆分成多个文件的话也可以全部写在 package.json 里面

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.js": "prettier --write --ignore-unknown"
  }
}