ESLint-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36973122/article/details/145433792

ESLint

ESLint 是一个针对 JS 的代码风格检查工具，当不满足其要求的风格时，会给予警告或错误。

官网：https://eslint.org/

中文网：https://eslint.nodejs.cn/

安装使用

在你的项目中安装 ESLint 包：

npm install --save-dev eslint @eslint/js

在项目根目录中添加 eslint.config.js 文件，并导出一个配置对象的数组。

eslint.config.js

import js from "@eslint/js";

export default [
    js.configs.recommended,

   {
       rules: {
           "no-unused-vars": "warn",
           "no-undef": "warn"
       }
   }
];

使用 ESLint CLI 进行代码检查：
```
npx eslint project-dir/ file1.js
```
每次使用 ESLint CLI 非常麻烦，为了可以实时看到检查，通常配合编辑器插件使用。

在 vscode 中安装 ESLint 插件，该工具会自动检查工程中的 JS 文件。
如果安装了 Prettier 插件，请禁用，否则可能会出现问题。

如果你的项目在其 package.json 文件中没有指定 "type":"module"，则 eslint.config.js 必须是 CommonJS 格式，否则插件无法起作用，或者配置文件使用 .mjs 或 .cjs 做扩展名。

快速安装

你可以使用以下命令安装和配置 ESLint：

npm init @eslint/config@latest

运行 npm init @eslint/config 后，你的目录中将有一个 eslint.config.js（或 eslint.config.mjs）文件。在其中，你将看到一些配置如下的规则：

import globals from "globals";
import pluginJs from "@eslint/js";


/** @type {import('eslint').Linter.Config[]} */
export default [
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
];

配置

配置对象

每个配置对象都包含 ESLint 需要在一组文件上执行的所有信息。每个配置对象都由以下属性组成：

name

配置对象的名称。这在错误消息和配置检查器中使用，以帮助识别正在使用哪个配置对象。

files

指示配置对象应应用于的文件的通配符模式数组。如果未指定，则配置对象适用于与任何其他配置对象匹配的所有文件。

例如，你可能希望某些规则仅适用于 src 目录中的文件：

在这里插入图片描述

可以看到 other 文件夹下的 js 文件并没有检查，files 是一个数组，可以提供多个 minimatch ；如果提供的是一个空数组将忽略所有文件。

ignores

指示配置对象不应应用于的文件的通配符模式数组。如果未指定，则配置对象适用于 files 匹配的所有文件。如果在配置对象中使用 ignores 而没有任何其他键，则模式将充当全局忽略。

在这里插入图片描述

可以看到 ESLint 忽略了 src 文件夹下的 js 文件。

更多关于 files 和 ignores 配置请查看文档

languageOptions

ESLint 允许你指定你想要支持的 JavaScript 语言选项。默认情况下，ESLint 需要最新的第 4 阶段 ECMAScript 语法和 ECMAScript 模块 (ESM) 模式。你可以使用 languageOptions 键并指定以下一个或多个属性来覆盖这些设置。

ecmaVersion

指示正在检查的代码的 ECMAScript 版本，确定语法和可用的全局变量。对于 ECMAScript 3 和 5，分别设置为 3 或 5。否则，你可以使用 2015 之间的任何年份来表示。在大多数情况下，我们建议使用默认值 "latest" 以确保你始终使用最新的 ECMAScript 版本。

在这里插入图片描述

sourceType

指示正在使用的 JavaScript 文件的模式。可能的值为：

"module"

默认值，ESM 模块（ecmaVersion 为 3 或 5 时无效）。你的代码具有模块作用域并在严格模式下运行。
"commonjs"

CommonJS 模块（如果你的代码使用 require()，则很有用）。你的代码具有顶层函数作用域并在非严格模式下运行。
"script"

非模块。你的代码具有共享的全局作用域并在非严格模式下运行。

在这里插入图片描述

在 commonjs 下 require() 就不会报错：

在这里插入图片描述

parserOptions

如果你使用内置的 ESLint 解析器，你还可以通过指定 languageOptions.parserOptions 键来更改 ESLint 解释代码的方式。默认情况下，所有选项均为 false：

allowReserved

允许使用保留字作为标识符（如果 ecmaVersion 是 3）。
ecmaFeatures

一个对象，指示你要使用哪些附加语言功能：
- globalReturn
  
  允许全局范围内的 return 语句。
- impliedStrict
  
  启用全局严格模式（如果 ecmaVersion 是 5 或更大）。
- jsx
  
  启用 JSX。

globals

指定全局变量，属性设置为一个对象，该对象包含为要使用的每个全局变量命名的键。对于每个全局变量键，设置相应的值等于 "writable" 以允许变量被覆盖或 "readonly" 不允许覆盖或 "off" 来禁用全局变量。

在这里插入图片描述

我们可以安装 globals 依赖，为特定环境额外启用所有全局变量。

在这里插入图片描述

另外还可以在文件中定义行内全局变量：

在这里插入图片描述

rules

规则是 ESLint 的核心构建块。规则验证你的代码是否满足特定期望，以及如果不满足该期望该怎么办。规则还可以包含特定于该规则的其他配置选项。

ESLint 自带大量的内置规则，你可以通过插件添加更多的规则。你可以使用配置注释或配置文件修改你的项目使用的规则。

要更改规则的严重性，请将规则 ID 设置为以下值之一：

"off" 或 0 - 关闭规则。
"warn" 或 1 - 将规则作为警告打开（不影响退出代码）。
"error" 或 2 - 将规则作为错误打开（触发时退出代码为 1）。

除了在配置对象中设置，还可以在文件中配置注释：

在这里插入图片描述

具体每个规则的配置请参考文档。

禁用规则

使用配置注释

要在文件的一部分中禁用规则警告，请使用以下格式的块注释：

在这里插入图片描述

eqeqeq 被设置为 error，在使用 == 应该报错，但使用注释禁用规则后，没有报错，还可以使用以下块注释禁用某些规则：

在这里插入图片描述

整个文件禁用规则：

/* eslint-disable */
alert('foo');

你还可以禁用或启用整个文件的特定规则：

/* eslint-disable no-alert */
alert('foo');

确保永远不会应用规则（无论将来有任何启用/禁用行）：

/* eslint no-alert: "off" */
alert('foo');

要禁用特定行上的所有规则，请使用以下格式之一的行或块注释：

alert('foo'); // eslint-disable-line

// eslint-disable-next-line
alert('foo');

/* eslint-disable-next-line */
alert('foo');

alert('foo'); /* eslint-disable-line */

要禁用特定行上的特定规则：

alert('foo'); // eslint-disable-line no-alert

// eslint-disable-next-line no-alert
alert('foo');

alert('foo'); /* eslint-disable-line no-alert */

/* eslint-disable-next-line no-alert */
alert('foo');

要禁用特定行上的多个规则：

alert('foo'); // eslint-disable-line no-alert, quotes, semi

// eslint-disable-next-line no-alert, quotes, semi
alert('foo');

alert('foo'); /* eslint-disable-line no-alert, quotes, semi */

/* eslint-disable-next-line no-alert, quotes, semi */
alert('foo');

/* eslint-disable-next-line
  no-alert,
  quotes,
  semi
*/
alert('foo');