ESLint的新配置系统-3(开发者预览)

写在最前面的话：本文是对 Nicholas C. Zakas (eslint 作者)关于elint新配置系统说明的直译，翻译未经校准，看不懂的地方请配合原文食用，谢谢！！！

虽然新的配置系统尚未合并到 CLI 中，但可以通过 API 供开发人员测试。

在我之前的文章中，我解释了使用新的“平面”配置系统的基本概念。在我们进行更多内部测试时，新的配置系统尚未与 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() 的任何调用都将假定被检查的文本是文件名以 .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.solvePluginsRelativeTo 选项已被删除。 5.RulePaths 选项已被删除。自定义规则必须直接通过config添加。

使用平面配置和 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 现在是“最新”，因此如果您在测试中没有指定 ecmaVersion，则可能会出现不兼容性，因为 eslintrc 的默认 ecmaVersion 是 5。 2.默认的 sourceType 现在是“module”，因此如果您在测试中没有指定 sourceType，可能会出现不兼容性，因为 eslintrc 的默认 sourceType 是“script”。这主要出现在处理全局范围内的变量时。

结论

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

请尝试使用您的软件包进行平面配置，如果您有疑问，请开始讨论或通过 Discord #developers 频道停止，或者在发现问题时提出问题，让我们知道它的进展情况。

我们感谢您的帮助和反馈！

ESLint's new config system - part three 直译

ESLint的新配置系统-3(开发者预览)

将平面配置与 Linter 类一起使用

将平面配置与 ESLint 类一起使用

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

结论

Tags