If you’re a software developer, commit to your Repository or your company’s private Gitlub every day. If you’re a software developer, commit to your Repository or your company’s private Gitlub every day. To make git review easier for team members, I will continue to share the configuration according to the following directory.
- Commit message that usually commits code
- Commit Message after committing using the CommItizen plug-in
- Commit message with CommItizen + CZ-Customizable plug-in
- Commit Messag after using the Gitmoji – CLI plug-in
- How do I configure Commitizen
- How do I configure Commitizen + Z-Customizable
- How do I configure itmoji- CLI
Before you install these plug-ins, read through the article to see which one is suitable for you, choose one that is suitable for you or your team, and you will add examples of installation and use at the end of the article 😃
Git commit message
Git commit is the commit command used by most of us
git add -A
git commit -m'Submit note'
git push
Copy the codeSo what we’ll see in the remote Git Repository is this: the commit looks ok. It’s just normal, but there’s nothing bright or compelling, except that these are the records submitted daily
2. Use commitizen commit message for Repository git commit
Git add-a git cz [email protected], [email protected]? Select thetype 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) root/app.tsx root/app.less root/index.tsx ? Write a short, imperative tense Description of the change (Max 52 Chars): (10) Provide a longer description of the change: (press enter to skip) Are there any breaking changes? Yes ? Describe the breaking changes? Does this change affect any open issues? Yes ? Add issue references (e.g. "fix #123", "re #123".) : "fix #123 https://github.com/zhangfaliang/react-hooks/commits/master" [master 6c90b87] fix(root/app.tsx root/app.less Root /index.tsx): 1 file changed, 1 insertion(+), 1 deletion(-) git pushCopy the codeLet’s see if this commit looks a little bit cooler than the last commit. You can see the changed file, the details, and the link to the issue
3 Commit message after commItizen + CZ-Customizable plug-in
Add a pluggable plugin to the Commitizen repository to implement a custom commit template.
Git add -a git cz [email protected], [email protected] Line 1 will be cropped at 100 characters. All other lines will be wrapped after 100 characters.? Choose one of your submission types: 💪 WIP: Workinprogress ? The Denote the SCOPE of this change (Denote the SCOPE of this change) : root/app.tsx root/app.less root/index. TSX? Short description: Here is a short description? Long description, use"|"Newline (optional) : Here is a detailed description of the changes# # # -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - # # #WIP(root/app.tsx root/app.less root/index.tsx): Here is a brief description and here is a detailed description of the change# # # -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - # # #? Are you sure to submit instructions? Yes [master 86be287] WIP(root/app.tsx root/app.less root/index.tsx): 1 file changed, 1 deletion(-)Copy the codeLook at the picture, it is similar to the last version of the commit, only the implementation of a custom or suitable for their own commit template
Instead of step 1 and step 4, let’s look at step 2 and Step 3 and their templates are similar
Type Type indicates the nature of the commit. frequently-used
- Feat adds a new feature
- Fix fixing a Bug docs document change
- Style code format (does not affect functionality, such as space, semicolon, and formatting fixes)
- Refactor Code refactoring
- Perf improves performance
- The test test
- Build Change project builds or external dependencies (scopes: webpack, gulp, NPM, etc.)
- Ci changes the configuration file of the continuous integration software and the scripts commands in the package, for example scopes: Travis, Circle, etc
- Chore changes the build process or the ancillary tool Revert code rollback
Scope Scope Indicates the scope of the impact of the COMMIT. According to the actual business division, or component library development division, can be omitted.
A detailed description of the Body commit, indicating a detailed description of the code commit.
Footer The Footer is required if the code is submitted for incompatible changes or close defects, otherwise it can be omitted.
4 Commit messag after using gitmoji- CLI plug-in this is very powerful, very rich in types, and very simple to configure
Repository git commit = repository git commit = commit
Go onto university. Go onto university. Gitmoji-i foreground gitmoji commit hook created successfully ➜ my-app git:(master) git add-a ➜ my-app git:(master) qualify commit ? Choose a gitmoji: (Use arrow keys ortypeTo search) 🎨 - Improving structure/format of the code. ⚡️ - Improving performance. 🔥 - Removing code or files Fixing a bug. 🚑 - Critical hotfix. ✨ - Introducing new features. 📝 - Writing docs. ✨ - Introducing new features Writing docs. ✅ - Updating tests. 🏁 - Fixing something on Windows. 🚨 - Removing linter warnings. 🚧 - WorkinProgress. ⬇️ - Downgrading dependencies. 🤖 - Fixing something on android. ⏪ - Reverting changes. ❯ 🍻 - Writing code Drunkenly. 🚸 -improving user experience/usability.? Choose a gitmoji: 🍻 - Writing code drunkenly.? Enter the commit title [13/48]: Modify the App file under root? [master 235adF3] :beers 1 file changed, 1 insertion(+), 1 deletion(-)Copy the codeHere we are
It’s interesting to add a little icon before commit. All right, let’s take a look at all the fancy commit configurations and see which one works for us. Just pick one 😂.
How do I configure Commitizen
Install Command line tool global installation
npm install -g commitizen cz-conventional-changelog
Copy the codeCreate a.czrc file in your home directory with a path pointing to the preferred CZ-Conventional changelog, the Globally installed Commitizen adapter
echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc
Now any Git repository on your computer, and use Git cz instead of Git Commit, you’ll find a Commitizen prompt.
git add -A
git cz
Copy the code
The global install is done 😃 (the global install I chose earlier). Let’s take a look at the installation in the project
Install in partial project
NPM install -d commitizen cz-conventional-changelog // package.json t added"scripts": {
"commit": "git-cz". },"config": {
"commitizen": {"path": "node_modules/cz-conventional-changelog". }, git add -A yarn commit || npm run commitCopy the code
How do I configure Commitizen + Z-Customizable
Global configuration Commitizen + CZ-Customizabal
npm install -g commitizen cz-customizable
Copy the codeCZRC: {“path”: “czz-customizable”}’ > ~/.czrc
touch .czrc .cz-config.js
echo '{ "path": "cz-customizable" }' > ~/.czrc
Copy the codeJs, now any Git repository, and use git cz instead of Git commit, you will find a Commitizen prompt.
See the configuration is complete, modify the arbitrary execution
git add -A
git cz
Copy the code
Local Project Configuration
npm i -g commitizen
npm i -D cz-customizable
Copy the codeThis is configured in the project’s package.json file
"scripts": { "test": "echo \"Error: no test specified\" && exit 1"."commit": "git-cz" },
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"}}Copy the codeAlso create a.cz-config.js file in ~/ (the root directory of the computer) or the project directory with the same content as the global.cz-config.js file
git add -A
yarn commit || npm run commit
Copy the codeLook at the picture
How do I configure itmoji- CLI
Global installation
npm i -g gitmoji-cli
Copy the codeIn this project directory
gitmoji -i
git add -A
git commit
Copy the codeThe following image will appear
Here is my commit record. This is my Git commit repository
Git Repository (Git Repository)
commitizen
cz-coustomizable
gitmoji