前端工程化规范之代码提交与规范

前言

在上一章我们完成了对代码本身的有关质量与格式的规范化，在这一章我们将要了解并完成代码提交时的相关规范。

我们先按照上一章教程配置好 eslint-config，但暂不修改代码。

示例见 steins/frontend-project-normalize 各分支, 欢迎尝试！

Husky

Husky 是一种 Git hooks 工具，负责在检测到相应的 git 命令时执行预设指令。

添加 husky 相关依赖

$ pnpm dlx husky-init
$ pnpm install

修改相关配置文件

# Edit .husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

pnpm run lint

我们可以看到它将自动创建一个 pre-commit hook，当我们运行 commit 时首先执行预设的 pnpm run lint 指令，没有发生错误后才会继续后面的 commit 流程。

由于我们添加 eslnit-config 设置后并未修改代码，理所当然此时我们通过不了校验，无法提交。

当然，此时想要通过提交也只需要简单地将指令替换为可以通过的指令即可。

Lint-staged

Lint-staged 将帮助我们仅对位于暂存区的文件即通过 git add 指令添加的文件执行相关操作，这样就不会对非本次修改代码产生影响，避免与先前的代码发生冲突。

添加 lint-staged 相关依赖

$ pnpm install --save-dev lint-staged

修改相关配置文件

# Edit .husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

# Create and edit .lintstagedrc
{
    "src/*.{js,ts,vue}": "eslint"
}

我们执行提交可以发现通过 lint-staged，我们对暂存区所有文件，异步、单独执行了 eslint 命令，所有文件均校验通过后我们才实际完成了提交。

到这里代码质量与规范就告一段落了，我们实现了每次提交前都会自动检验，检验若是不通过将直接无法提交，接下来就是提交规范相关。

Commitlint

Commitlint 一般需要配合 commitizen 等使用，主要用于校验我们的 commit message 是否符合预设的规范。

添加 commitlint 相关依赖

$ pnpm install --save-dev @commitlint/config-conventional @commitlint/cli

修改相关配置文件

# Create and edit .commitlintrc
{
    "extends": ["@commitlint/config-conventional"]
}

# Add git hook
$ npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

此时我们再像之前一样提交就没用了，因为我们的 commit message 不符合我们设定的规范。预设规范可见 @commitlint/config-conventional。

当然一旦 message 符合规范就不再是问题，比如我们这样提交。

$ git commit -m 'chore: add commitlint'

但这样比之前也变得更复杂了，还得专门记住有哪些规范，规范应该怎么书写，所以接下来我们将借助一些 cli 工具自动完成符合规范的提交。

Commitizen

Commitizen 是最经典也是最常用的提交相关 cli 工具, 帮助我们生成一定规范的 commit message。

添加 commitizen 相关依赖

$ pnpm install --save-dev commitizen @commitlint/cz-commitlint inquirer@8

修改相关配置文件

# Edit package.json
{
  ...
  "scripts": {
    ...
    "commit": "git-cz"
  },
  "config": {
    "commitizen": {
      "path": "@commitlint/cz-commitlint"
    }
  }
  ...
}

commitizen 完成提示，cz-commitlint 规定校验规则，到这里其实基本可以算告一段落了，我们可以看到 vue 的 repo 提交就是类似这样的，但作为前端我们当然会想要让它变得更 cool 一点，比如添加 emoji。

Cz-customizable

Cz-customizable 可以让我们生成属于自己的 commit message 提示与规范

添加 cz-customizable 相关依赖

$ pnpm install --save-dev cz-customizable

修改相关配置文件

# Edit package.json
{
  ...
- "type": "module"
  ...
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  }
  ...
}

最经典也最王道, 最新版本好像有点问题

list any issues 始终报错 str.match is not a function。

github 上也能找到相关 issue 描述，暂时不推荐使用 Breaks if body is left empty。

Cz-git

commitizen + commitlint + cz-customizable 虽然王道，但也确实稍显复杂，有没有什么可以一劳永逸点呢，请允许我介绍由 @Q.Ben Zheng 出品的 cz-git, 简单好用带简中文档，赞欸！

让我们把时间线拨回到 lint-staged，接着添加 cz-git 和 commitizen 支持

添加 cz-git 相关依赖

$ pnpm install --save-dev commitizen cz-git

修改相关配置文件

# Edit package.json
{
  ...
  "scripts": {
    "commit": "git-cz"
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-git"
    }
  }
  ...
}