The FlatCompat class provides compatibility layer functionality for translating ESLintRC-style configurations into flat config objects, enabling existing ESLint configurations to work with newer ESLint versions.
Creates a new FlatCompat instance for translating ESLintRC configurations.
/**
* Creates a new FlatCompat instance for translating ESLintRC configurations
* @param options - Configuration options for the compatibility layer
*/
constructor(options?: {
/** Base directory for resolving relative paths (default: process.cwd()) */
baseDirectory?: string;
/** Directory to resolve plugins relative to */
resolvePluginsRelativeTo?: string;
/** Configuration object for "eslint:recommended" (required if extends uses it) */
recommendedConfig?: any;
/** Configuration object for "eslint:all" (required if extends uses it) */
allConfig?: any;
});Usage Examples:
import { FlatCompat } from "@eslint/eslintrc";
import js from "@eslint/js";
// Basic setup
const compat = new FlatCompat({
baseDirectory: __dirname,
});
// Setup with recommended config support
const compat = new FlatCompat({
baseDirectory: __dirname,
resolvePluginsRelativeTo: __dirname,
recommendedConfig: js.configs.recommended,
allConfig: js.configs.all,
});Translates an entire ESLintRC-style configuration object into flat config format.
/**
* Translates an ESLintRC-style config into a flat-config-style config
* @param eslintrcConfig - The ESLintRC-style config object
* @returns Array of flat config objects representing the configuration
*/
config(eslintrcConfig: {
extends?: string | string[];
plugins?: string[];
env?: { [envName: string]: boolean };
globals?: { [globalName: string]: boolean | "readonly" | "writable" | "off" };
rules?: { [ruleName: string]: any };
settings?: { [key: string]: any };
parser?: string;
parserOptions?: any;
overrides?: any[];
[key: string]: any;
}): any[];Usage Examples:
import { FlatCompat } from "@eslint/eslintrc";
const compat = new FlatCompat({
baseDirectory: __dirname,
});
// Translate complete ESLintRC config
const flatConfigs = compat.config({
extends: ["eslint:recommended", "plugin:react/recommended"],
plugins: ["react", "jsx-a11y"],
env: {
browser: true,
es2021: true
},
globals: {
myGlobal: "readonly"
},
rules: {
"no-unused-vars": "error",
"react/prop-types": "off"
},
settings: {
react: {
version: "detect"
}
},
parserOptions: {
ecmaVersion: 2021,
sourceType: "module"
}
});
export default [...flatConfigs];Translates the env section of an ESLintRC-style config.
/**
* Translates the env section of an ESLintRC-style config
* @param envConfig - Object mapping environment names to boolean values
* @returns Array of flat config objects representing the environments
*/
env(envConfig: { [envName: string]: boolean }): any[];Usage Examples:
// Translate environment settings
const envConfigs = compat.env({
browser: true,
node: true,
es2021: true,
jest: true
});
export default [
...envConfigs,
// other configs
];Translates the extends section of an ESLintRC-style config.
/**
* Translates the extends section of an ESLintRC-style config
* @param configsToExtend - Names of the configs to load and extend
* @returns Array of flat config objects representing the extended configurations
*/
extends(...configsToExtend: string[]): any[];Usage Examples:
// Extend from multiple configurations
const extendedConfigs = compat.extends(
"eslint:recommended",
"@eslint/js/recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended"
);
export default [
...extendedConfigs,
// additional configs
];
// Single extend
const singleExtend = compat.extends("airbnb-base");Translates the plugins section of an ESLintRC-style config.
/**
* Translates the plugins section of an ESLintRC-style config
* @param plugins - Names of the plugins to load
* @returns Array of flat config objects representing the plugins
*/
plugins(...plugins: string[]): any[];Usage Examples:
// Load multiple plugins
const pluginConfigs = compat.plugins(
"react",
"jsx-a11y",
"@typescript-eslint",
"import"
);
export default [
...pluginConfigs,
// additional configs
];
// Single plugin
const reactPlugin = compat.plugins("react");Complete migration from ESLintRC to flat config:
import { FlatCompat } from "@eslint/eslintrc";
import js from "@eslint/js";
import path from "path";
import { fileURLToPath } from "url";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
resolvePluginsRelativeTo: __dirname,
recommendedConfig: js.configs.recommended,
allConfig: js.configs.all,
});
// Original .eslintrc.js content:
// {
// "extends": ["eslint:recommended", "plugin:react/recommended"],
// "plugins": ["react", "jsx-a11y"],
// "env": { "browser": true, "es2021": true },
// "rules": { "no-unused-vars": "error" }
// }
export default [
// Translate the entire original config
...compat.config({
extends: ["eslint:recommended", "plugin:react/recommended"],
plugins: ["react", "jsx-a11y"],
env: { browser: true, es2021: true },
rules: { "no-unused-vars": "error" }
}),
// Add additional flat config objects as needed
{
files: ["**/*.test.js"],
env: { jest: true }
}
];Gradual migration using individual translation methods:
import { FlatCompat } from "@eslint/eslintrc";
import js from "@eslint/js";
const compat = new FlatCompat({
baseDirectory: __dirname,
recommendedConfig: js.configs.recommended,
});
export default [
// Start with base ESLint recommended
...compat.extends("eslint:recommended"),
// Add specific environments
...compat.env({
browser: true,
es2021: true
}),
// Add plugins incrementally
...compat.plugins("react"),
...compat.plugins("jsx-a11y"),
// Add custom flat config rules
{
rules: {
"no-unused-vars": "error",
"prefer-const": "warn"
}
}
];// This will throw an error if "eslint:recommended" is used in extends
// but recommendedConfig is not provided
const compat = new FlatCompat(); // Missing recommendedConfig
try {
const configs = compat.extends("eslint:recommended");
} catch (error) {
console.error("Missing parameter 'recommendedConfig' in FlatCompat constructor");
}// Plugin resolution errors will be thrown during config generation
const compat = new FlatCompat({
baseDirectory: __dirname,
resolvePluginsRelativeTo: __dirname,
});
try {
const configs = compat.plugins("nonexistent-plugin");
} catch (error) {
console.error("Failed to resolve plugin:", error.message);
}