在 ESLint 中如何使用插件
简介
ESLint 是一款常用的 JavaScript 代码检查工具，可以根据预设的对代码质量的要求来检查你的代码，然后给出相应的提示和错误，有助于编写高效、可读性强的代码。
除了自带的检查规则以外，ESLint 还允许你使用插件来扩展其功能和规则。
本文将详细介绍在 ESLint 中如何使用插件。
使用步骤
- 安装插件
首先，你需要安装你需要的插件。你可以在 npm 上搜索相应的插件、下载并安装。
以安装 eslint-plugin-react 为例，你可以执行以下命令：
npm install --save-dev eslint-plugin-react
- 编辑 .eslintrc 文件
然后在项目的 .eslintrc 配置文件中定义你的插件。打开你的 .eslintrc 文件，并添加以下内容：
{
"plugins": [
"react"
]
}这里我们添加了一个名为 react 的插件。
- 配置插件
接下来，你需要为插件配置规则。
在 .eslintrc 配置文件中，找到 rules 字段，然后按照自己的需求增加或修改规则。比如：
-- -------------------- ---- -------
-
---------- -
-------
--
-------- -
----------------------- -------
---------------------- ------
-
-这里我们定义了两个 react 的规则。一个是在使用 jsx 时确保已经加载了 react 库，一个是确保 jsx 中使用了定义的变量。它们的值可以是 "off"、"warn" 或者 "error"，分别表示关闭、级别为警告或者级别为错误。在这里我们都设置为 "warn"。
示例代码
下面通过一个示例代码来展示如何使用 eslint-plugin-react。
假设你的项目中有一个名为 App.js 的文件，它的内容如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- --- ------- --------- -
-------- -
----- ----- - ---
------ -
---- ----------------
--------- ----------
----- ----- --- -----------
------
--
-
-
------ ------- ----如果你运行类似以下命令：
eslint App.js
你会看到以下的提示信息：
App.js 4:10 warning 'Component' is defined but never used no-unused-vars 9:9 warning 'value' is assigned a value but never used no-unused-vars ✖ 2 problems (0 errors, 2 warnings)
这个提示信息告诉了我们 App.js 代码中存在两个变量未被使用。
但是，如果你想让 ESLint 在检查 jsx 时也能够检查到未加载 react 库的情况，那么你可以使用 react/jsx-uses-react 规则，例如：
{
"plugins": [
"react"
],
"rules": {
"react/jsx-uses-react": "warn"
}
}然后运行：
eslint App.js
你将看到下面的提示：
App.js 1:8 warning Definition for rule 'react/jsx-uses-react' was not found react/jsx-uses-react ✖ 1 problem (0 errors, 1 warning)
这个提示表示你使用了 react/jsx-uses-react 规则，但规则没有定义。
接着，我们需要定义这个规则。我们可以到 https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-react.md 找到其详细说明，在这里我们将其定义为 "warn"。
所以，我们重新修改 .eslintrc 文件：
-- -------------------- ---- -------
-
---------- -
-------
--
-------- -
----------------------- -------
---------------------- ------
-
-再次运行：
eslint App.js
你将看到下面的提示：
App.js 1:8 warning Definition for rule 'react/jsx-uses-react' was not found react/jsx-uses-react 9:9 warning 'value' is assigned a value but never used no-unused-vars
这个提示就是我们最开始想要的效果了。
在结束时，我们可以运行以下命令来检查我们的代码：
eslint src/**/*.js
这个命令会检查 src 目录下的所有 js 文件。
结论
使用 ESLint 插件是提高代码质量的一种有效手段。在使用插件时，我们需要做到：
- 安装插件
- 在 .eslintrc 中定义插件
- 配置插件检查规则
通过本文的介绍和示例，你现在已经掌握了如何在 ESLint 中使用插件的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6723c9682e7021665e1188f4