Detailed explanation of git commit submission verification

Table of contents

foreword

husky

commitlint

pre-commit hook

Install lint-staged

There is a problem

---

foreword

This article mainly explores the implementation of code submission verification during git commit. We use git to manage code in daily development, and the implementation of git commit verification depends on third-party plug-ins husky, commitlint, lint-staged, etc., each of which has special functions , working together to implement git commit submission verification.

Note: To implement git commit verification, make sure that you have installed and configured relevant code format verification tools, such as eslint, prettier, etc. If you don't know how to install eslint yet, I recommend reading my other article:

ESLint Getting Started Installation and Use Detailed Explanation

husky

what is

husky is a Git Hook tool. In fact, it is a tool for adding hooks to the git client. During the process of installing it into the warehouse (husky install), it will automatically add corresponding hooks in the .git directory to implement a series of processes in the pre-commit stage to ensure the correctness of each commit . It can be understood that husky is an opening opened by the git version management tool for developers, allowing us to do our own things before and after code submission.

The implementation of git commit submission verification actually depends on githooks, which is the hook (githooks) used by git .

Git Hooks are scripts that are triggered to run before and after Git executes specific events (such as commit, merge, push, receive, etc.). Hooks are programs that can be placed in the hook directory and can trigger actions at certain points in git execution. If you have used vue, you can compare the hook to the life cycle hook function of vue. Hooks can do different things at different stages of git.

If you want to know more about githooks, I recommend you to check out the article:

GitHook Tool- Husky Introduction and Use , Husky Official Documentation , Husky - GitHub

Install

npm install husky --save-dev

After the installation is complete, execute the following code to initialize (generate) the .husky directory file

npx husky install

The .husky file is used to store hook files that need to be read by git

commitlint

what is

commitlint includes @commitlint/cli and @commitlint/config-conventional plugins,

commitlint is used to verify the correctness of the format of commit submission content

Install

npm install --save-dev @commitlint/cli @commitlint/config-conventional

After the installation is complete, add the commit-msg hook and execute the following code to add:

npx husky add .husky/commit-msg

 Replace undefined in the newly added commit-msg file with:

npx --no-install commitlint --edit "$1"

The main function of this hook is to execute the above command before executing git commit to judge the correctness of the commit submission information format, which depends on the rules configured in the commitlint.config.js configuration file.

Create a new commitlint.config.js file in the project root directory with the following content:

module.exports = {
  // 继承的规则
  extends: ['@commitlint/config-conventional'],
  // 定义规则类型
  rules: {
    'body-leading-blank': [2, 'always'],
    'footer-leading-blank': [1, 'always'],
    'header-max-length': [2, 'always', 108],
    'subject-empty': [2, 'never'],
    'type-empty': [2, 'never'],
    // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
    'type-enum': [
      2,
      'always',
      [
        'feat', // 新功能 feature
        'fix', // 修复 bug
        'docs', // 文档注释
        'style', // 代码格式(不影响代码运行的变动)
        'refactor', // 重构(既不增加新功能，也不是修复bug)
        'perf', // 性能优化
        'test', // 增加测试
        'chore', // 构建过程或辅助工具的变动
        'revert', // 回退
        'build' // 打包
      ]
    ],
    // subject 大小写不做校验
    'subject-case': [0]
  }
}

Now you can submit your code according to the configured format.

Recommended articles: Git Commit format verification , commitlint documentation , commitlint rule documentation , commitlint rule demo

Commit reports an error:

Please add rules to your commitlint.config.js - Getting started guide: https://commitlint.

So now when you git commit, you must strictly install the prescribed format to submit your commit, but if there are errors in the code, you can still submit successfully . So the following is to verify the code format when git commit

pre-commit hook

create command

npx husky add .husky/pre-commit

Because the code correctness check depends on other plug-ins. For example, my own project uses eslint, and the command line execution method of eslint is the command defined in the script object of the package.json file. Replace undefined in the pre-commit file with Commands that trigger command line execution, such as: npm run serve, serve is the command you configure in the script object, as follows:

// package.json   script对象
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint:eslint": "eslint --ext .js,.vue src --fix"
},

pre-commit file

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint:eslint

Now every time you submit the code, the correctness of the code will be verified

But there is a problem, that is, every time a file is modified, a lint check is performed for all files. If you think it doesn't matter, you can ignore the following content.

If you don't want to perform checks on all files every time, you can use lint-staged to achieve this function

Install lint-staged

Install

npm install --save-dev lint-staged

Add a configuration file and add a lintstagedrc.js file in the .husky file, the content is as follows:

module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
  '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'],
  'package.json': ['prettier --write'],
  '*.vue': ['eslint --fix', 'prettier --write'],
  '*.{scss,less,styl,html}': ['eslint --fix', 'prettier --write'],
  '*.md': ['prettier --write']
}

Add the command line execution method of lint-staged, add in the script object of the package.json file:

"lint:staged": "lint-staged -c ./.husky/lintstagedrc.js --allow-empty"

-c indicates the path of the configuration file

--allow-empty means that by default, when the linter task undoes all staged changes, lint-staged will exit with an error and abort the commit. Using this flag allows empty git commits to be created.

For details on command line configuration and lint-staged, see:

lint-staged tutorial

lint-staged - npm

Modify the command line in the pre-commit hook to execute lint-staged, as follows:

npm run lint:staged

Now you can submit code normally

There is a problem

There may be problems based on the above submission methods. For specific problems and solutions, see:

Vue project integration husky+commitlint+stylelint

Completed pre-commit file

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
. "$(dirname "$0")/common.sh"

[ -n "$CI" ] && exit 0

# Check the file name
# ! ls-lint cannot be used normally in mac pro of M1 system.
# npm run lint:ls-lint

# Format and submit code according to lintstagedrc.js configuration
yarn run lint:lint-staged

# npm run lint:prettier