Project address: gitHub

When the team starts implementing the Angular team Git Message commit specification, how do team members comply with it? Every time a codeReview team member’s Git Message is clearly ineffective, and when we use the command commit -m to write, It is likely to be inconsistent due to spelling errors and Chinese and English punctuation marks. Solving the following two problems basically ensures that the message submitted by the team complies with the specification.

  • How can I reduce fault tolerance by generating directly from the command line without handwriting

  • If the message does not meet the specification during the pre-COMMIT verification phase, an error is thrown and the message is not allowed to be submitted

Angular Specification Introduction

<type>(<scope>): <subject>
/ / an empty line
<body>
/ / an empty line
<footer>
Copy the code

type

The mandatory items are used to describe the category of commit. Currently, our team includes the following items:

  • Feat: new features
  • Fix: bug fixes
  • Refactor: Code changes that are neitherbugA fix is not a new feature
  • Style: Changes that do not affect the meaning of the code (whitespace, formatting, missing semicolons, etc.)
  • Docs: Modify the document
  • Perf: Modify code to improve performance
  • Test: Adds missing tests or corrects existing tests
  • Build: Changes that affect the build system or external dependencies
  • Ci:CIConfiguration file and script changes
  • Chore: Changes configuration files (other modifications, without modifying SRC source or test source)
  • Revert: Version rollback

scope

Options are used to specify the scope of the commit impact, depending on the project, such as Services, functional modules, unit tests, utils, and so on

subject

Mandatory commit short description of the destination, without a period (.).

body

Optional item modification background (why do this modification), explain the modification logic, can be more lines

footer

There are two types of optional items

  • For incompatible changes and modifications,FooterPart isBreaking ChangeThe list of
  • Shut downIssue, such as:Closes #001, #002, #003

Commitizen- Interactive command plugin to reduce fault tolerance

Automatically generate the ‘Commit Message document’ through interactive commands

Git bash, Cmd, Vscode, PowerShell, etc

npm install -g commitizen
Copy the code

Install in the project

commitizen init cz-conventional-changelog --save-dev --save-exact

// If yarn is used:
commitizen init cz-conventional-changelog --yarn --dev --exact
Copy the code

Z-xconventional – Changelog: Git cz command is executed. The interactive command adapter will be added to package.json after installation in the project:

// package.json
"devDependencies": {
    "cz-conventional-changelog": "^ 3.3.0",},"config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"}}Copy the code

Git cz:

Changing the command line is not friendly enough, we want the option to be an adapter that conforms to our team’s specifications,

Cz – Customizable – Configuration to suit your own team adapter

Commit format adapter, instead of using the official Angular adapter documentation, for the project adapter

The installation

npm install cz-customizable -D
Copy the code

Modify the configuration in package.json config

"config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"}}Copy the code

Create.cz-config.js in the root directory

// .cz-config.js
module.exports = {
  types: [{value: 'feat'.name: 'Feat: New Feature' },
    { value: 'fix'.name: 'Fix: Bug fix' },
    { value: 'refactor'.name: 'Refactor: code modification that is neither a bug fix nor a new feature' },
    { value: 'style'.name: 'style: Changes that do not affect the meaning of the code (whitespace, formatting, missing semicolons, etc.)' },
    { value: 'docs'.name: 'docs: Modify document ' },
    { value: 'perf'.name: 'PerF: Modify code to improve performance' },
    { value: 'test'.name: 'test: Add missing tests or correct existing tests' },
    { value: 'build'.name: 'Build: Changes that affect build system or external dependencies (example range: gulp, BROCCOLI, NPM)' },
    { value: 'ci'.name: 'CI: Changes to CI profiles and scripts' },
    { value: 'chore'.name: 'chore: Changes configuration files (other modifications, not modifying SRC source or test source)' },
    { value: 'revert'.name: 'Revert: Version Rollback' },
    // {value: 'add', name: 'add: add dependency '},
    // {value: 'del', name: 'del: delete code/file '},
    // {value: 'init', name: 'init: initial commit '},
    // {value: 'UI', name:' UI: update UI'},].scopes: [].messages: {
    type: '
      
        Select change type :\n'
      .scope: '
      
        Change scope :\n'
      .subject: '
      
        Short description :\n'
      .body: ' Detailed description. The use of "|" line: \ n '.breaking: 'Breaking Changes list :\n'.footer: '
      

        List of closed issues. E.g.: #31, #34:\n'
      
.confirmCommit: 'Confirm submission? ',},// AllowCustomscopes are true and empty and custom are available when scope is selected. Empty: empty; Custom: Enter the value yourself
  allowCustomScopes: true.// If you set this parameter to [feat', 'fix'], we will ask about breaking message if our type is feat or fix
  allowBreakingChanges: ['feat'.'fix'].// Limit the length of the description
  subjectLimit: 100};Copy the code

Git cz:

Commitlint – Verifies commit message information

The installation

npm install @commitlint/cli @commitlint/config-conventional commitlint-config-cz -D
Copy the code

Check in the project gitHooks hook as follows

"gitHooks": {
    "commit-msg": "commitlint --config .commitlintrc.js -e -V".// commit message verification
    "pre-commit": "lint-staged"
 },
Copy the code

Add. Commitlintrc.js to the verification configuration

module.exports = {
  extends: ['@commitlint/config-conventional'.'cz'Rules: {],// Custom rules}};Copy the code

Use commit -m to write an error message with the following checksum:

Conventional – Changelog – CLI – Generates a Changelog file based on message

Note: The generated document contains only tag, feat, and fix records

npm i conventional-changelog-cli -D
Copy the code

Configure scripts in package.json

// package.json
"scripts": {
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"."createlog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
}
Copy the code
  • Changelog: Adds data to the Changelog file at the top
  • Createlog: Generates a Changelog file according to the Git message

Run the command NPM run createlog, as shown in the following figure:

The end of the

So far the first two problems have been solved perfectly, because of the calibration tool, changelog documents will be very standard, front-end students can play more pleasant…

Reference documentation

cz-cli

commitlint

Normalize your COMMIT message and automatically generate Changelog.md based on the COMMIT