husky+eslint+prettier配置

使用方式一

js 复制代码

"husky": {
  "hooks": {
    "pre-commit": "eslint . --fix"
  }
}

使用方式二

你可以手动添加钩子脚本：

sql 复制代码

npx husky add .husky/pre-commit "eslint . --fix"

这将创建一个 .husky/pre-commit 文件，其中包含运行 eslint 的命令。

使用方式三

和通过Husy执行lint-staged的区别

js 复制代码

"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx,css,md,json}": [
    "eslint --quiet --fix --ignore-path ./.gitignore",
    "prettier --loglevel warn --write",
    "git add"
  ]
}

区别：

husky的配置是针对所有文件的，而lint-staged的配置只针对暂存区中特定类型的文件。
husky只运行了eslint，而lint-staged配置运行了eslint和prettier，并且包含了一个git add命令（在新版本中可能不需要）。
lint-staged可以更精细地控制哪些文件应该被检查和格式化，而husky则是一刀切地对所有文件执行命令。
lint-staged通常与husky一起使用，husky触发pre-commit钩子，然后pre-commit钩子调用lint-staged来处理暂存的文件。这样可以提高效率，只检查和修复即将提交的文件，而不是整个项目。

最佳实践

husy与lint-staged配合使用，针对指定的文件对已经在git缓存区的代码执行lint和prettier

配置husky和lint-staged的流程通常包括以下步骤：

初始化npm项目（如果尚未初始化）：
csharp 复制代码
```
sh
npm init -y
```

安装husky和lint-staged：

css 复制代码

sh
npm install husky lint-staged --save-dev

安装代码检查和格式化工具（如eslint和prettier）：
css 复制代码
```
sh
npm install eslint prettier --save-dev
```
配置ESLint（如果尚未配置）：
csharp 复制代码
```
sh
npx eslint --init
```
配置Prettier（可选，如果需要）： 创建一个.prettierrc文件，并添加你的配置。

在package.json中启用husky：

json 复制代码

json
"scripts": {
  "prepare": "husky install"
}

运行prepare脚本来安装husky钩子：
arduino 复制代码
```
sh
npm run prepare
```
添加husky钩子： 使用husky命令添加pre-commit钩子，该钩子将在每次提交前执行。
sql 复制代码
```
sh
npx husky add .husky/pre-commit "npx lint-staged"
```
在package.json中配置lint-staged：
css 复制代码
```
json
"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx,css,md,json}": [
    "eslint --fix",
    "prettier --write",
    "git add"
  ]
}
```
注意：在lint-staged的最新版本中，不需要"git add"命令，因为lint-staged会自动将更改添加到暂存区。
测试配置： 修改一些文件，然后尝试提交它们以确保husky和lint-staged按预期工作。

这些步骤完成后，每次尝试提交代码时，husky将触发pre-commit钩子，该钩子将调用lint-staged来运行ESLint和Prettier（或其他配置的工具）来检查和修复暂存的文件。如果检查或修复失败，提交将被阻止，直到问题解决。