使用FlatCompat转换Airbnb配置时@typescript-eslint重复定义错误

问题背景 #

尝试配置Prettier、TypeScript、ESLint结合Airbnb TypeScript语法规范，实现代码检查与自动格式化功能。由于Airbnb及eslint-config-airbnb-typescript暂不支持ESLint新的Flat Config语法，使用FlatCompat将旧版配置转换为新语法，但运行lint命令时出现插件重复定义错误。

现有配置 #

package.json #

{
  "name": "typescript-eslint-airbnb-compat",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint .",
    "lint:fix": "npm run lint -- --fix",
    "format": "prettier . --check",
    "format:fix": "npm run format -- --write"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3.0.2",
    "@eslint/js": "^8.57.0",
    "@typescript-eslint/eslint-plugin": "^7.4.0",
    "@typescript-eslint/parser": "^7.4.0",
    "eslint": "^8.57.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-airbnb-typescript": "^18.0.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.29.1",
    "typescript": "^5.4.3",
    "typescript-eslint": "^7.4.0",
    "vite": "^5.2.0"
  }
}

eslint.config.mjs #

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import eslintConfigPrettier from "eslint-config-prettier";

import { FlatCompat } from "@eslint/eslintrc";
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
});

export default tseslint.config(
  eslint.configs.recommended,
  ...compat.extends("airbnb-base"),
  ...compat.extends("airbnb-typescript/base"),
  ...tseslint.configs.recommendedTypeChecked,
  eslintConfigPrettier,
  {
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
  {
      files: ['**/*.{js,jsx,cjs,mjs}'],
      extends: [tseslint.configs.disableTypeChecked],
  }
);

错误信息 #

> typescript-eslint-airbnb-compat@0.0.0 lint
> eslint .


Oops! Something went wrong! :(

ESLint: 8.57.0

Error: Key "plugins": Cannot redefine plugin "@typescript-eslint".
    at .../typescript-eslint-airbnb-compat/node_modules/@humanwhocodes/object-schema/src/object-schema.js:250:27
    at Array.reduce (<anonymous>)
    at ObjectSchema.merge (.../typescript-eslint-airbnb-compat/node_modules/@humanwhocodes/object-schema/src/object-schema.js:237:24)
    at .../typescript-eslint-airbnb-compat/node_modules/@humanwhocodes/config-array/api.js:935:42
    at Array.reduce (<anonymous>)
    at FlatConfigArray.getConfig (.../typescript-eslint-airbnb-compat/node_modules/@humanwhocodes/config-array/api.js:934:39)
    at FlatConfigArray.isFileIgnored (.../typescript-eslint-airbnb-compat/node_modules/@humanwhocodes/config-array/api.js:962:15)
    at .../typescript-eslint-airbnb-compat/node_modules/eslint/lib/eslint/eslint-helpers.js:312:49
    at Array.reduce (<anonymous>)
    at entryFilter (.../typescript-eslint-airbnb-compat/node_modules/eslint/lib/eslint/eslint-helpers.js:299:28)

问题原因与解决方案 #

原因 #

错误源于配置中重复注册了@typescript-eslint插件：

• compat.extends("airbnb-typescript/base")已经自动引入了@typescript-eslint插件
• tseslint.configs.recommendedTypeChecked同样会自动注册该插件
  两者叠加导致ESLint抛出重复定义错误。

解决方案 #

移除重复的配置项，保留airbnb-typescript提供的TypeScript规则即可，修正后的eslint.config.mjs如下：

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import eslintConfigPrettier from "eslint-config-prettier";

import { FlatCompat } from "@eslint/eslintrc";
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
});

export default tseslint.config(
  eslint.configs.recommended,
  ...compat.extends("airbnb-base"),
  ...compat.extends("airbnb-typescript/base"),
  // 移除重复的tseslint.configs.recommendedTypeChecked
  eslintConfigPrettier,
  {
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
  {
      files: ['**/*.{js,jsx,cjs,mjs}'],
      extends: [tseslint.configs.disableTypeChecked],
  }
);

如果需要额外的TypeScript规则，可以手动添加具体规则，而非引入整个recommendedTypeChecked配置集，避免插件重复注册。

内容的提问来源于stack exchange，提问作者Rashiq