ESLint 新的配置系統，第 3 部分：開發者預覽

在我的前一篇文章中，我解釋了使用新的「扁平」配置系統的基本概念。新的配置系統在我們進行更多內部測試時，尚未與 CLI 綁定，但我們確實希望讓 ESLint 社群有機會在我們努力將其整合到 CLI 中時，試用扁平配置。因此，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() 的呼叫都將假定正在檢查的文字是 JavaScript 檔案，其檔名以 .js 結尾，但始終建議傳遞明確的檔名作為第三個參數。

雖然此基本案例的工作方式與您使用的配置系統無關，但仍存在一些重要的差異

• 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（如果您發現問題）來告知我們您的使用情況。

感謝您的協助和回饋！