一. ESLint 及其作用
Lint 是一类专门用于检查代码的工具软件， 也称 linter。ESLint ，即 JavaScript （ECMAScript）代码的检查工具。正如官网的介绍 —— “Find and fix problems in your JavaScript code”，ESLint 能够辅助查找出你的 JavaScript 代码中的问题，包括：
1.代码风格问题（styles）。比如，运算符两边的空格、语句末尾的分号。
2.不好的写法。比如，使用 == 进行比较而不是 ===。
3.可能存在逻辑问题的代码模式。比如，定义了一个变量，但没有使用到它。
此外，ESLint 还能够帮你自动修复一些简单的问题。我们将在下一小结学习如何使用 ESLint 检查我们的 JavaScript 代码，并修复其中的一些问题。

二. ESLint 快速上手
为了在项目中使用 ESLint，需要先安装它。

# 初始化一个 npm 项目
mkdir eslint-test
cd eslint-test
npm init -y
# 安装 eslint
npm init @eslint/config

回答一系列问题后，你可以看目录中的配置文件 .eslintrc.js，这个配置文件告诉 ESLint 如何去解析项目，这个项目采用了哪些规范和规则。ESLint 是一个高度配置化的工具。尤其需要留意 extends 和 rules 字段，它们定义了在项目中采用哪些规则。一段代码有没有问题，取决于项目中应用了哪些规则。比如：{semi: ["error", "always"]} 要求必须在语句末尾添加分号，相反，semi: ["error", "never"] 禁止任何不必要的分号。

具体的配置教程可以参考官方配置文档，不是这里三两句能说完的。

在这里，我使用的是 airbnb-base 规范。

module.exports{
  // ...
  extends: 'airbnb-base'
  // ...
}

写一段简单的 JavaScript 代码用于测试：

// file - add.js
function add(x,y) {
  return Number(x)+Number(y);
}

// ❌ 这是一个错误的调用
add("2"+'3')

ESLint 是一个命令行工具，这个命令调用之前安装的 ESLint 去检查 add.js 代码：

npx eslint add.js

输出结果：

eslint-test/add.js
  1:15  error  A space is required after ','                comma-spacing
  2:19  error  Operator '+' must be spaced                  space-infix-ops
  5:5   error  Strings must use singlequote                 quotes
  5:8   error  Operator '+' must be spaced                  space-infix-ops
  5:8   error  Unexpected string concatenation of literals  no-useless-concat

✖ 5 problems (5 errors, 0 warnings)
  4 errors and 0 warnings potentially fixable with the `--fix` option.

可以看到，ESLint 发现了代码中的 5 个 error 等级的问题，并且提示其中的 4 个问题是可修复的。根据提示，执行：

npx eslint add.js --fix

可以看到，现在提示只有一个问题：

eslint-test/add.js
  5:9  error  Unexpected string concatenation of literals  no-useless-concat

✖ 1 problem (1 error, 0 warnings)

重新查看 add.js 文件，可以看到 4 个格式化问题已经被自动修复了。检查第 5 行 add('2' + '3');, 发现正确写法应该是 add('2', '3');。

很好，所有的问题都解决了，ESLint 可帮了大忙 。尽管在实际中，我们很少直接调用 eslint 命令，更多是配合编辑器和一些工作流工具使用（后面小结内容）。不过，记住 ESLint 原本是一个命令行工具，对我们理解它的工作原理很有帮助。

三. 配合编辑器使用的 ESLint
上一节中，我们是在命令行下使用 ESLint，并从命令行的输出中看到代码中的问题。

许多人是从编辑器里接触 ESLint 的。的确，当 ESLint 与编辑器配合工作时，它的威力才真正显现出来。以 VSCode 为例，在 VSCode 上使用 ESLint 需要安装 ESLint 插件。启用插件后，可以在编辑代码的同时看到哪些代码有问题，及时发现，及时修复。使用鼠标 hover 红线，或者在下方的 PROBLEMS 面板中都可以看到具体的错误提示。

Awesome！不过，问题来了：
1.插件做了什么，这种功能怎么实现的？
2.装了插件还需要在项目里安装 ESLint 吗？
3.不同的项目中使用的 ESLint 版本和配置的规则不同，会发生冲突吗？
回答：
插件原理：插件我们敲码的时候，在后台自动执行 eslint 命令分析代码，并根据结果实时回显到编辑器中。
需要每个项目内安装 ESLint。看插件的文档：
The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version.

插件使用当前项目目录中安装的 ESLint 库。如果目录中没有安装，则尝试使用全局安装的。说明，插件并不包含 ESLint 核心库，而是尝试读取本地或全局安装的 ESLint，并使用查找读取项目内的 eslintrc.* 配置文件。

如果插件无法正确读取项目中的 ESLint 程序和配置，会导致插件启动失败。这个问题常常是因为 ESLint 没有安装在打开目录的根部。可以通过修改插件的配置解决。因为插件始终使用工作目录中的 ESLint 程序和配置，当使用本地安装时，每个项目都是独立的，不会冲突。

四. 启用编辑器的保存自动修复功能
编辑器还有一个强大的功能，可以在保存时，自动修复那些支持自动修复的问题，不用执行额外的 eslint \--fix files 命令， 强烈推荐开启。在 VSCode，你可能需要添加设置来启用自动修复功能：

{
  // ...
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

WebStorm 用户可以参考这里设置。启用后，就几乎不用手动执行 eslint 命令了。