ESLint配置文件有新写法啦，ESLINT FLAT CONFIG

ESLint的Flat配置是v8.35.0的一个实验性功能。为了启用这个功能，你需要在你的项目根目录下创建一个名为 eslint.config.js 的文件。是的，就是这样简单！只需要一个文件，你就可以控制ESLint的行为了。当然，如果你不喜欢flat config，你还可以通过设置 ESLINT_USE_FLAT_CONFIG 环境变量为 false 来禁用flat config！

我们的第一个配置文件

好了，废话不多说，我带你一起来创建一个Flat配置文件。首先，我们需要在 .eslint.config.js 文件中导出一个配置对象。例如：

javascript 复制代码

export default [
    {
        rules: {
            semi: "error",
            "prefer-const": "error"
        }
    }
];

在这个例子中，我们的配置对象中只有一个属性 rules，里面指定了两个规则：semi和prefer-const。这些规则将应用到ESLint处理的所有文件中。

如果你的项目没有在 package.json 文件中指定 "type":"module"，那么配置文件必须采用CommonJS格式，像这样：

javascript 复制代码

module.exports = [
    {
        rules: {
            semi: "error",
            "prefer-const": "error"
        }
    }
];

看，非常简单！我们只需要一点点配置，就可以告诉ESLint我们想要的代码风格。

配置对象

除了上面提到的基本配置，ESLint还支持以下配置选项：

files - 一个表示应该应用此配置对象的文件的 glob 模式的数组。如果未指定，则此配置对象应用于由任何其他配置对象匹配的所有文件。
ignores - 一个表示此配置对象不应用于的文件的 glob 模式的数组。如果未指定，则此配置对象应用于由 files 匹配的所有文件。
languageOptions - 一个包含与配置 JavaScript 代码的方式有关的设置的对象。
- ecmaVersion - ECMAScript 版本。可以是任意年份（例如 2022）或版本（例如 5）。设置为 "latest" 以使用最近支持的版本。 (默认值："latest")
- sourceType - JavaScript 源代码的类型。可能的值有 "script"（传统脚本文件）、"module"（ECMAScript 模块）和 "commonjs"（CommonJS 文件）。 (默认值：对于 .js 和 .mjs 文件为 "module"；对于 .cjs 文件为 "commonjs")
- globals - 指定在进行 lint 时应添加到全局作用域中的其他对象的对象。
- parser - 包含 parse() 方法或 parseForESLint() 方法的对象。 (默认值：espree)
- parserOptions - 指定更多选项，这些选项直接传递给解析器的 parse() 或 parseForESLint() 方法。可用选项取决于解析器。
linterOptions - 包含与 linting 过程相关的设置的对象。
- noInlineConfig - 布尔值，指示是否允许内联配置。
- reportUnusedDisableDirectives - 布尔值，指示是否应跟踪和报告未使用的禁用指令。
processor - 包含 preprocess() 和 postprocess() 方法的对象，或者指示插件中处理器的名称的字符串（例如 "pluginName/processorName"）。
plugins - 包含从插件名称到插件对象的名称值映射的对象。当指定了 files 时，这些插件仅对匹配的文件可用。
rules - 包含配置的规则的对象。当指定了 files 或 ignores 时，这些规则配置仅对匹配的文件可用。
settings - 包含名称值对的对象，用于所有规则都可以访问的信息。

让我们试试吧

我知道现在你已经迫不及待地想要亲自尝试ESLint的Flat配置了。别担心，我已经给你准备了几个示例配置文件，你只需要根据需要选择适合你的配置即可。

首先，我们来创建一个反对分号的配置文件：

javascript 复制代码

export default [
    {
        rules: {
            semi: "error"
        }
    }
];

这次我们只配置了一个规则，那就是 semi 规则，这是禁止使用分号的规则。写下一段没有分号的代码，运行ESLint，看看它会给你发出什么警告！

接下来，我们来创建一个推荐使用const的配置文件：

javascript 复制代码

export default [
    {
        rules: {
            "prefer-const": "error"
        }
    }
];

这个规则告诉我们应该优先使用const来声明变量，这样可以避免意外的变量修改。写点试试看，如果你不小心将变量声明为let，ESLint会是怎样的反应呢？

指定 `files` 和 `ignores`

现在，让我们来试试使用更多的配置选项。我们可以指定ESLint只对指定的文件匹配模式应用规则，而忽略其他文件。比如，我们只想对src目录下的JavaScript文件应用配置：

javascript 复制代码

export default [
    {
        files: ["src/**/*.js"],
        rules: {
            semi: "error"
        }
    }
];

这样，只有src目录下的JavaScript文件会应用semi规则。其他目录下的文件则不受影响。

使用 `ignores` 排除文件

除了指定应用规则的文件，我们还可以指定ignores，排除某些文件不应用规则。比如，我们可以排除以.config.js结尾的文件：

javascript 复制代码

export default [
    {
        files: ["src/**/*.js"],
        ignores: ["**/*.config.js"],
        rules: {
            semi: "error"
        }
    }
];

这样，src目录下以.config.js结尾的文件将不会应用semi规则。

除了以 .config.js 结尾的文件。还可以在 ignores 中使用否定模式来从忽略模式中排除文件，例如：

js 复制代码

export default [
    {
        files: ["src/**/*.js"],
        ignores: ["**/*.config.js", "!**/eslint.config.js"],
        rules: {
            semi: "error"
        }
    }
];

还有一个重要的注意事项是，如果使用ignores，最好同时指定files，以避免意外将规则应用到不想匹配的文件上。

级联配置对象

当有多个配置对象与给定的文件名匹配时，后面的配置对象将覆盖之前的对象。例如：

js 复制代码

export default [
    {
        files: ["**/*.js"],
        languageOptions: {
            globals: {
                MY_CUSTOM_GLOBAL: "readonly"
            }
        }
    },
    {
        files: ["tests/**/*.js"],
        languageOptions: {
            globals: {
                it: "readonly",
                describe: "readonly"
            }
        }
    }
];

使用此配置，所有 JavaScript 文件都定义了一个名为 MY_CUSTOM_GLOBAL 的自定义全局对象，而 tests 目录中的 JavaScript 文件还定义了 it 和 describe 作为全局对象，除了 MY_CUSTOM_GLOBAL。对于任何 tests 目录中的 JavaScript 文件，这两个配置对象都会应用，因此 languageOptions.globals 合并为最终结果。

使用插件

配置文件的魔力还不止于此！你还可以使用插件来扩展ESLint的功能。什么是插件呢？简单来说，插件是用来共享规则、处理器、配置、解析器等的工具。

使用插件规则

通过使用插件，你可以使用插件中特定的规则。要实现这一点，你需要在配置对象中添加一个 plugins 属性，并将插件的名称作为属性名，插件对象作为属性值。例如：

javascript 复制代码

import jsdoc from "eslint-plugin-jsdoc";

export default [
    {
        files: ["**/*.js"],
        plugins: {
            jsdoc: jsdoc
        },
        rules: {
            "jsdoc/require-description": "error",
            "jsdoc/check-values": "error"
        }
    }
];

在这个配置中，我们使用了一个名为 jsdoc 的插件。通过在插件名称前加上 jsdoc/ 的前缀，我们就能使用插件中的规则。

除了使用插件预定义的插件规则，你还可以创建自己的插件规则。可能你已经想象到了，通过插件，你可以自定义检查规则、解析器等等。控制JavaScript代码的规则就像掌握了一种魔法！

使用插件配置

除了规则，插件还可以提供预定义的配置。通过将插件提供的配置直接添加到配置数组中，你就可以使用插件提供的配置。例如，如果一个插件提供了推荐的配置，你只需要这样配置即可：

javascript 复制代码

import jsdoc from "eslint-plugin-jsdoc";

export default [
    // 插件提供的配置
    jsdoc.configs.recommended,
    // 其他配置对象...
    {
        files: ["**/*.js"],
        plugins: {
            jsdoc: jsdoc
        },
        rules: {
            "jsdoc/require-description": "warn",
        }
    }
];

使用处理器

除了规则配置，ESLint的Flat配置还允许使用处理器来转换代码片段，让ESLint可以对其进行lint分析。通过为特定文件类型定义一个包含preprocess()和postprocess()方法的processor属性，可以指定应用于这些文件类型的处理器。举个例子，如果想从Markdown文件中提取JavaScript代码块，可以将以下配置添加到配置文件中：

javascript 复制代码

import markdown from "eslint-plugin-markdown";

export default [
    {
        files: ["**/*.md"],
        plugins: {
            markdown
        },
        processor: "markdown/markdown",
        settings: {
            sharedData: "Hello"
        }
    }
];

这个配置对象指定了插件名称为"markdown"，使用名为"markdown"的处理器。这个配置将应用于所有以.md结尾的文件。

处理器还可以制作以配置对象的文件名命名的命名代码块（0.js和1.js）。ESLint将这些命名代码块视为原始文件的子块。您可以为命名代码块指定额外的配置对象。例如，下面的示例禁用了以.js结尾的命名代码块中的strict规则：

javascript 复制代码

import markdown from "eslint-plugin-markdown";

export default [
    {
        files: ["**/*.md"],
        plugins: {
            markdown
        },
        processor: "markdown/markdown",
        settings: {
            sharedData: "Hello"
        }
    },

    // 仅适用于代码块
    {
        files: ["**/*.md/*.js"],
        rules: {
            strict: "off"
        }
    }
];

配置规则

可以在配置对象中配置任意数量的规则，只需要包含一个rules属性，该属性包含一个对象，其中包含每个规则的配置。以下是一个示例：

javascript 复制代码

export default [
    {
        rules: {
            semi: "error"
        }
    }
];

这个配置对象指定了启用semi规则，并且严重级别为"error"。您还可以为规则提供选项，只需指定一个数组，其中第一项为严重级别，之后的每个项将是规则的选项。例如，通过使用"never"作为选项，您可以将semi规则切换为不允许分号：

javascript 复制代码

export default [
    {
        rules: {
            semi: ["error", "never"]
        }
    }
];

每个规则都可以指定自己的选项，并可以是任何有效的JSON数据类型。有关可用选项的更多信息，请参阅要配置的规则的文档。

规则严重级别

对于规则，有三个可能的严重级别可以指定：

"error"（或2）- 将问题视为错误进行报告。使用ESLint CLI时，错误会导致CLI退出，并带有非零的返回代码。
"warn"（或1）- 将问题视为警告进行报告。使用ESLint CLI时，将报告警告，但不会更改返回代码。如果只有警告被报告，返回代码为0。
"off"（或0）- 该规则被完全关闭。

规则配置级联

当多个配置对象指定相同的规则时，规则配置将与后一个对象合并，后一个对象的配置将覆盖之前的配置。例如：

javascript 复制代码

export default [
    {
        rules: {
            semi: ["error", "never"]
        }
    },
    {
        rules: {
            semi: ["warn", "always"]
        }
    }
];

使用此配置，semi规则的最终配置为["warn", "always"]，因为它在数组中的最后出现。数组表示规则的严重级别和任何选项的配置。您可以仅定义字符串或数字来更改严重级别，如下所示：

javascript 复制代码

export default [
    {
        rules: {
            semi: ["error", "never"]
        }
    },
    {
        rules: {
            semi: "warn"
        }
    }
];

在这个例子中，第二个配置对象只覆盖了严重级别，所以semi的最终配置是["warn", "never"]。

共享设置

ESLint支持向配置文件添加共享设置。当您在配置对象中添加settings对象时，它将提供给所有规则。根据约定，插件将其感兴趣的设置添加到特定的命名空间中，以避免与其他设置冲突。插件可以使用settings来指定所有其规则可以访问的共享信息。如果您正在添加自定义规则，并希望它们可以访问相同的信息，这将非常有用。下面是一个示例：

javascript 复制代码

export default [
    {
        settings: {
            sharedData: "Hello"
        }
    }
];

使用预定义配置

ESLint提供了两个针对JavaScript代码的预定义配置：

js.configs.recommended - 启用了ESLint建议的规则，以避免潜在错误
js.configs.all - 启用了ESLint附带的所有规则

要使用这些预定义配置，请安装@eslint/eslintrc包，并对数组中的其他属性进行任何修改：

javascript 复制代码

import js from "@eslint/eslintrc";

export default [
    js.configs.recommended,
    {
        rules: {
            semi: ["warn", "always"]
        }
    }
];

在这个示例中，先应用了js.configs.recommended的预定义配置，然后添加了semi所需的配置。

您还可以将这些预定义配置应用于文件的子集，只需指定一个带有files键的配置对象，例如：

javascript 复制代码

import js from "@eslint/eslintrc";

export default [
    {
        files: ["**/src/safe/*.js"],
        ...js.configs.recommended
    }
];

配置文件解析

当使用命令行运行ESLint时，它首先检查当前工作目录中的eslint.config.js。如果找不到文件，则会继续在父目录中搜索，直到找到文件或到达根目录为止。

您可以通过将ESLINT_USE_FLAT_CONFIG环境变量设置为true，并使用命令行上的-c或--config选项来指定替代配置文件，来阻止对eslint.config.js的搜索。例如：

shell 复制代码

ESLINT_USE_FLAT_CONFIG=true npx eslint --config some-other-file.js **/*.js

这样，ESLint将不会搜索eslint.config.js，而是使用some-other-file.js作为配置文件。

玩得开心，不要被报错拦住

注意，ESLint的Flat配置可能会给你带来一些困扰。尤其是当你第一次尝试时，可能会遇到一些报错信息。不要害怕，这是正常现象！ESLint只是在提醒你某些规则可能需要调整。你可以根据报错信息去寻找解决办法，或者只是简单地调整或删除相应的规则。记住，ESLint是为了帮助你写出更好的代码！

好了，希望我今天的介绍能让你对ESLint的Flat配置有更深入的了解。如果你还有其他问题或者想要了解更多有趣的技术，随时都可以来找我！

Happy coding！

ESLint配置文件有新写法啦，ESLINT FLAT CONFIG

ESLint配置文件有新写法啦，ESLINT FLAT CONFIG

我们的第一个配置文件

配置对象

让我们试试吧

指定 files 和 ignores

使用 ignores 排除文件

级联配置对象

使用插件

使用插件规则

使用插件配置

使用处理器

配置规则

规则严重级别

规则配置级联

共享设置

使用预定义配置

配置文件解析

玩得开心，不要被报错拦住

指定 `files` 和 `ignores`

使用 `ignores` 排除文件