In the vite+vue3.0 project, husky and lint-staged are used to check the code before git submission

I. Introduction

This article will introduce two tools, Husky and Lint-staged. If you think the author's writing is good, I hope to get your likes/favorites/support. If you have different opinions, please leave a message in the comment area below.

husky: is a code commit hook. That is, before the code is submitted to the Git repository, we can do some pre-checking or formatting here. To do these operations, we need a Git commit hook, which is simply a function that will be triggered by using the Git command.

lint-staged: It is a tool for front-end file filtering. It is a tool to filter out only Git code staging area files (committed files). Lint-staged is just a file filter and doesn't format anything for you.

2. Installation dependencies

npm install husky lint-staged -D

Execute again:

npx husky install

At this point in the root directory of the project will get .huskythe directory
insert image description here

3. Edit package.json

insert image description here

"lint-staged": {
    
    
    "*.{vue,ts,tsx}": [
      "prettier --write",
      "eslint"
    ]
  },
  "husky": {
    
    
    "hooks": {
    
    
      "pre-commit": "lint-staged"
    }
  }

Note: The configuration of lint-staged here is: in the files to be submitted by git, all specified files in the src directory must execute the configured commands.

4. Add pre-commit file

Create a file named in .huskythe folder pre-commit. This file is Husky's pre-commit hook script to run specified commands before committing.

Make sure the .husky folder is structured like this:
insert image description here
In the pre-commit file, you can write scripts that need to be executed before committing. My hope is to run the code inspection command (without automatic modification)

You can add the following to your pre-commit file:

#!/bin/sh

# 运行代码检查
lint_output=$(npm run lint 2>&1)

# 检查代码检查的输出是否包含错误信息
if echo "$lint_output" | grep -iq "error"; then
  echo "Code linting failed. Please fix the errors and try again."
  echo "$lint_output"
  exit 1
fi

insert image description here

This script runs the npm run lint command for code linting and stores the output of the lint in the lint_output variable. It then checks lint_output for errors. If the check output contains any errors (checked by searching for the keyword "error"), the script prints the error message and details of the check, and exits with status 1, preventing submission.

Note that in order for .husky/pre-committhe file to work, you need to add configuration in the field package.json in the file husky, telling Husky the hook script to execute.

"husky": {
    
    
  "hooks": {
    
    
    "pre-commit": "lint-staged"
  }
}

In the above configuration, we point the "pre-commit" hook to "lint-staged", which will run lint-staged to perform code inspection before committing.

5. Practical demonstration

Submit the code when eslint reports an error:
insert image description here

this is intercepted and the commit fails to be manually modified before committing

Done!

hope this helps!