如何规范你的commit

小平不小
4,426 阅读4分钟

前言

一个项目的开发往往是团队同学合作的结果，但是随着团队成员越来越多，每个人的代码风格及提交方式并不相同，这就容易导致各种各样的问题，代码风格方面可以借助 eslit、perttier 等进行限定，不仅可以统一代码风格，也能尽早发现潜在的bug。

同样，一个好的的commit提交信息也至关重要，好的commit记录不仅看起来赏心悦目，也能在后期出现问题时，快速的排查到对应代码。本文将简单 Git hooks 的简单实用，以及一步步的将 commit 规范的集成在项目中。帮助团队同学提交统一的commit信息。 最终实现如下效果：

image.png

commit 格式

目前最为推崇的 commit 格式为 angular 的提交方式。格式如下：

<type>(<scope>): <subject>
  • type(必选) 本次提交的类型，一般包含下面几种。
    • fix 修复bug
    • feat 新功能
    • build 构建系统的更改或新的依赖更新，如webpack、gulp更改或者npm
    • ci ci配置的更改，如 travis、gitlab-ci
    • ...more 更多可查看下方配置.
  • scope(可选) 本次提交的范围
    • 如更改的对应模块或者文件名
    • 如果是 build 类型的提交，可以写 webpack、gulp、npm 等
    • 同样，如果是 ci 类型的提交，可写travis、gitlab-ci 等
  • subject(必选) 本次提交的描述

项目集成

1、安装 commitlint用来校验commit格式是否符合。

yarn add @commitlint/cli --dev

在项目的跟路径增加配置文件 commitlint.config.js如下:

module.exports = {
  rules: {
		'body-leading-blank': [1, 'always'],
		'body-max-line-length': [2, 'always', 100],
		'footer-leading-blank': [1, 'always'],
		'footer-max-line-length': [2, 'always', 100],
		'header-max-length': [2, 'always', 100],
		'subject-case': [
			2,
			'never',
			['sentence-case', 'start-case', 'pascal-case', 'upper-case'],
		],
		'subject-empty': [2, 'never'],
		'subject-full-stop': [2, 'never', '.'],
		'type-case': [2, 'always', 'lower-case'],
		'type-empty': [2, 'never'],
		'type-enum': [
			2,
			'always',
			[
				'build',
				'chore',
				'ci',
				'docs',
				'feat',
				'fix',
				'perf',
				'refactor',
				'revert',
				'style',
				'test',
			],
		],
	},
}

2、 安装 husky 对 commit 的信息自动检验

  • 在使用 husky 之前先来了解一下 Git hooks。Git 能在特定的重要动作发生时触发自定义脚本执行。而 git 的钩子函数分为客户端和服务端两种，客户端钩子由诸如提交和合并这样的操作所调用，而服务器端钩子作用于诸如接收被推送的提交这样的联网操作。具体的钩子使用以及触发阶段可查看Git hooks。

  • 而 husky 的作用就是可以可以更简单的使用 Git hooks

yarn add husky --dev

3、 Git hooks 激活

husky 安装之后需要执行 npx husky install 才可以激活 Git hooks 的调用。 或者将其设置为 package.json 中的一个 script。

npm set-script prepare "husky install"

这样当执行 yarn install 或者 npm install 时会自动触发 husky install 的执行

4、增加 commit-msg 钩子

  npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

此时再次进行commit时就会触发 commit-msg 的钩子，来对提交信息进行校验，如果不符合格式，将会被拒绝提交.

image.png

image.png

5、Git hooks

同时对于 Git hooks，可以设置很多便捷的操作。如自动执行 lint 同时将 lint 后的代码进行提交。

npx husky add .husky/pre-commit  'yarn lint &&  git add . '

image.png

或者在 pre-commit 的钩子中增加 yarn test 提交代码前自动执行单元测试。如果单元测试不通过，当前的commit会自动退出。

注意

  • 对于 liux 或者 macos 系统中，可能会出现 因为没有将钩子 '.husky/pre-commit' 设置为可执行 钩子被忽略。 的错误。这是因为当前的文件没有执行权限，只需要执行chmod +x .husky/pre-commit更改文件为可执行即可。
  • husky 的钩子使用，在之前的版本中可以在package.json中配置如下：
{
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS" // 校验commit时添加的备注信息是否符合我们要求的规范
    }
  }
}

但在最新版本中配置。husky将不会执行，具体可查看husky使用总结

进阶—— 自动生成commit信息以及使用 Emoji

yarn add @commitlint/cz-commitlint commitizen --dev

更改package.json

{
  "scripts": {
    "commit": "git add . && git-cz"
  },
  "config": {
    "commitizen": {
      "path": "@commitlint/cz-commitlint"
    }
  }
}

更改 commitlint.config.js 如下之后甚至可以使用 Emoji：

module.exports = {
  parserPreset: {
    parserOpts:{headerPattern: /^(.*)(?:\((.*)\))?!?: (.*)$/}
  },
  rules: {
		'body-leading-blank': [1, 'always'],
		'body-max-line-length': [2, 'always', 100],
		'footer-leading-blank': [1, 'always'],
		'footer-max-line-length': [2, 'always', 100],
		'header-max-length': [2, 'always', 100],
		'subject-case': [
			2,
			'never',
			['sentence-case', 'start-case', 'pascal-case', 'upper-case'],
		],
		'subject-empty': [2, 'never'],
		'subject-full-stop': [2, 'never', '.'],
		'type-case': [2, 'always', 'lower-case'],
		'type-empty': [2, 'never'],
		'type-enum': [
			2,
			'always',
			[
				'✨feat',
				'🐛fix',
				'📚docs',
				'💎style',
				'📦refactor',
				'🚀perf',
				'🚨test',
				'🛠build',
				'⚙️ci',
				'🗑revert',
			],
		],
	},

  prompt: {
		questions: {
			type: {
				description: "选择当前 commit 的类型",
				enum: {
					'✨feat': {
						description: '新功能',
						title: '✨Features',
						emoji: '✨',
					},
					'🐛fix': {
						description: '修复bug',
						title: '🐛Bug Fixes',
						emoji: '🐛',
					},
					'📚docs': {
						description: '文档更新',
						title: '📚Documentation',
						emoji: '📚',
					},
					'💎style': {
						description:'代码风格的更改(空格，逗号，缺少分号等)',
						title: '💎Styles',
						emoji: '💎',
					},
					'📦refactor': {
						description:'代码重构(即不修复bug也不增加新功能)',
						title: '📦Code Refactoring',
						emoji: '📦',
					},
					'🚀perf': {
						description: '性能提升',
						title: '🚀Performance Improvements',
						emoji: '🚀',
					},
					'🚨test': {
						description: '添加测试文件或者更改测试文件',
						title: '🚨Tests',
						emoji: '🚨',
					},
					'🛠build': {
						description:'构建系统的更改或新的依赖更新，如webpack、gulp更改或者npm',
						title: '🛠Builds',
						emoji: '🛠',
					},
					'⚙️ci': {
						description:'ci配置的更改，如 travis、gitlab-ci',
						title: '⚙️Continuous Integrations',
						emoji: '⚙️',
					},
					'🗑revert': {
						description: '恢复以前的提交（如git revert）',
						title: '🗑Reverts',
						emoji: '🗑',
					},
				},
			},
			scope: {
				description:
					'变动访问，模块或者文件名(可skip)',
			},
			subject: {
				description:'写一个简短的描述',
			},
			body: {
				description: '提供更改的详细说明(可skip)',
			},
			isBreaking: {
				description: '是否有破坏性更新',
			},
			breakingBody: {
				description:'破坏性变更的详细描述',
			},
			breaking: {
				description: '破坏性变更的详细描述简短描述',
			},
		},
	},
}

此时提交代码时，只需要运行yarn commit image.png 按照提示，输入对应的信息即可完成提交。

在windows 可能存在Emoji 乱码问题，请自行google解决。

进阶——增加changelog

yarn add conventional-changelog-cli --dev

package.json 增加 script 如下:

"scripts": {
   "changelog":"conventional-changelog -p -i CHANGELOG.md -s",
 },

如果是第一次使用并且想要生成之前的所有 changlog可以改为conventional-changelog -p -i CHANGELOG.md -s -r 0。 同时也可以将yarn changelog的命令放在 pre-commit中，每次提交自动生成changelog。

参考

avatar
文章
阅读
粉丝