持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情

前言

上一篇文章我讲了react如何配置了eslint，让代码更符合规范，格式也更整齐。但是有时候忘了改就把没有改正的代码提交了，别人拉下来看到报错才知道。

那该怎么避免呢？好，这篇文章就来讲这个。

正文

要避免，就只能在代码提交的时候一定要进行校验，要校验通过才能提交。

我是通过 husky + lint-staged 这两个依赖包实现的。

husky

husky是生成git的的各个hook钩子的。生成的钩子会在执行git的各个操作的时候触发。

下面看看怎么配置。

选一种方式安装即可。我安装的是8.0.1版本

npm install husky -D

yarn add husky -D

pnpm add -D husky 

然后

// npm7及以上可以执行
npm set-script prepare "husky install"

// npm7以下可以执行
npx npe scripts.prepare "husky install"

这个命令会在package.json的scripts字段里加一条 { "prepare": "husky install" }

或者你也可以手动添加

然后你执行这条命令npm run prepare

就会在当前目录下生成一个.husky目录。

然后继续执行下面命令，会生成一个hook钩子，叫pre-commit.

npx husky add .husky/pre-commit "yarn run lint"

注意：window下不要使用node-16版本来执行这个命令，会报错。

这个钩子是在代码commit的时候会执行，执行的是后面引号部分yarn run lint。

然后你可以在lint执行你想要的操作。

lint-staged

有时候不想对所有文件执行eslint，只想对暂存的文件做操作，那么就可以用lint-staged这个依赖。

它是只对暂存区的git文件才会执行操作。其它区的不做处理。

安装，我装的是9.5.0版本

npm install lint-staged -D

yarn add lint-staged -D

pnpm add -D lint-staged 

我就在lint的命令执行lint-staged，然后在lint-staged字段根据对匹配的文件进行代码格式化和git add，重新把它添加到暂存区。

配置如下：

{
  "scripts": {
    "prepare": "husky install",
    "lint": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx}": [
      "eslint --fix",
      "git add"
    ]
  }
}

配置好后故意打印一个不存在的变量试试

可以看到，生效了。你要fix后才能提交。