Lynne, a front-end development engineer who can cry, love and laugh forever. In the Internet wave, love life and technology. (It’s actually a robot working overtime dog with no love.)

background

Recently, there was a new background project, and I had to migrate the old project code. After practice, I had to step on all kinds of pits. It was not until the launch that I remembered to add the commit code before formatting the check code and standardizing the submission information.

In multi-team development, the standard Commit Message can quickly locate the code commit history and trace the root cause of problems, facilitating multi-team collaboration and improving team efficiency.

Since my project uses the HusKY + Commitlint configuration, here is a brief history of my stomping around these two.

Note: Husky 6.0.0 has undergone a disruptive change. The following solution uses husky version 7.0.1. It is not applicable for husky below 6.0.0, and there may be issues with husky below 7.0.1.

Husky installation

If in doubt, follow my steps:

1. Installation within the project

npm i lint-staged husky -save-dev
Copy the code

Create the. Husky/directory and specify it as the directory where git hooks reside

Add the prepare script in package.json

{
  "scripts": {
      "prepare": "husky install"}}Copy the code

The prepare script is automatically executed after NPM install is executed. That is, when we execute NPM install and install the project dependencies, we execute husky install.

Or use the command line:

Note: NPM Version Version 7.x is required (NPM set-script requires 7.x)

npm set-script prepare "husky install" && npm run prepare
Copy the code

Add Git hooks

Create a pre-commit hook

npx husky add .husky/pre-commit "npm run lint"
Copy the code

After executing this command, you will see that a shell script named pre-commit has been added to the. Husky/directory.

In this way, the pre-commit script will be triggered before git commit is executed.

The pre-commit script content is as follows:

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

npm run lint
Copy the code

Note: the NPM run lint command is based on the script in your project, eslint — ext. js,.vue SRC in the lint script

4. Specify the COMMIT message

Similarly, we can add the commit-msg hook to normalize our Commit message

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"' 
Copy the code

Husky use

Make a random commit

git commit -m "Feat: Pre-commit Optimization"
Copy the code

After creating a pre-commit hook, every git commit or git commit –amend triggers a pre-commit hook to perform esLint and other code checks included in NPM run Lint.

In theory, this should prevent committing esLint error code to a remote repository

However, an error was reported after clicking execute:

> eslint --ext .js,.vue src

not found: commitlint
husky - commit-msg hook exited with code 127 (error)
Copy the code

Commitlint installation and configuration

Error message we need to install commitLint.

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

Error:…. Harm!

> eslint -- ext. js,. Vue SRC ⧗ input: feat: pre-commit Optimization Please add rules to your`commitlint.config.js`
    - Getting started guide: https://git.io/fhHij
    - Example config: https://git.io/fhHip [empty-rules]

✖   found 1 problems, 0Warnings ⓘ Get help: HTTPS://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky - commit-msg hook exited with code 1 (error)
Copy the code

Prompts you to configure commitlint.config.js

so

echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js
Copy the code

ok! ~~~ done!