通过githooks保证团队代码规范

前端团队开发中可能遇到的问题

  作为前端团队的一员，开发中可能发生的情况就是下载的代码经常有一些写法上错误，比如结尾分号，或者是空格，还有单双引号，判断相等==个数，有的要求为三个有的要求两个等等，或者css写的不标准，这主要是因为每个人执行的代码规范的标准不同，并且在没有任何检查拦截的情况下就提交到远程仓库，那么解决这个问题的办法就是建立统一标准，并且更重要的是在提交时检查，没有按照规范写的代码将不会被允许commit，更无法push到远程仓库。当然团队规模比较小可能这个问题不突出。

  git hooks包含多种钩子，有客户端钩子和服务器端钩子，这里不作详细介绍，可以参考官方文档⁴。

  前端项目中常用来处理git hooks工具是husky，但是vue项目都内置yorkie，yorkie是fork husky，但是配置完全不兼容，下面的内容采用yorkie来处理git hooks，想了解husky可以参考husky官方文档。

vue项目提交检查准备

1. 先检查vue项目是否安装了yorkie，如果没有安装就安装

npm i -D yorkie

2. 然后安装lint-staged，用来检查提交的代码是否规范

npm i -D lint-staged

3. 创建文件verify-commit-msg.js，用来检查commit message是否规范，如果不规范也会被拒绝提交，verify-commit-msg.js的内容如下:

const chalk = require("chalk");
const msgPath = process.env.GIT_PARAMS;
const msg = require("fs").readFileSync(msgPath, "utf-8").trim();

const commitRE =
  /^(revert: )?(feat|fix|polish|docs|style|refactor|perf|test|workflow|ci|chore|types|build)(\(.+\))?: .{1,50}/;

if (!commitRE.test(msg)) {
  console.log();
  console.error(
    `  ${chalk.bgRed.white(" ERROR ")} ${chalk.red(`invalid commit message format.`)}\n\n` +
      chalk.red(
        `  Proper commit message format is required for automated changelog generation. Examples:\n\n`,
      ) +
      `    ${chalk.green(`feat(compiler): add 'comments' option`)}\n` +
      `    ${chalk.green(`fix(v-model): handle events on blur (close #28)`)}\n\n` +
      chalk.red(`  See .github/COMMIT_CONVENTION.md for more details.\n`) +
      chalk.red(
        `  You can also use ${chalk.cyan(`npm run commit`)} to interactively generate a commit message.\n`,
      ),
  );
  process.exit(1);
}

  也可以使用commitlint，需要安装@commitlint/cli @commitlint/config-conventional，并且配置commitlint.config.js，参考后面³。

4. 配置

因为已经安装了yorkie，所以直接在package.json添加如下配置：

 "gitHooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "node scripts/verify-commit-msg.js"
  },

pre-commit： 捕获git commit前，执行代码检查

commit-msg：查看是否commit message是否规范，规范可参考¹。

然后在package.json中配置lint-staged，配置如下：

"lint-staged": {
    "*.{js,vue}": [
      "vue-cli-service lint",
    ]
},

如果需要vue-cli-service检查后自动修复错误可以在后面加上 --fix，并且添加git add把自动修复的代码重新添加。

"lint-staged": {
    "*.{js,vue}": [
      "vue-cli-service lint --fix",
      "git add"
    ]
},

这里直接使用了vue的检查也可以使用eslint等工具，如果使用eslint需要额外配置.eslintrc.{js,yml,json}。

规范化提交工具

可以借助一些自动化工具完成git提交信息的处理，这里简单介绍几种方式。

• commitizen

• cz-conventional-changelog

• conventional-changelog

• git-cz

方式一：commitizen + cz-conventional-changelog

commitizen可以配合cz-conventional-changelog 使用，package.json配置如下：

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

并且在package.json添加提交命令：

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

执行npm run commit会提示， 按照步骤输入提交信息，提交步骤是按照cz-conventional-changelog的配置。

方式二： commitizen + git-cz

  使用commitizen + git-cz的方式可以自定义提交配置，需要在项目目录下创建changelog.config.js，如果不创建则采用默认配置，或者统一配置如下：

在package.json添加

"config": {
    "commitizen": {
        "path": "git-cz"
    }
}

​ commit msg中一般省略body和footer内容，并且header中也没必要填写scope，可以进行自定义 。在changelog.config.js内容如下：

// changelog配置，commit 规则也在这里进行配置
// 参考文档：https://www.npmjs.com/package/git-cz

module.exports = {
  disableEmoji: false,
  format: "{type}{scope}: {emoji}{subject}",
  list: [
    "test",
    "feat",
    "fix",
    "chore",
    "docs",
    "refactor",
    "style",
    "ci",
    "perf",
  ],
  maxMessageLength: 64,
  minMessageLength: 3,
  questions: [
    "type",
    "scope",
    "subject",
    "body",
    "breaking",
    "issues",
    "lerna",
  ],
  scopes: [],
  // 翻译了一下描述部分
  types: {
    chore: {
      description:
        "跟仓库主要业务无关的构建/工程依赖/工具等功能改动（比如新增一个文档生成工具）",
      emoji: "🤖",
      value: "chore",
    },
    ci: {
      description: "CI related changes",
      emoji: "🎡",
      value: "ci",
    },
    docs: {
      description: "更新了文档（比如改了 Readme）",
      emoji: "✏️",
      value: "docs",
    },
    feat: {
      description: "一个新的特性",
      emoji: "🎸",
      value: "feat",
    },
    fix: {
      description: "修复bug",
      emoji: "🐛",
      value: "fix",
    },
    perf: {
      description: "优化了性能的代码改动",
      emoji: "⚡️",
      value: "perf",
    },
    refactor: {
      description:
        "一些代码结构上优化，既不是新特性也不是修 Bug（比如函数改个名字）",
      emoji: "💡",
      value: "refactor",
    },
    release: {
      description: "Create a release commit",
      emoji: "🏹",
      value: "release",
    },
    style: {
      description: "代码的样式美化，不涉及到功能修改（比如改了缩进）",
      emoji: "💄",
      value: "style",
    },
    test: {
      description: "新增或者修改已有的测试代码",
      emoji: "💍",
      value: "test",
    },
  },
};

有修改需要提交，执行npm run commit替代git commit ...，按照下面指引完成commit msg。

conventional-changelog 是用来根据所有提交信息生成changelog文档，生成文档内容如下，这里不多介绍。

commit message 格式

Commit message 都包括三个部分：Header，Body 和 Footer。

其中，Header 是必需的，Body 和 Footer 可以省略。

在Footer中可以关闭issue，但是如果没用issue来管理需求和bug则忽略。

Header部分只有一行，包括三个字段：type（必需）、scope（可选）和subject（必需）

详细内容可参考¹。

参考

• [1] commit message

• [2] vue-cli gitHooks原理

• [3] 规范commit msg

• [4] Git 钩子