前端项目commit提交规范

自己在实战项目中所使用的commit规范

前言

规范一个团队的git提交信息是非常有必要的,不规范的提交信息会导致后续维护非常不方便。

commit message 作用

  • 提供更多的历史信息,方便快速浏览。

  • 可以过滤某些commit(比如文档改动),便于快速查找信息。

  • 可以直接从commit生成Change log。

安装和使用

安装git-cz和commitizen

npm install -g commitizen
npm install --save-dev git-cz
commitizen init cz-conventional-changelog --save-dev --save-exact

执行上面安装完成后package.json中会自动添加以下内容

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

添加一下npm scripts再执行npm run commit

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

随后可在终端选择commit类型

Image text

选择type后回车,就会让你填写scope,这个一般可以不写,直接跳过,或者自定义配置项时过滤掉该步奏,下一步就是填写body的内容和后续footer的内容,都可以跳过,但如果一次性提交内容过多,建议填写详细的描述到body,footer一般情况很少用到,对应情况填写。

项目文件下新增changelog.config.js

module.exports = {
  "disableEmoji": false,
  "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"
    }
  }
}

commit校验


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

配置husky

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

添加配置文件.commitlintrc.js

module.exports = {
  // commit lint校验规则继承
  extends: ['@commitlint/config-conventional'],
  // 自定义校验规则,可不写
    rules: {},
};

配置完成后,每次commit就会进行校验,校验不通过会拦截commit

Changelog

采用conventional-changelog,能根据项目的commit和metadata信息自动生成 changelogs和release notes

// 下载
npm install -s conventional-changelog-cli

// 配置 package.json
"scripts": {
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
}

生成changelog

npm run changelog

commit和changelog提交

1.使用npm提交

npm run commit // git commit

2.选择commit类型并添加commit message

Image text

3.生成changelog

前面一步我们已经生成commit信息了,所以接下来可以使用changelog工具生成changelog

npm run  changelog

注意:如果需要生成不同版本的changlog需要在package.json中修改版本号

{
  "name": "vue-admin-template",
  "version": "4.4.0",//这里改一下版本号
}

4.git提交

 git push