使用Husky Hooks解决团队ESLint报错问题

哎呀这代码怎么有ESLint错误，上次提交明明没有的呀，现在全是’爆红‘。一看是别人提交的代码没有处理Eslint错误。
在我们日常开发过程中应该会经常遇到这种问题，为了一劳永逸的解决这个问题，接下来带领大家配置Husky，在提交代码前预检查保证大家提交的代码没有ESLint错误

初始化项目

mkdir app
cd app

在项目内执行此命令：

npm init

然后，只需填写问题或按几次 Enter 即可生成node_modules。

初始化Git

为了使用 Husky Hooks，需要预先设置 Git：

git init

忽略 git 中的 node_modules 目录

生成.gitignore文件：

touch .gitignore

编辑.gitignore文件并用此行填充它，以设置对排除目录的引用node_modules：

node_modules

保存并退出

安装Husky

npm i -D husky

安装lint-staged

npm i -D lint-staged

设置 husky 安装命令

在package.json文件中添加一个脚本来生成husky文件（添加“prepare”脚本行）：

将此行添加到脚本对象中：

"prepare": "husky install",

package.json 文件应如下所示：

{


  ...
  "main": "index.js",
  "scripts": {
    "prepare": "husky install",
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  ...
}

然后只需在终端上运行命令：

npm run prepare

安装 ESLint

安装 ESLint：

npx eslint --init

它将运行一个带有一些问题的提示：根据您的项目的情况填写它，这里是一个示例：

✔ How would you like to use ESLint? · yes
✔ What type of modules does your project use? · commonjs
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · no
✔ Where does your code run? · browser, node
✔ What format do you want your config file to be in? · JavaScript
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint@latest
✔ Would you like to install them now? · yes
✔ Which package manager do you want to use? · npm

要选择多个选项，请按空格键。

创建一个配置文件以使用 lint-staged 运行 ESLint：

touch .lintstagedrc

编辑.lintstagedrc以检查.js和.ts内容，以下为JSON格式的配置文件：

{


  "*.(js|ts)" : ["eslint"]
}

然后保存文件并退出。

设置运行 lint-staged 的​​预提交钩子

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

npx lint-staged它将在“.husky/pre-commit”中生成一个新文件，并用要在该钩子上执行的命令填充该文件。

测试

创建一个index.js文件：

touch index.js

index.js内容如下：

function sum(a, b) {
    return a + b;
}

console.log(sum(1, 2));

现在保存并退出。

创建提交

git add .
git commit -m "add a file"

然后它应该运行 ESLint，检查语法并停止提交，直到修复代码。

输出应如下所示：

高级选项

• 您可以通过再次运行来设置 ESLint 的通用语法：

npx eslint --init

并选择所需的语法规则。

• --fix要自动修复空格、缩进、多余逗号等，您可以在.lintstagedrc文件 中设置标志：

{


  "*.(js|ts)": [
    "eslint --fix"
  ]
}