背景：
团队开发为了保证提交代码格式统一，通常在进行代码提交的时候对暂存区代码进行校验，如没有通过eslint(本例使用eslint)校验，则不能提交到远端。
安装依赖
husky 、eslint 、prettier 、lint-staged
npm install husky eslint prettier lint-staged --save-dev
安装lint-staged
- 参考官网:https://github.com/okonet/lint-staged
- install
npm install --save-dev lint-staged
设置lint-staged,在package.json或者新增一个配置文件（本例是在package.json,其他方式参考lint-staged官网）
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"
//创建.husky目录，运行安装脚本来确保 Husky 安装
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"
},
- 初始化 Husky
初始化 Husky 并创建必要的 Git hooks：
npx husky-init
- 自动配置：
npx husky add .husky/pre-commit "npx lint-staged"
如果：add command is deprecated，则表明已经弃用add
- 手动配置：
- 由于 add 命令被弃用，你可以手动创建钩子文件并添加内容。首先，创建 pre-commit 文件
mkdir -p .husky
touch .husky/pre-commit
chmod +x .husky/pre-commit
-然后编辑 .husky/pre-commit 文件并添加以下内容：：
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install lint-staged
- 确保文件有执行权限：
cd .husky
./pre-commit
chmod +x .husky/pre-commit
输出没有报错
- 检查文件结构
确保你的项目目录结构类似如下：
my-project
│
├── .husky/
│ └── pre-commit
│
├── .eslintrc.json
├── .prettierrc
├── package.json
└── src/
└── index.js
- 效果：
