background

During the operation of the project management process and code management process, I found that the step of producing Changelog occupied a lot of time in the release process of our team, and this step was automatically generated by CI/CD tools. From the perspective of efficiency, it was more scientific and reasonable to release human hands and put them into other work.

The problem

What tools can be used to automatically produce Changelog content? How does it work? Do you support customization? How customized is it? These are all discussed in this paper. The premise of discussing custom functions is that only known problems can be handled in CI/CD tools, and the tools that generate Changelog need to work stably in this environment. Human-computer interaction is romantic, but it’s not the focus of this article.

The research process

At the beginning, I investigated how drone, a CI/CD tool, submitted the updated Changlog and version number under the same branch without repeatedly triggering the build script. After digging through its official documentation to find the answer, it began to solve the next part of the problem: how to update the version number and Changelog? Update the version number. Check the official NPM documentation to find the answer. The details are summarized in this article, update the version number using the NPM Command line. Since the output of Changelog is basically refined and processed around the data of git log itself, the issue of changelog output can be divided into two directions: one is how to record and the other is how to produce.

Specification submission code

Most web searches revolve around the commitizen tool, and most articles are based on the submission format provided by Angula.js, although other specifications are not discussed here. So for now, the record format is the angular.js submission format, which is briefly described here.

The format of code submission

Angular’s Git submission format specification is as follows:

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
Copy the code

Roughly divided into three blocks:

  • Header ():, which is actually a summary of the submitted information.
  • The body: is actually the description of the submitted information.
  • Footer: is actually the last description of the submitted information.

The average recording time looks like this:

Feat: The add Material library function is disabled# 323, # 233
Copy the code

For more details, check out The Commit Message and Change Log Writing Guide by Yifeng Ruan.

A tool to standardize code submission formats

The git commit command is usually used for code submission, and the input is not formatted. In order to better log, there is a tool called Commitizen to help standardize entry.

The installation

npm install -g commitizen
Copy the code

For the first time,

commitizen init cz-conventional-changelog --save-dev --save-exact
Copy the code

configuration

echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc
Copy the code

use

The following three ways are possible
git cz
npx cz
cz

# displays the following options
? 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 (Move up and down to reveal more choices)Copy the code

Options and parsing are in English. You can customize the content by writing rules in the configured document, such as changing the type selection:

{
    "path": "cz-conventional-changelog"."disableEmoji": false."types": {
        "feat": {
            "description": "A new feature"."value": "feat"
        },
        "fix": {
            "description": Fix the bug"."value": "fix"
        },
        "perf": {
            "description": "Code changes that optimize performance"."value": "perf"
        },
        "refactor": {
            "description": "Some code structure improvements, neither new features nor Bug fixes (such as changing function names)"."value": "refactor"
        },
        "release": {
            "description": "Create a release commit"."value": "release"
        },
        "style": {
            "description": "Styling of code that does not involve functional modifications (such as indentation)"."value": "style"
        },
        "test": {
            "description": "Add or modify existing test code"."value": "test"
        },
        "chore": {
            "description": "Build/engineering dependencies/tools and other functional changes unrelated to the main business of the warehouse (such as adding a document generation tool)"."value": "chore"
        },
        "ci": {
            "description": "CI related changes"."value": "ci"
        },
        "docs": {
            "description": "Updated document (such as Readme)"."value": "docs"}}}Copy the code

After running, it looks like this:

$Cz [email protected], [email protected]? Select thetype of change that you're research: (Use arrow keys) > feat (right) Some code structure optimizations are not new features or Bug fixes (such as changing the name of a function) Move up and down to reveal more choicesCopy the code

For other optimization details, see the DESCRIPTION of CZ-Conventional – Changelog. You can use leoForFree/CZ-customizable to add more details, which are not described here.

Some contents are referred to the COMMIT Specification and Automatic Changelog generation.

Visual Studio Code Commitizen Support can be installed by Visual Studio Code Commitizen Support. CTRL + Shift + P input Conventional Commit when the Code needs to be submitted. It also supports custom configuration, and configuration details are consistent. Just write the following configuration to.cz-config.js.

module.exports = {
    / / type type
    types: [{value: 'feat'.name: '✨ New product features' },
      { value: 'fix'.name: '🐛 fixing bugs' },
      { value: 'docs'.name: 'changes to 📝 document' },
      {
        value: 'style'.name:
          '💄 does not change changes in code functionality (such as removing Spaces, formatting, removing trailing semicolons, etc.)'}, {value: 'refactor'.name: Bans on code. Not including bug fixes, new features'}, {value: 'perf'.name: '⚡ Performance Tuning '}, {value: 'test'.name: '✅ Add and modify test cases' },
      {
        value: 'build'.name: '👷‍ build process, external dependency changes, such as upgrading NPM package, changing WebPack configuration '
      },
      { value: 'ci'.name: '🔧 modified CI configuration, scripts' },
      {
        value: 'chore'.name: 'Changes to the build process or assistive tools and libraries that do not affect source files, other operations on test cases'}, {value: 'revert'.name: '⏪ rollback commit'},].// Scope type for React project
    scopes: [['components'.'Component correlation'],
      ['hooks'.'hook related'],
      ['hoc'.'HOC'],
      ['utils'.'utils related'],
      ['antd'.'Adjustments to antD Theme'],
      ['element-ui'.'Tweaks to the Element-UI theme'],
      ['styles'.'Style dependence'],
      ['deps'.'Project dependencies'],
      ['auth'.'Modify auth'],
      ['other'.'Other Modifications'].// If you select Custom, you will be prompted to enter a custom scope, or you can omit this option and set the allowCustomScopes to true
      ['custom'.'None of the above? I want to customize. '],
    ].map(([value, description]) = > {
      return {
        value,
        name: `${value.padEnd(30)} (${description}) `
      };
    }),
  
    // allowTicketNumber: false,
    // isTicketNumberRequired: false,
    // ticketNumberPrefix: 'TICKET-',
    / / ticketNumberRegExp: '\ \ d {1, 5},
  
    // You can set the type of scope to match the type of type, e.g. 'fix'
    /* scopeOverrides: { fix: [ { name: 'merge' }, { name: 'style' }, { name: 'e2eTest' }, { name: 'unitTest' } ] }, */
    // Overwrite the prompt message
    messages: {
      type: "Please make sure your submission follows the atomic submission specification! \n Select the type you want to submit :".scope: '\n Select a scope (optional):'.// Select scope: custom to display the following prompt
      customScope: 'Please enter custom scope:'.subject: 'Fill in a short, concise description :\n'.body: 'Add a more detailed description, either with a description of the new feature or with bug links, screenshots (optional). The use of "|" line: \ n '.breaking: 'List major changes that are incompatible (optional):\n'.footer: 'Lists the ISSUES CLOSED of all changes (optional). For example.: #31, #34:\n'.confirmCommit: 'Confirm submission? ',},[{name: 'empty', value: false},{name: 'custom', value: 'custom'}]
    // allowCustomScopes: true,
    allowBreakingChanges: ['feat'.'fix'].// skip any questions you want
    // skipQuestions: [],
  
    // subject limits the length
    subjectLimit: 100./ / breaklineChar: '|', / / support body, and footer
    // footerPrefix : 'ISSUES CLOSED:'
    // askForBreakingChangeFirst : true,
  };
Copy the code

When the configuration is complete, it will look like this:

It should be emphasized that after modifying.cz-config.js, you need to restart VSCode to take effect. This appears to be a bug with this plugin, see Issues #199.

The content of automatic output in section 2 will be added later.