使用Eslint，husky 和 lint-staged 打造代码检查工作流

Published:

具备基本工程素养的同学都会注重编码规范，而代码风格检查（Code Linting，简称 Lint）是保障代码规范一致性的重要手段。

ESLint

ESLint 是一个开源的，提供一个插件化的 JavaScript 代码检测工具。ESLint 基本是现在最主流的 JavaScript 代码检查工具了，每一个前端工程师的编辑器上必然会使用的工具，如果你没有装 ESlint ，那说明你不是一个合格的前端工程师。

如何使用？

  1. 打开VSCode，在扩展面板搜索 ESLint 安装。使得 VSCode 支持 ESLint 检查代码。
qZLoXl
  1. VSCode 的 ESLint 插件，是通过调用 ESLint Library 来检查代码的，所以你需要安装 npm 包。
    • 工作目录本地安装：npm install eslint
    • 全局安装：sudo npm install -g eslint

然后你可以爽歪歪地开启 ESLint 检查代码了。

配置ESLint

ESLint 为开发者提供了一套默认的校验规则，不过说实在的，确实不太好用。所以这里我用的是业界开源的，认可度比较高的 Airbnb JavaScript Style Guide。

首先安装 airbnb 的 ESLint 扩展包

npm install -D eslint-config-airbnb

在 eslintrc.js 文件下进行配置。

module.exports = {
  extends: ["airbnb"],
  rules: {
    // 你可以在这里自定义一些规则，覆盖airbnb的规则
    "no-plusplus": 0,
    "no-param-reassign": 0,
    "no-continue": 0,
    "no-restricted-syntax": 0,
  },
};

在这里有一点需要说明的是， eslint-config-airbnb 这个 npm 包的规则，其实包含了对 JSX、React、React Hook 的校验。如果你不需要这些校验规则，可以安装 eslint-config-airbnb-base。

然后将 extends 改为以下：

extends: [
    'airbnb-base',
],

ESLint + TypeScript

ESLint 同样支持检验 TypeScript 代码，需要安装并配置一下模块。

module.exports = {
  extends: [
    "airbnb-typescript",
    // 'airbnb-typescript/base'，
  ],
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
};

好了，现在你可以随意的使用 ESlint 来检查你的 JS/TS 代码了。

一个人代码风格，能符合 ESLint 的规则，固然是一件好事，能够体验一个工程师的编码素养，然而，总有人无视代码检查，即使代码标红了，他也懒得管，直接提交代码到 git 进行发布，为了解决这一现象， husky 就上线了。

husky

husky 提供了一些钩子，比如 pre-commit，pre-push ，可以在你进行 git commit 或者 git push 前执行一些命令，我们可以在这个阶段调用 ESLint 进行代码检查，如果不通过，就不允许 commit 或者 push。

使用 husky 的具体做法如下：

首先，安装依赖：

npm install -D husky

然后修改 package.json，增加配置：

"husky": {
  "hooks": {
    "pre-commit": "eslint src/**/*.ts",
  }
},

接着当你进行 git commit 的时候，就会触发 eslint src/**/*.ts 命令。

所以，再也没有人可以把有问题的代码提交到 git 上去啦~

然而，这时候又会出现另外一个问题：

我们有时候会在一个现有的项目中加入代码检查机制，但我们每一次提交的时候，即使你改动的代码符合规则，那些原先不符合规则的旧代码，会让你提交失败！

所以我们需要一个只 Lint 改动代码的工具。

lint-staged

lint-staged 可以让我们只 lint 本地提交所修改的文件，无需检查所有文件。其中 staged 是 Git 里面的概念，指待提交区，使用 git commit -a，或者先 git add 然后 git commit 的时候，你的修改代码都会经过待提交区。

npm install -D lint-staged

然后，修改 package.json 配置：

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.ts": "eslint"
},

这样就可以只检查提交的代码了。

实际上，lint-staged 给了你提交前代码操作的更大自由度，你可以执行多条命令：

{
  "*.js": ["eslint", "prettier --write"]
}

如果 eslint 执行通过，就会执行第二条命令。