ESLint 相容性工具介紹

ESLint v9.0.0 的發布帶來了 全新配置系統 的推出，以及 規則 API 的一系列變更。這些變更對於準備 ESLint 以實作 語言外掛程式 至關重要，這將使 ESLint 能夠原生檢查 JavaScript 以外的語言。因此，外掛程式作者需要更新其規則以與 v9.0.0 相容，但不幸的是，這表示您依賴的某些外掛程式可能尚未更新。這就是我們發布相容性工具的原因。

如何判斷相容性工具是否有幫助

如果您在執行 ESLint 時遇到以下任何錯誤，這些工具可能會有所幫助

TypeError: context.getScope is not a function
TypeError: context.getAncestors is not a function
TypeError: context.markVariableAsUsed is not a function
TypeError: context.getDeclaredVariables is not a function

這些錯誤表示外掛程式規則尚未更新至最新的 ESLint 規則 API。

使用相容性工具

首先，使用 npm 或任何相容於 npm 的 CLI 安裝 @eslint/compat 套件

npm install @eslint/compat -D
# or
yarn add @eslint/compat -D
# or
pnpm install @eslint/compat -D
# or
bun install @eslint/compat -D

然後，在您的 eslint.config.js 檔案中使用 fixupPluginRules() 函數，將外掛程式包裝在相容性層中

// eslint.config.js
import { fixupPluginRules } from "@eslint/compat";
import example from "eslint-plugin-example";

export default [
    {
        plugins: {
            example: fixupPluginRules(example)
        }
    },

    // other config
];

之後，外掛程式應可如預期般運作。

修正匯入的配置

如果您從另一個參考外掛程式的套件匯入扁平式配置，則可以使用 fixupConfigRules() 函數來包裝所有找到的外掛程式，如下所示

// eslint.config.js
import { fixupConfigRules } from "@eslint/compat";
import recommended from "eslint-plugin-example/configs/recommended.js";

export default [

    ...fixupConfigRules(recommended)

    // other config
];

fixupConfigRules() 函數接受單一物件和物件陣列，以便輕鬆更新您正在使用的任何配置。

搭配 FlatCompat 使用

如果您正在使用 @eslint/eslintrc 套件中的 FlatCompat，您可能無法存取 eslintrc 樣式配置中參考的每個外掛程式。在這種情況下，您可以使用 fixupConfigRules() 函數來包裝所有外掛程式，如此範例所示

// eslint.config.js
import { fixupConfigRules } from "@eslint/compat";
import { FlatCompat } from "@eslint/eslintrc";

const flatCompat = new FlatCompat();

export default [

    ...fixupConfigRules(
        flatCompat.extends("my-config")
    )

    // other config
];

雖然此範例示範如何將 fixupConfigRules() 與 extends() 方法搭配使用，但 FlatCompat 上的任何方法都適用。

結論

全新配置系統的優點之一是，它讓我們能夠修補尚未由維護者更新的外掛程式和配置。我們知道，遷移到 ESLint v9.0.0 且您的配置無法運作可能會令人沮喪，這就是為什麼我們致力於提供 @eslint/eslintrc 和 @eslint/compat 等套件來協助過渡。