通过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 钩子