[JavaScript知识库]一文带你了解 ESLint

一文带你了解 ESLint

在平时开发中，我们总是希望尽可能写出最佳代码，但有时总会出错，然后需要花数小时定位 bug，最后发现只是拼写错误，这很令人沮丧。好在一些工具可以帮助我们在输入过程中检查代码的正确性。这些工具无法表明代码能否实现预期效果，但可以帮助我们避免语法错误。

如果之前使用过 C#这种静态语言，那么你应该很熟悉 IDE 给出的这种警告信息。 Douglas Crockford 开发的 JSLint（最初发布于 2002 年）使得 JavaScript 代码检查变得流行起来。后来出现了 JSHint，如今 ESLint 成为了 React 领域的事实标准。 ESLint 是 2013 年发布的开源项目，由于其配置化程度高且扩展性良好，逐渐流行起来。

在 JavaScript 生态系统中，各种库和技术都变化迅速，因此关键是要找到一个可以方便地使用插件来扩展的工具，并且可以按需启用或禁用规则。最重要的是，如今我们普遍使用 Babel 这样的转译器，以及尚未归入 JavaScript 标准版本的试验特性，因此需要让 linter 知道源代码文件遵循了哪些规则。

linter 不仅能帮助我们更少犯错，或者至少更早发现错误，它还能强制推行一些常见的编程风格指南。这一点非常重要，尤其是开发者众多的大型团队中的每个人都有自己偏爱的编程风格。如果以不同风格编写代码库中的不同文件，甚至不同函数，那么这些代码将难以阅读。

1. 安装

首先，执行以下命令来安装 ESLint：

npm install --global eslint 

可执行程序安装完成后，就可以用以下命令来运行它：

eslint test.js 

输出结果会告诉我们文件中是否有错。 安装后首次运行不会看到任何报错，因为它各方面都需要配置，一开始并不包含任何默认规则。

2. 配置

现在我们开始配置 ESLint。可以使用位于项目根目录的 .eslintrc 文件来配置 ESLint。

使用 rules 属性来添加规则。举例来说，创建 .eslintrc 文件并禁用分号：

{ 
   "rules": { 
     "semi": [2, "never"] 
   } 
} 

上述配置文件的含义是："semi" 是规则名，[2, "never"] 是规则的值。一开始看到这种配置会觉得不够直观。 ESLint 规则具有决定问题严重程度的三个等级。

• off（或者 0）：禁用规则
• warn（或者 1）：规则会产生警告
• error（或者 2）：规则会抛出错误

将规则的值设为 2，因为我们希望当代码不符合规则时，ESLint 会抛出错误。

第二个参数将 ESLint 配置为不允许代码中使用分号（相反值为 always）。 ESLint 及其插件都有详细的文档，你可以找到任意一条规则的描述及其通过或失败的示例。 现在新建一个文件并写入以下代码。

var foo = 'bar'; 

注意：此处使用了 var 关键词，因为 ESLint 还不知道我们要用 ES2015 语法来编码。

执行 eslint test.js 后，就会看到以下提示： Extra semicolon (semi)

linter 搭建完毕，它帮助我们遵循了第一条规则。可以手动启用或禁用每条规则，也可以一步启用推荐配置，只需要在 .eslintrc 中添加以下代 码即可。

{ 
  "extends": "eslint:recommended" 
}

extends 属性表明我们将沿用 ESLint 的推荐配置，另外我们也可以手动修改 .eslintrc 的 rules 属性来覆盖每条规则，正如前文所做的那样。 启用推荐规则后，再次运行 ESLint，此时不会看到与分号相关的任何报错（推荐配置中不包括这个部分），但 linter 会提示声明过的 foo 变量从未使用。

no-unused-vars 规则对于保持代码简洁非常有用。 一开始提过，我们希望用 ES2015 语法编写代码，但是以下代码会报错：

const foo = 'bar' 

报错信息如下所示：

Parsing error: The keyword 'const' is reserved

因此，要想启用 ES2015 语法，需要添加配置选项：

"parserOptions": { 
  "ecmaVersion": 6, 
}

添加完毕后，就只剩下变量未使用的报错提示了，这是正常的。最后使用以下配置来启用 JSX 语法：

"parserOptions": { 
  "ecmaVersion": 6, 
  "ecmaFeatures": { 
    "jsx": true 
  } 
},

如果你之前开发过 React 应用却从未使用 linter，现在要想学习规则并开始习惯，那么最好运行 ESLint 来检查源代码并修复所有问题。

用 ESLint 帮助我们编写更好的代码的方式有很多种。一种是前文的做法：在命令行中运行 ESLint，并得到一系列错误提示。这种做法可行，但一直手动执行不够方便。更好的做法是在编辑器中加入检查流程，这样输入代码时就能立刻得到反馈。VS Code、Sublime Text、Atom 以及其他流行的编辑器都提供了 ESLint 插件来实现这个目的。

在真实的开发场景中，手动运行 ESLint 或者让编辑器实时提供反馈非常有用，但是还不够，因为我们会遗漏某些错误或警告，甚至是直接无视。为了避免代码库中出现未检查的代码，我们可以将 ESLint 作为开发流程中的一环。举例来说，可以在测试时执行检查，如果代码不符合检查规则，那么整个测试步骤就算失败。 另一个方案是在发起 pull request 前进行代码检查，这样在同事开始审查前还有机会整理代码。

3. React 插件

前文提过，ESLint 流行起来的主要原因是其可以用插件进行扩展，对我们最重要一个插件是 eslint-plugin-react。

ESLint 不需要任何插件就能解析 JSX（启用配置开关即可），但我们想要更多功能。要想使用该插件，需要先进行安装：

npm install --global eslint-plugin-react 

安装完成后，在配置文件中添加以下代码，以便 ESLint 可以使用它：

"plugins": [ 
  "react" 
]

与 ESLint 一样，没有配置规则的情况下它什么都不会做，我们可以启用推荐配置来激活基础规则集。

在 .eslintrc 文件中更新 "extends" 属性，如下所示：

"extends": [ 
  "eslint:recommended", 
  "plugin:react/recommended" 
],

如果出现编写错误，比如 React 组件的同一个属性写了两次，那么就会出现错误提示：

<Foo bar bar /> 

以上代码会返回如下所示的错误提示：

No duplicate props allowed (react/jsx-no-duplicate-props) 

大量规则可以用于项目。我们来了解其中一部分。例如按照元素的树结构缩进 JSX 代码有助于提升可读性。 如果代码库及组件的缩进风格不一致，则会出现问题。 我们来查看一个示例，了解一下 ESLint 如何帮助团队的每个成员遵循风格指南，而又无须死记硬背。

注意：这种情况下的不正确缩进实际上不算错误，代码还是能够正常运行的；这只是一致性问题。

首先，激活以下规则：

"rules": { 
  "react/jsx-indent": [2, 2] 
} 

第一个 2 表示如果代码不符合规则，则 ESLint 应该给出错误提示，第二个 2 则表示每个 JSX 元素应该缩进两个空格。因为 ESLint 不会做任何决定，所以启用哪条规则完全取决于你自己。甚至可以通过设置第二参数为 0 来选择无缩进风格。

编写以下代码：

<div> 
<div /> 
</div> 

ESLint 会给出以下报错信息：

Expected indentation of 2 space characters but found 0 
(react/jsx-indent) 

换行书写属性值时也有类似的规则来约束缩进。属性过多或过长时，较好的做法是换行书写。要想推行属性根据元素名缩进两个空格的格式，启用以下规则即可：

"react/jsx-indent-props": [2, 2]

至此，如果属性没有缩进两个空格，那么 ESLint 就会报错。

问题在于，如何界定一行代码过长？多少个属性算多？每个开发人员都有不同的看法。ESLint 的 jsx-max-props-per-line 规则有助于维护一致性，这样每个组件的编写方式就相同了。

ESLint 的 React 插件提供的规则不仅有助于写出更优雅的 JSX 代码，也有助于写出更好的 React 组件。举例来说，可以强制要求属性类型按照字母表顺序排列、使用未声明的属性时给出错误提示，或者要求尽量编写无状态的函数组件，而不要使用类等。

4. Airbnb 的配置

我们已经了解了 ESLint 如何通过静态分析来发现错误，以及如何促使我们在整个代码库中遵循一致的风格指南。我们也见识到了 ESLint 的灵活之处，以及如何通过配置与插件来扩展它。

ESLint 的 extends 属性非常强大，因此你可以从第三方配置入手，再添加自己特有的规则。 React 领域最流行的配置之一莫过于 Airbnb 的那一套。Airbnb 的开发者按照 React 的最佳实践创建了一套规则集，你可以直接在代码库中使用，无须自己手动判断启用哪条规则。

在使用 eslint --init 后，会出现很多用户配置项，经过一系列一问一答的环节后，你会发现在你文件夹的根目录生成了一个 .eslintrc.js 文件。其中便可以选择继承 Airbnb。

读者若想了解跟多ESLint，请查看官方文档：ESLint - 插件化的 JavaScript 代码检测工具