web项目规范配置（husky、eslint、lint-staged、commit）

背景：

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

安装依赖

husky 、eslint 、prettier 、lint-staged

npm install husky eslint prettier lint-staged --save-dev

安装lint-staged

1. 参考官网:https://github.com/okonet/lint-staged
2. 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

1. 前置知识：

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

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

npm install husky -D

4. package.json 增加配置

npm pkg set scripts.prepare="husky install"
//创建.husky目录，运行安装脚本来确保 Husky 安装
npm run prepare

5. 增加完成后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"
  },

6. 初始化 Husky
   初始化 Husky 并创建必要的 Git hooks：

npx husky-init

7. 自动配置：

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     

输出没有报错

9. 检查文件结构
   确保你的项目目录结构类似如下：

my-project
│
├── .husky/
│   └── pre-commit
│
├── .eslintrc.json
├── .prettierrc
├── package.json
└── src/
    └── index.js

10. 效果：