husky和lint-staged配置eslint自动修复

当我们想要在git commit 时自动对eslint进行修复可以使用 husky + lint-staged 来完成。

husky就是用来方便我们写钩子函数的，当我们提交git的时候，会触发一些钩子，我们可以在这些钩子里做一些检查，如果检查不通过那么不执行对应的提交操作，相关的文档可以看这个：husky连接

lint-staged 一般结合 husky 来使用，它可以让 husky 的 hook 触发的命令只作用于 git 暂存区的文件，而不会影响到其他文件。避免我们下载了一个库，我们只改了一个文件，可是commit的时候却格式化了一大堆文件。可参考这个文档：lint-staged

一、安装  husky lint-staged

npm install husky lint-staged --save-dev 安装

然后初始化，初始化生成husky配置文件（执行完这一步，根目录会有一个 .husky目录）

husky8.0左右版本

初始化

npx husky install

执行这条命令在 .husky 目录下创建一个 pre-commit 钩子文件

npx husky add .husky/pre-commit "npm run lint-staged"

在.husky文件下的pre-commit文件中配置

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint-staged

package.json 里面添加 

{
  "scripts": {
    "prepare": "husky install",
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{css,scss}": [
      "stylelint --fix",
      "prettier --write"
    ]
  }
}

husky9.0以上版本

先在package.json 里面添加 

{
  "scripts": {
    "prepare": "husky install",
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{css,scss}": [
      "stylelint --fix",
      "prettier --write"
    ]
  }
}

再执行命令

npm run prepare

在.husky文件下的pre-commit文件中配置

#!/usr/bin/env sh

npm run lint-staged

配置完后就会在git commit 时自动执行eslint修复。npm run prepare 依赖于 package.json 中的 prepare 脚本。如果没有触发可能你之前没有配置 prepare 脚本，Husky 未正确初始化。在 package.json 中配置后，运行 npm run prepare 会修复问题