ESLint 的配置和使用-JavaScript中文网-JavaScript教程资源分享门户

前言

前端的开发过程中，代码风格及规范是非常重要的一环。这不仅可以让其他人更容易地阅读代码，也有助于自己更好的管理代码。而 ESLint 就是一个能够帮助我们检查代码规范的工具。

本文将介绍 ESLint 的配置和使用，包含详细的安装和配置步骤，以及常用的规则介绍和示例代码。希望在阅读本文之后，你能更好的应用 ESLint 工具辅助你的开发工作。

安装 ESLint

ESLint 可以在多个平台上使用，包括 Node.js、浏览器和其他 JavaScript 运行环境。无论你选择哪个平台，ESLint 的安装都是相同的。

打开命令行工具（Windows 可以使用 Power Shell、Git Bash 或者 CMD 等；Linux 和 Mac 用户可以打开 Terminal）；
通过 npm 全局安装 ESLint：
```
npm install -g eslint
```
（如果你使用 yarn 管理包，请使用 yarn global add eslint 命令）

安装过程可能会有一些警告，可以忽略继续安装即可。
安装完成后，可以通过下面的命令检查一下是否安装成功：
```
eslint --version
```
如果返回版本号，则说明安装成功。

配置 ESLint

安装完成后，就可以开始配置 ESLint 了。配置有两个部分：标准配置和个性化配置。

标准配置

初始化 ESLint：通过 eslint --init 命令来初始化一个 .eslintrc 配置文件；
```
eslint --init
```
在命令行中会出现一些询问，根据自己的情况选择相应的配置即可。
配置环境：通过 env 字段来设定环境，如 browser, node, es6, commonjs 等：
```
{
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  }
}
```
配置规则：通过 rules 字段来设定规则，这个需要根据具体项目实际情况来设置。
```
{
  "rules": {
    "no-console": "off",
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}
```
在上面的示例中，我们将 "no-console" 这个规则设置为 off，表示在该项目中关闭 console 语句的检查；

semi 和 quotes 是 ESLint 中比较基础的检查规则，用来检查代码中的分号和引号使用等情况。

个性化配置

以上是 ESLint 的标准配置，如果你需要根据自己的喜好和习惯来设定规则，可以使用 .eslintrc 配置文件进行个性化配置。

例如以下 .eslintrc 配置文件：

-- -------------------- ---- -------
-
  ---------- ---------------------- ----------------------------
  ------ -
    ---------- -----
    ------- -----
    ------ ----
  --
  --------- ---------------
  ---------------- -
    ------------- --------
  --
  -------- -
    ------------- ------
    ------- --------- ----------
    --------- --------- ---------
  -
-

上述配置文件中：

"extends" 字段继承了 "eslint:recommended" 和 "plugin:react/recommended"，表示该项目将基于这两个规则集；
"parser": "babel-eslint" 设置了解析器；
"parserOptions": {"sourceType": "module"} 来支持 import/export 语法；
"rules" 设定自定义规则。

使用 ESLint

配置好后，我们就可以愉快的使用 ESLint 来检查代码了。我们来看一个常用的命令行检查。

eslint myfile.js

其中 myfile.js 是需要检查的文件名，如果想检查整个项目，可以使用：

eslint .

这个命令会检查当前目录下的所有文件，可以根据需求逐个排除。

如果使用了 ESLint 的扩展，可以通过编辑器来实时检测代码，例如 VSCode 使用 ESLint 插件即可实现实时检测。

常用规则

ESLint 提供了很多规则，下面列出一些比较常用的规则，可以根据自己的项目需求逐个设定：

"no-console"：禁止使用 console；
"no-debugger"：禁止使用 debugger；
"no-var"：使用 let 或 const 替代 var；
"no-unused-vars"：禁止定义未使用的变量；
"eqeqeq"：要求使用 === 和 !==;
"semi"：要求在语句末尾使用分号；
"quotes"：强制使用一致的单引号或双引号；
"indent"：强制使用一致的缩进；
"camelcase"：强制驼峰命名法；
"no-trailing-spaces"：禁止行末出现空白字符等。

示例代码

最后，我们给出一个使用了其中的一些规则的示例代码：

-- -------------------- ---- -------
-- --- ----
--- - - ---
---------------
--- ----------

-------- ----- -
  ----------------- -- ------
-
-----

-- ---- ----
----- - - ---
---------------

-------- ----- -
  ----------------- -- ------
-
------

在这个示例代码中，我们使用了 no-console、no-var、no-unused-vars、semi 等规则。

总结

ESLint 是一款非常实用的代码风格检查工具，能够帮助开发者规范自己的代码风格。本文介绍了 ESLint 的安装、配置和使用方法，以及常用的规则和示例代码。如果你还没有使用 ESLint，现在就可以尝试一下，让它来为你的代码“保驾护航”吧！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64a6b88748841e989435ca72