提交代码之前

为了保证代码质量，规范化的开发，我们往往需要在代码提交之前进行代码检查。

代码风格
代码测试
格式化代码
自动的生成 change_log
......

这些都是我们完成代码工程化的一些必须要做的事情，规范的代码需要有一些解决方法。使用 git 预处理钩子，在代码提交之前进行一些预处理, 然后提交。

可以提交方案使用方案和change_log

commitlint
commitizen
husky
yorkie
lint-staged
conventional-changelog-cli

commitlint

commitlint 帮助您的团队遵守提交约定。通过支持npm安装的配置，它使共享提交约定变得容易。

# 安装
npm install -g @commitlint/cli @commitlint/config-conventional
# 配置
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
# 测试
echo 'foo: bar' | commitlint

因为 commitlint 诞生了👇下面的 commitizen 项目。commitlint 类似于 eslint 等项目有自己的规则。可以看下面的参考部分得到 commitizen 的入口，来深入的学习 commitizen 函数。

commitizen

commitizen 是一个可以现成使用的具有 Anlugar 提交规范的工具。它的源于 commitlint 项目。

// 全局安装 commitizen
npm install -g commitizen

在 commitizen 上面有一个友好的库，如果是一个友好的库，然后我们提交代码就可以使用 npx git-cz or git cz, 或者使用 npm 脚本来处理。下面是我们如何创建一个友好的库：

# npm
commitizen init cz-conventional-changelog --save-dev --save-exact

# yarn
commitizen init cz-conventional-changelog --yarn --dev --exact

Vue 项目中提交规则

// verifyCommitMsg.js
const chalk = require('chalk')  // eslint-disable-line
const msgPath = process.env.GIT_PARAMS
const msg = require('fs').readFileSync(msgPath, 'utf-8').trim()

const commitRE = /^(v\d+\.\d+\.\d+(-(alpha|beta|rc.\d+))?$)|((revert: )?(feat|fix|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)
}

yorkie 以及配置

yorkie 是从 husky 下面克隆的一个项目，是在 Vue 项目中广泛的使用。

$ yarn add husky lint-staged --dev

# or
$ yarn add yorkie lint-staged

husky 以及配置

"husky": {
    "hooks": {
        "pre-commit": "lint-staged"
    }
},
"lint-staged": {
    "src/**/*.js": ["eslint --fix", "git add"]
 },

使用 yorkie

在 Vue 的项目构建的构成中使用的 yorkie 的配置如下

"gitHooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "node scripts/verifyCommitMsg.js"
  },
  "lint-staged": {
    "*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  },

使用

$ git add .
$ git commit -m 'something'

输出下面的信息

husky > pre-commit (node v10.15.0)
No staged files match any of provided globs.
[master ed90c7e] sdfs
 1 file changed, 5 insertions(+)

跳过 husky 的验证

no-verify 无验证的提交代码

husky > pre-commit hook failed (add --no-verify to bypass)

git commit --no-verify -m 'othersoming'

生成 change_log

$ npm install -g conventional-changelog-cli
$ cd my-project
$ conventional-changelog -p angular -i CHANGELOG.md -s

# 如果这是您第一次使用此工具，并且想要生成所有以前的变更日志，则可以执行
$ conventional-changelog -p angular -i CHANGELOG.md -s -r 0

npm script

"changelog": "conventional-changelog -p angular -r 2 -i CHANGELOG.md -s",

注意

我们在使用 husky 的时候，我们一定先初始化好 git 仓库不然会有报错，git 初始化都没有干好，husky 处理 git 钩子函数还有什么意义呢？所以先后顺序很重要。

代码的提交检查

使用 angular 团队的提交规范
使用 Vue 开源代码的中的提交规范

代码提交规范与change_log