前端项目 Git 提交约束配置

1. 准备工作

  • husky:触发 Git Hooks,执行脚本;
$ npm install -D husky
package.json
{
  "scripts": {
    "prepare": "husky install",
    "lint": "eslint --ext .js,.ts ./src --fix"
  }
}
$ npm run prepare

> husky install

husky - Git hooks installed

这个时候,我们发现在项目根目录下,多了一个文件夹:

.
├── .husky
|    ├── -
|    |   └── husky.sh
|    └── .gitignore

2. 代码格式校验

  • lint-staged:检测文件,只对暂存区中有改动的文件进行检测,可以在提交前进行 Lint 操作;
$ npm install -D lint-staged
package.json
{
  "scripts": {
    "lint-staged": "lint-staged --allow-empty"
  },
  "lint-staged": {
    "src/**/*.{js,ts}": ["eslint --fix"]
  }
}
$ npx husky add .husky/pre-commit "npm run lint-staged"
husky - created .husky/pre-commit

执行后,我们发现,.husky 目录下多了一个文件:

.
├── .husky
|    └── pre-commit
$ cat ./.husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint-staged

3. Git 提交消息格式校验

  • commitizen:使用规范化的 message 提交;
  • commitlint: 检查 message 是否符合规范;
  • cz-conventional-changelog:适配器。提供 conventional-changelog 标准(约定式提交标准)。
    基于不同需求,也可以使用不同适配器(比如: cz-customizable)。
$ npm install -D commitizen @commitlint/config-conventional @commitlint/cli

Commitizen 是一个主流的 Commit message 的生成工具,支持 Angular 的 commit message 格式,被众多主流框架采用。

安装完成后,需要在项目目录下,输入以下命令来初始化您的项目,以使用 cz-conventional-changelog 适配器:

$ npx commitizen init cz-conventional-changelog --save-dev --save-exact
  • 安装 cz-conventional-changelog;
  • 保存其依赖到 package.json 中;
  • 添加 config.commitizen key 到 package.json 中,如下:

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

然后使用 git cz 代替 git commit 命令即可,或者可以增加友好的 npm 命令,通过 npm run commit 进行提交:

{
  "scripts": {
    "commit": "git cz"
  }
}

此时我们已经根据约定规范提交了消息,但是我们怎么知道提交的消息是不是正确的呢?
那么接下来就需要配置刚刚介绍到的 commitlint,只需要一句命令即可完成配置,它会在项目根目录下面创建一个 commitlint.config.js 配置文件:

$ echo "module.exports = { extends: ['@commitlint/config-conventional'] }" > commitlint.config.js

它会使用 @commitlint/config-conventional 这个包里面提供的校验规则进行校验,你可以理解为 ESLint 的规则。

有了这个校验工具,怎么才可以触发校验呢,我们希望在提交代码的时候就进行校验,这时候 husky 就可以出场了,他可以触发 Git Hook 来执行相应的脚本,而我们只需要把刚刚的校验工具加入脚本就可以了。

我们需要定义触发 hook 时要执行的 Npm 脚本:

package.json
{
  "scripts": {
    "commitlint": "commitlint --config commitlint.config.js -e -V"
  }
}
设置 commit-msg 钩子,提交 message 执行校验。
$ npx husky add .husky/commit-msg "npm run commitlint"
husky - created .husky/commit-msg

4. 后记

此时已经完成配置了,现在团队里面任何成员的提交必须按照严格的规范进行了。

你可能感兴趣的:(前端git)