ESLint 的新配置系统，第 3 部分：开发者预览

在我的 上一篇文章中，我解释了使用新的“扁平”配置系统的基本概念。新的配置系统在我们进行更多内部测试时，尚未与 CLI 绑定，但我们确实希望在我们将它集成到 CLI 的过程中，让 ESLint 社区有机会尝试扁平配置。因此，ESLint v8.21.0 纳入了几种尝试扁平配置的方法。请记住，本文中提到的所有内容都是实验性的，我们希望您在试用时能提供反馈。

使用扁平配置和 Linter 类

如果你目前正在使用 eslint 包中的 Linter，你可以通过在构造函数中将 configType: "flat" 设置为一个选项来启用扁平配置。这是一个例子

const linter = new Linter({ configType: "flat" });

const messages = linter.verify("new Map()", {
    languageOptions: {
        ecmaVersion: 5,
        sourceType: "script"
    },
    rules: {
        "no-undef": "error"
    }
}, "filename.js");

当你传递 configType: "flat" 作为一个选项时，Linter 期望传递给 verify() 的任何配置对象都将是扁平配置格式。在这个例子中，verify() 的第二个参数是一个扁平配置对象（你可以传递单个对象或对象数组）。任何对 verify() 的调用都将假定正在 lint 的文本是一个文件名以 .js 结尾的 JavaScript 文件，但始终建议传入一个显式的文件名作为第三个参数。

虽然这个基本用例的工作方式与你使用的哪种配置系统无关，但仍然存在一些重要的差异

• defineRule()、defineRules() 和 defineParser() 现在会抛出错误。运行时插件（在我之前的文章中讨论过）使得这些方法过时。
• getRules() 也抛出一个错误。此方法会根据调用时间返回不同的数据，因此不能与扁平配置一起使用。

使用扁平配置和 ESLint 类

在实现扁平配置时，我们发现创建一个像我们为 Linter 所做的那样在配置系统之间切换的选项太困难了。相反，我们创建了一个 FlatESLint 类，它封装了 ESLint 中所有现有的功能，但使用扁平配置而不是 eslintrc。FlatESLint 类仅用作功能预览；一旦我们永久切换到扁平配置，当前的 ESLint 类将被删除，FlatESLint 将被重命名为 ESLint。

目前，你可以通过 use-at-your-own-risk 入口点访问 FlatESLint，像这样

// ESM
import pkg from "eslint/use-at-your-own-risk";
const { FlatESLint } = pkg;

// CommonJS
const { FlatESLint } = require("eslint/use-at-your-own-risk");

之后，你可以像使用 ESLint 一样使用 FlatESLint，例如

const eslint = new FlatESLint({
    cwd: originalDir,
    overrideConfigFile: "other.config.js"
});
const results = await eslint.lintText("foo");

与 Linter 一样，FlatESLint 和 ESLint 之间也有一些值得指出的差异

1. 缓存尚未在 FlatESLint 中实现，因此 cache: true 会抛出错误。
2. useEslintrc 选项已被删除。如果你想避免自动加载 eslint.config.js 而不指定备用配置文件，请设置 overrideConfigFile: true。
3. envs 选项已被删除。
4. resolvePluginsRelativeTo 选项已被删除。
5. rulePaths 选项已被删除。自定义规则必须通过配置直接添加。

使用扁平配置和 RuleTester 类测试规则

与 ESLint 类类似，没有简单的方法来提供一个选项在 eslintrc 和扁平配置之间切换，因此我们创建了一个单独的 FlatRuleTester 类。与 ESLint 类似，FlatRuleTester 类也是临时的，一旦我们完全切换到扁平配置，最终将被重命名为 RuleTester。你可以像这样访问 FlatRuleTester

// ESM
import pkg from "eslint/use-at-your-own-risk";
const { FlatRuleTester } = pkg;

// CommonJS
const { FlatRuleTester } = require("eslint/use-at-your-own-risk");

在 RuleTester 中可以指定 eslintrc 配置的任何地方，在 FlatRuleTester 中都需要是扁平配置。这里有一些例子

const ruleTester = new FlatRuleTester({
    languageOptions: {
        ecmaVersion: 5,
        sourceType: "script"
    }
});

ruleTester.setDefaultConfig({
    languageOptions: {
        ecmaVersion: 5,
        sourceType: "script"
    }
});

在单个测试中，你可以直接在每个测试中使用 languageOptions

ruleTester.run("my-rule", rule, {
    valid: [
        {
            code: "var test = 'foo'",
            languageOptions: {
                sourceType: "script"
            }
        },
        {
            code: "var test2 = 'bar'",
            languageOptions: {
                globals: { test: true }
            }
        }
    ],
    invalid: [
        {
            code: "bar",
            languageOptions: {
                sourceType: "script"
            },
            errors: 1
        }
    ]
});

使用 FlatRuleTester 时需要记住的一些事项

1. 默认的 ecmaVersion 现在是 "latest"，因此如果你在测试中没有指定 ecmaVersion，可能会存在不兼容性，因为 eslintrc 的默认 ecmaVersion 是 5。
2. 默认的 sourceType 现在是 "module"，因此如果你在测试中没有指定 sourceType，可能会存在不兼容性，因为 eslintrc 的默认 sourceType 是 "script"。这在处理全局作用域中的变量时最为明显。

结论

我们认为新的配置系统将为 ESLint 用户带来出色的体验，但为了实现这一点，我们必须确保 ESLint 生态系统已为这些更改做好准备。这就是为什么我们推出了这个开发者预览版，让我们的所有插件、自定义规则、解析器和可共享配置作者可以提前了解他们的软件包在新配置系统中的工作方式。这是您向我们提供反馈并帮助解决扁平配置的任何不兼容性或问题的机会。

请在你的软件包中尝试扁平配置，并通过 发起讨论 让我们知道进展如何；如果你有疑问，可以访问 Discord #developers 频道，或者如果你发现问题，可以 提交 issue。

感谢您的帮助和反馈！