[vue3+ts project] Configure husky+ configure commitlint

In the previous article, the eslint verification code tool was configured
[vue3+ts project] to configure the eslint verification code tool, eslint+prettier+stylelint

1. Configure husky

The code can only be formatted every time the command is manually executed. If someone submits to the remote warehouse without formatting, this specification will not work. All developers need to be forced to submit according to the code specification

Use husky to trigger git hook (git hook on the client side) before code submission, and then execute npm run format to automatically format the code

1. Install husky

npm i -D husky

2. Executing the following command will generate a .husky directory in the root directory. There is a pre-commit file in this directory. The commands in the file will be executed when we execute commit

npx husky-init

An error was reported because the project has not initialized the git warehouse
insert image description here
and the warehouse has not been created

First create a remote warehouse, https://gitee.com/ Execute git remote add origin https://gitee.com/the-flower-eyed-bear/vue3_ts_pig.git Execute git add
insert image description here

in the folder where the project is located . git commit - m""

git push -u origin “master”

insert image description here
After the remote warehouse is created and associated with the project, re-execute npx husky-init, and now the husky folder is automatically created in the root directory

Add the following command to the .husky/pre-commit file: npm run format

#！/user/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm run format

When we commit the code, we will execute the command, format the code, and then submit it

2. Configure commitlint

Commit information also has a unified specification, which can be realized by using commitlint

npm add @commitlint/config-conventional @commitlint/cli -D

New commitlint.config.cjs

module.exports = {
    
    
    extends: ['@commitlint/config-conventional'],
    rules: {
    
    
        'type-enum': [
            2, 'always',
            [
                'feat',
                'fix',
                'docs',
                'style',
                'refactor',
                'perf',
                'test',
                'chore',
                'revert',
                'build'
            ],
        ],
        'type-case': [0],
        'type-empty': [0],
        'scope-empty': [0],
        'scope-case': [0],
        'subject-full-stop': [0, 'never'],
        'subject-case': [0, 'never'],
        'header-max-length':[0,'always',72]
    }
}

Configure execution commands in package.json

"commitlint":"commitlint --config commitlint.config.cjs -e -V"

After the configuration is complete, when filling in the commit information, you need to bring the following subject
'feat', //new features, new functions
'fix', //modify bug
'docs', //document modification
'style',/ / Code format modification, note that it is not css modification
'refactor', // code refactoring
'perf', // optimization related, such as prompt performance, experience
'test', // test case modification
'chore', // other modifications, Such as changing the build process, or adding dependent libraries, tools, etc.
'revert',//rolling back to the previous version
'build'//compiling related codes, such as release versions, changes to project construction or dependencies

Such as: git commit -m 'fix: xxx', English colon and a space is required after the colon

configure husky

npx husky add .husky/commit-msg

In the generated commit-msg file
insert image description here