- Notifications
You must be signed in to change notification settings - Fork14
dev-zuo/commitizen-practice-demo
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Vue 项目 commitizen + husky + commitlint，git commit 提交信息规范校验 demo，conventional commits 实践
commitizen：使用 git cz 代替 git commit，引导用户填写规范的 commit 信息husky + commitlint：git commit 动作时，校验 commit 信息，如果不满足 commitizen 规范，无法提交
npm install @vue/cli -g# 安装 @vue/clivue create comitizen-practice-demo# [Vue 3] typescript, router, vuex, eslint, unit-mocha)
commitizen 是一个 cli 工具，用于规范化 git commit 信息，可以代替 git commit
npm install -g commitizen cz-conventional-changelog# 安装规范化提交插件echo'{"path": "cz-conventional-changelog"}'>~/.czrc# 配置git cz# ? Select the type of change that you're committing: docs: Documentation only changes# ? What is the scope of this change (e.g. component or file name): (press enter to skip) readme# ? Write a short, imperative tense description of the change (max 86 chars):# (46) update readme.md, add init project description# ? Provide a longer description of the change: (press enter to skip)# ? Are there any breaking changes? No# ? Does this change affect any open issues? No# [main caae82e] docs(readme): update readme.md, add init project description# 1 file changed, 7 insertions(+)# zuo@zmac comitizen-practice-demo %
如图，git cz 运行后，会有如下 6 个步骤
Select the type of change that you're committing: (Use arrow keys)
| 类型 | 描述 |
|---|---|
| feat | A new feature |
| fix | A bug fix |
| docs | Documentation only changes |
| style | Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) |
| refactor | A code change that neither fixes a bug nor adds a feature |
| perf | A code change that improves performance |
| test | Adding missing tests or correcting existing tests |
| build | Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm) |
| ci | Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs) |
| chore | Other changes that don't modify src or test files |
| revert | Reverts a previous commit |
What is the scope of this change (e.g. component or file name): (press enter to skip)
Write a short, imperative tense description of the change (max 86 chars):
Provide a longer description of the change: (press enter to skip)
Are there any breaking changes?
Does this change affect any open issues?
可以关闭 github issue，但注意 commit 信息里面的末尾也要加 '(#issue编号)'，这样在 github 体验更好
# 修改 README.mdgit add.# 添加到 gitgit cz# 提交# ? Select the type of change that you're committing: docs: Documentation only changes# ? What is the scope of this change (e.g. component or file name): (press enter to skip) readme# ? Write a short, imperative tense description of the change (max 86 chars):# (46) update readme.md, add init project description# ? Provide a longer description of the change: (press enter to skip)# ? Are there any breaking changes? No# ? Does this change affect any open issues? No# [main caae82e] docs(readme): update readme.md, add init project description# 1 file changed, 7 insertions(+)# zuo@zmac comitizen-practice-demo %
查看提交信息
zuo@zmac comitizen-practice-demo % git logcommit caae82ec7beb66423f190ab86a6343447b250046 (HEAD -> main)Author: zuoxiaobai<guoqzuo@gmail.com>Date: Thu Oct 14 07:17:31 2021 +0800 docs(readme): update readme.md, add init project description
在 github 仓库提交一个 issue，看是否提交 fix 时，可以关联这个 issue
创建一个 issuefix type 提交类型关联测试 2
git czcz-cli@4.2.4, cz-conventional-changelog@3.2.0# ? Select the type of change that you're committing: fix: A bug fix# ? What is the scope of this change (e.g. component or file name): (press enter to skip) tests# ? Write a short, imperative tense description of the change (max 88 chars):# (17) update tests (#2)# ? Provide a longer description of the change: (press enter to skip)# ? Are there any breaking changes? No# ? Does this change affect any open issues? No# [main 821cd42] fix(tests): update tests (#2)# 1 file changed, 2 insertions(+)# fix(tests): update tests (#2)
提交时选择是否影响了 open 状态的 issue，如果选择了，github 会自动关闭该 issue
zuo@zmac comitizen-practice-demo % git czcz-cli@4.2.4, cz-conventional-changelog@3.2.0# ? Select the type of change that you're committing: fix: A bug fix# ? What is the scope of this change (e.g. component or file name): (press enter to skip) public# ? Write a short, imperative tense description of the change (max 87 chars):# (28) auto close github issue test# ? Provide a longer description of the change: (press enter to skip)# ? Are there any breaking changes? No# ? Does this change affect any open issues? Yes# ? If issues are closed, the commit requires a body. Please enter a longer description of the commit itself:# try to fix issue 2, just a msg# ? Add issue references (e.g. "fix #123", "re #123".):# fix #2# [main 146e7b9] fix(public): auto close github issue test# 1 file changed, 1 insertion(+)# zuo@zmac comitizen-practice-demo %
注意：如果 commit 信息里面后面不加 (#issue编号)，git commit 表面是看不出来的，只有点击去才行
该提交会关闭 #2 issue，注意 issue 详情里会自动关联 commit 信息中有 #issue 编号的提交，如下图，
commitlint 结合 husky 可以在 git commit 时校验 commit 信息是否符合规范
- 安装 husky
npm install husky --save-dev
- 安装 husky git hooks
# 方法1：npx husky install# 方法2：配置 package.json, scripts："prepare": "husky install"npm run prepare# husky - Git hooks installed
- 测试 husky 钩子作用，添加 pre-commit 钩子
npx husky add .husky/pre-commit"npm test"# 查看当前目录 .husky 目录是否有生成 pre-commit 文件# 如果需要删除这个钩子，直接 删除 .husky/pre-commit 文件即可
npm install -g @commitlint/cli @commitlint/config-conventional# Configure commitlint to use conventional configecho"module.exports = {extends: ['@commitlint/config-conventional']}"> commitlint.config.jsnpx husky add .husky/commit-msg'npx --no-install commitlint --edit "$1"'
测试
git add.git commit -m'xx'zuo@zmac comitizen-practice-demo % git commit -m'xxx'# ⧗ input: xxx# ✖ subject may not be empty [subject-empty]# ✖ type may not be empty [type-empty]# ✖ found 2 problems, 0 warnings# ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint# husky - commit-msg hook exited with code 1 (error)# zuo@zmac comitizen-practice-demo %
提示缺少 subject 就是提交信息、type 就是提交类型，按照规范提交就 ok 了
注意：该方法结合 npm version 时，生成会有问题，建议使用后面的 standard-version 自动生成，自动 tag，自动 commit
$ npm install -g conventional-changelog-cli$ cd my-project$ conventional-changelog -p angular -i CHANGELOG.md -s注意：默认版本是 package.json 中的 version 参数: "version": "0.1.0", 如果版本变更，需要使用 npm version '版本号'，修改版本号，再生成
npm version 0.2.0# 修改 package.json 版本号，并打一个 tag，待 push，commit 信息 0.0.2git push origin --tags# push tagsgit commit --amend -m'feat(version):version to 0.2.0'# commit 信息不对，导致生成 log 有问题，需要修改# 修上次提交记录，把 0.2.0 改为标准格式再生成，就可以生成 change log 了
npm version 时加上比较好的注释试试
zuo@zmac comitizen-practice-demo % npm version 0.4.0 -m'feat(version):0.4.0 tag remark'v0.4.0zuo@zmac comitizen-practice-demo % git logcommit 0fdcd82353f3907c4a31e470402b6dce743b4b11 (HEAD -> main, tag: v0.4.0)Author: zuoxiaobai<guoqzuo@gmail.com>Date: Fri Oct 15 06:58:20 2021 +0800 feat(version):0.4.0 tag remark# 再次生成 changelog 又不行了，空白
上面的例子中，npm run version 更新版本号会直接提交，导致且 commit 信息就是版本号，不符合 commitizen 规范。导致手动生成 log 时，会是空白。standard-version 就很好的解决了这个问题。安装后，只需要 npm run release，就可以有 npm run version 的功能，而且提交信息是标准的 commitizen 规范，而且自动生成 changelog 自动打 tag，自动 commit。你只需要 push 即可。
npm install standard-version --save-dev
scripts 设置
// scripts"release":"standard-version"
zuo@zmac comitizen-practice-demo % npm run release> comitizen-practice-demo@0.4.1 release /Users/zuo/Desktop/fecloe/comitizen-practice-demo> standard-version✔ bumping versionin package.json from 0.4.1 to 0.4.2✔ bumping versionin package-lock.json from 0.4.1 to 0.4.2✔ created CHANGELOG.md✔ outputting changes to CHANGELOG.md✔ committing package-lock.json and package.json and CHANGELOG.md✔ tagging release v0.4.2ℹ Run`git push --follow-tags origin main` to publishzuo@zmac comitizen-practice-demo %# git push# git push --tags
需要注意的是：CHANGELOG.md 是追加写入内容的，如果你之前没有对应的内容或删了之前的内容，会导致生成的内容较少，或者不完整。
# 0.4.1npm run release# 0.4.1 => 0.4.2npm run release -- --prerelease# 0.4.2 to 0.4.3-0npm run release# 0.4.3-0 to 0.4.3npm run release -- --prerelease alpha# 0.4.3 to 0.4.4-alpha.0# patch、minor、majornpm run release -- --release-as minor# 0.4.4-alpha.0 to 0.5.0npm run release -- --release-as patch# 0.5.0 to 0.5.1npm run release -- --release-as major# 0.5.1 to 1.0.0npm run release -- --release-as prepatch# 1.0.0 to 1.0.1-0npm run release -- --release-as preminor# 1.0.1-0 to 1.1.0-0npm run release -- --release-as premajor# 1.1.0-0 to 2.0.0-0# 手动指定版本npm run release -- --release-as 2.1.3-alpha.1# 2.0.0-0 to 2.1.3-alpha.1# ✔ bumping version in package.json from 2.0.0-0 to 2.1.3-alpha.1# ✔ bumping version in package-lock.json from 2.0.0-0 to 2.1.3-alpha.1# ✔ tagging release v2.1.3-alpha.1npm run release# 2.1.3-alpha.1 to 2.2.0
对于版本号信息，参考npm version 文档:
The newversion argument should be a valid semver string, a valid second argument tosemver.inc (one of patch, minor, major, prepatch, preminor, premajor,
npm installnpm run servenpm run buildnpm run test:unitnpm run lintAbout
Vue 项目 commitizen + husky + commitlint，git commit 提交信息规范校验 demo，conventional commits 实践
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.