JavaScript ESLint插件保姆级使用教程

目录

• 一文带你了解 ESLint
• 安装
• 配置
• React 插件
• Airbnb 的配置

一文带你了解 ESLint

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

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

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

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

安装

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

npm install --global eslint 

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

eslint test.js 

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

配置

现在我们开始配置 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 前进行代码检查，这样在同事开始审查前还有机会整理代码。

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 组件。举例来说，可以强制要求属性类型按照字母表顺序排列、使用未声明的属性时给出错误提示，或者要求尽量编写无状态的函数组件，而不要使用类等。

Airbnb 的配置

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

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

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

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

到此这篇关于JavaScript ESLint插件保姆级使用教程的文章就介绍到这了,更多相关JS ESLint插件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！