React 项目中引入 Husky 6.x 和 Lint-staged

在 React 项目中引入 ESLint + Perttier 做代码规范 、 React 项目中引入 Stylelint 做样式表代码规范 这两篇文章中我们了解到可以使用 ESLint 和 Stylelint 做代码规范，但本篇文章我们将介绍 Husky 和 Lint-staged 这两种工具，他们也是做代码规范的，但侧重点却不同，同时使用并不冲突。

Husky：是一个代码提交钩子。即在代码被提交到Git仓库之前，我们可以在这里做一些预检查或者格式化，需要做这些操作，我们需要一个Git的提交钩子，简单说就是使用Git命令会触发的函数。

Lint-staged：是一个前端文件过滤的工具。是一个仅仅过滤出Git代码暂存区文件（被 committed 的文件）的工具。Lint-staged 仅仅是文件过滤器，不会帮你格式化任何东西。

步骤一、执行命令 npm install husky --save-dev 安装 husky 安装包

Husky支持的Git hooks还是很全面的，如常用的pre-commit、commit-msg。这样我们就能再一些特定的时间点做一些事情。

步骤二、判断 .git 文件是否在项目根目录下

2-1

步骤三、修改项目根目录下的 package.json 中 "scripts" 字段

情况1、 如果 .git 文件在你当前项目的根目录下，对 package.json 中 "scripts" 字段 做如下更改

//  .git  文件在你当前项目的根目录下时，修改项目根目录下的 package.json
  "scripts": {
    "prepare": "husky install"
  },

情况2、如果 .git 文件不在你项目的根目录下，则需要自定义目录

3-1

在 .git主目录下的每个子项目，可以依照每个项目特有的规则执行钩子，特别在一个仓库管理多个项目时，在不影响各项目独自的 lint 配置的情况下，可以实现对子项目独立配置的自动化提交管理，互不影响。这种情况比较少见，但很不巧，我的项目就是这种情况，因此还需要将这种情况简述一下。

3-2

如图中所述，.git 文件不在当前项目的根目录下，这时对当前项目根目录中的 package.json 中 "scripts" 字段 做如下更改

// .git  文件不在在你当前项目的根目录下时，修改项目根目录下的 package.json
  "scripts": {
    "prepare": "cd .. && husky install 当前项目的名称/.husky"
  },

步骤四、执行命令 npm run prepare

此时在当前项目的根目录下会出现一个 .husky 的文件夹

4-1

步骤五、执行命令创建 pre-commit 钩子

执行命令 npx husky add .husky/pre-commit 在 .husky文件夹中创建 pre-commit 文件

5-1

注意：为什么不使用官网中提供的命令呢？因为使用官网中提供的命令在某些情况下会出现始终创建不成功的情况，详情查看 Issues

步骤六、修改步骤五中创建的 pre-commit 文件

情况1： .git 文件在你当前项目的根目录下 (对应步骤三中的情况1)

6-1

 // 将 pre-commit 文件修改为如下代码
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

情况2： .git 文件不在你当前项目的根目录下 (对应步骤三中的情况2)

6-2

 // 将 pre-commit 文件修改为如下代码
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

cd projectName
npx lint-staged

步骤七、执行命令 npm install lint-staged --save-dev 安装 lint-staged 安装包

首先明确一下，Lint-staged仅仅是文件过滤器，不会帮你格式化任何东西，所以没有代码规则配置文件，需要自己配置一下

步骤八、在项目根目录中创建一个 .lintstagedrc.js 配置文件

// .lintstagedrc.js 文件中的代码如下
module.exports = {
    "src/**/\*{js,jsx,ts,tsx,md,html}": ["eslint", "prettier --write"],
    "src/**/*.scss": ["stylelint --fix", "git add"],
}

步骤九、 测试 Husky + Lint-staged 配置是否生效
使用var定义的a变量，ESLint 规范报错，这时我们不去修改这个错误直接按照正常流程使用git提交代码，会发现git 不允许我们提交如下图9-2

9-2

9-3

参考网址
https://github.com/typicode/husky
https://github.com/okonet/lint-staged
https://blog.csdn.net/Banterise/article/details/115206267