规范git提交，自动生成提交记录

chenshuhong commented 4 years ago

commit message 是开发的日常操作, 写好 log 不仅有助于他人 review, 还可以有效的输出 CHANGELOG, 对项目的管理实际至关重要

Commit Message 格式

`<type>(<scope>): <subject> <BLANK LINE> <body> <BLANK LINE> <footer>`

标题行: 必填, 描述主要修改类型和内容
主题内容: 描述为什么修改, 做了什么样的修改, 以及开发的思路等等
页脚注释: 放 Breaking Changes 或 Closed Issues

其中type有以下几种

feat: 新特性
fix: 修改问题
refactor: 代码重构
docs: 文档修改
style: 代码格式修改, 注意不是 css 修改
test: 测试用例修改
chore: 其他修改, 比如构建流程, 依赖管理
perf: 提高性能
build: 构建修改
ci: 持续集成修改、

scope: commit 影响的范围, 比如: route, component, utils, build...

subject: commit 的概述, 建议符合 50/72 formatting，即少于50个字符

body: commit 具体修改内容, 可以分为多行, 建议符合 50/72 formatting，即少于72个字符

footer: 一些备注, 通常是 BREAKING CHANGE 或修复的 bug 的链接

chenshuhong commented 4 years ago

Commitizen: 替代你的 git commit

全局安装

commitizen/cz-cli, 我们需要借助它提供的 git cz 命令替代我们的 git commit 命令, 帮助我们生成符合规范的 commit message.

除此之外, 我们还需要为 commitizen 指定一个 Adapter 比如: cz-conventional-changelog (一个符合 Angular团队规范的 preset). 使得 commitizen 按照我们指定的规范帮助我们生成 commit message.

npm install -g commitizen cz-conventional-changelog
echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc

这里就实现了本地环境下所有git项目都能通过git cz来提交代码，此时会有交互让你输入信息

项目级安装

npm install -D commitizen cz-conventional-changelog

package.json中配置:

config字段用于添加命令行的环境变量。

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

如果全局安装过 commitizen, 那么在对应的项目中执行 git cz or npm run commit 都可以.

自定义 Adapter

也许 Angular 的那套规范我们不习惯, 那么可以通过指定 Adapter cz-customizable 指定一套符合自己团队的规范.

全局或项目级别安装:

npm i -g cz-customizable
or
npm i -D cz-customizable
复制代码

修改 .czrc 或 package.json 中的 config 为:

{ "path": "cz-customizable" }
or
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  }

同时在~/ 或项目目录下创建 .cz-config.js 文件, 维护你想要的格式: 比如你可以增加自己的type图标，就像antd的changelog一样

具体写法可参考https://github.com/leonardoanalista/cz-customizable，建议用angular的语法就足够了

chenshuhong commented 4 years ago

webstrom使用

一般我是直接在webstrom提交代码的，利用他的git可视化，这里可以安装插件Git Commite Template,他是基于angluar规范的，可以跟以上完美契合。

chenshuhong commented 4 years ago

Commitlint: 校验你的 message

commitlint: 可以帮助我们 lint commit messages, 如果我们提交的不符合指向的规范, 直接拒绝提交, 比较狠.

同样的, 它也需要一份校验的配置, 这里推荐 @commitlint/config-conventional (符合 Angular团队规范).

安装:

npm i -D @commitlint/config-conventional @commitlint/cli

同时需要在项目目录下创建配置文件 commitlintconfig.js, 写入:

module.exports = {
  extends: ['@commitlint/config-conventional']
}

结合 Husky

校验 commit message 的最佳方式是结合 git hook, 所以需要配合 Husky.

npm i husky

package.json 中添加:

"husky": {
    "hooks": {
      ...,
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },

关于husky，我们还经常会在提交之前进行eslint等校验

"husky": {
  "hooks": {
    "pre-commit": "npm run lint"
  }
}

这里在 commit 之前，我们先执行了 npm run lint，这是 vue-cli3 给我们提供的命令，会根据我们的 eslint 规则来校验代码，并且自动修复，记得先 git add 文件

但这样会有一个问题，就是这次提交，我可能只修改了一个文件，比如我就修改了 a.js 的内容，但它依然会校验 src 下面所有的 .js 文件，非常的不友好。

导致的问题就是：每次提交代码，无论改动多少，都会检查整个项目下的文件，当项目大了之后，检查速度也会变得越来越慢

lint-staged

解决上面的痛点就需要使用 lint-staged。它只会校验你提交或者说你修改的部分内容。

npm install lint-staged -D

"lint-staged": {
    "src/**/\\*.{ts,js,vue}": ["npm run lint"]
  }

这样写每次提交代码前都会执行npm run lint 然后把修改的文件添加到git里

chenshuhong commented 4 years ago

standard-version: 自动生成 CHANGELOG

通过以上工具的帮助, 我们的工程 commit message 应该是符合 Angular团队那套, 这样也便于我们借助 standard-version 这样的工具, 自动生成 CHANGELOG, 甚至是语义化的版本号(Semantic Version).

安装

npm i --save-dev standard-version

使用

//package.json
{
  "scripts": {
    "release": "standard-version"
  }
}

可以传参数调整版本号变化，具体看文档

chenshuhong / study-life