git commit时进行代码检查（lint-staged）配置

背景：团队开发为了保证提交代码格式统一，通常在进行代码提交的时候对暂存区代码进行校验，如没有通过eslint(本例使用eslint)校验，则不能提交到远端。

安装lint-staged

参考官网 https://github.com/okonet/lint-staged

npm install --save-dev lint-staged

设置lint-staged,在package.json或者新增一个配置文件（本例是在package.json,其他方式参考lint-staged官网）

"scripts": {
   "dev": "vite",
   "build": "vue-tsc && vite build",
   "preview": "vite preview",
   "lint": "eslint  './src/**/*.{js,jsx,vue,ts,tsx}' --fix",
 },
"lint-staged": {
   "*.{js,jsx,vue,ts,tsx}": [
     "npm run lint",
     "git add"
   ]
 },

• npm run lint 是进行eslint 校验和--fix修改，通过后重新git add

设置pre-commitgit hook 来运行lint-staged

前置知识：
git hook是常说的 git 钩子,而pre-commit，该钩子在键入提交信息前运行。 它用于检查即将提交的快照（暂存区内容）。
钩子存储在项目的 .git/hooks。

参考官网 https://github.com/typicode/husky
install

npm install husky -D

package.json 增加配置

npm pkg set scripts.prepare="husky install"
npm run prepare

增加完成后package.json会增加一条prepare

"scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint  './src/**/*.{js,jsx,vue,ts,tsx}' --fix",
    "prepare": "husky install"
  },

添加 hook:

npx husky add .husky/pre-commit "npm test"
git add .husky/pre-commit

项目就会增加一个.husky文件夹

image.png

配置pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm lint-staged

会报错
.husky/pre-commit: line 4: lint-staged: command not found

查阅解决方式:
添加npx lint-staged到预提交的 husky 文件中为我解决了这个问题

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged

效果：

image.png

本例使用包版本：

node : v16.18.1
husky： 8.0.3
lint-staged： 13.2.3