Welcome to pay attention to the front-end morning tea and advance together with Guangdong liangzai

Front end morning tea focuses on the front end, walks together, and keeps up with the development pace of the industry~

husky installation

Refer to husky's README: GitHub husky Xiaobai, if you have any questions, you can follow my steps:

1. Installation in the project

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

2. Create husky / directory and specify that this directory is the directory where git hooks is located

In package Add prepare script in JSON

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

The prepare script will be executed automatically after npm install. In other words, after npm install is executed to install the project dependencies, the husky install command will be executed.

Or use the command line method:

Note: npm version 7 is required X (npm set script command requires 7.x)

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

3. Add git hooks

Create a pre commit hook

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

After executing the command, you will see A shell script named pre commit has been added in husky / directory.

In this way, the pre commit script will be triggered when the git commit command is executed later.

The pre commit script is as follows:

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

npm run lint
 Copy code

Note: the npm run lint command depends on the script in your own project, eslint -- ext js,. Vue Src in lint script

4. Canonical commit message

Similarly, we can also add a commit MSG hook to standardize our commit message information

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

husky uses

Just commit

git commit -m "feat: pre-commit optimization"
Copy code

After the pre commit hook is created, every time git commit or git commit --amend is executed, the pre commit hook will be triggered to perform code detection such as eslint contained in npm run lint.

Theoretically, this can effectively avoid submitting the code with eslint error to the remote warehouse~~~

However, an error is reported after clicking execute:

> eslint --ext .js,.vue src

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

commitlint installation and configuration

The error prompts that we need to install commitlint.

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

Next, continue to commit, and the result is an 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, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

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

You will be prompted to configure commitlint config. js

therefore

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

ok!~~~ be accomplished!