ESLint flat config is quite different from the previous format. To help understand the "flat config" the following pointers helped me:

• Config is nothing more complicated than an array of objects. This is simpler than the previous format but might not be obvious at first.
• Each object in the array can define whatever ESLint configuration it wants
• Each object can target certain files by including or ignoring a set of files (useful because .eslintignore is no longer available)
• Each file being linted will have all matching configurations applied - I believe in the order they appear in the array

Setup for VS Code - at the time of writing you'll need:

• ESLint plugin v3.0.5 or above (this currently requires "switch to pre-release version") in the plugin's installation page
• Add "eslint.useFlatConfig": true to your settings.json (this was previously eslint.experimental.useFlatConfig)

Install the following dependencies:

    yarn add --dev \
      eslint \
      @eslint/js \
      typescript-eslint \
      --

Use the following eslint.config.mjs file to get you started (locate it alongside package.json). This provides defaults from https://typescript-eslint.io/getting-started/. This config additionally allows you to add ignored files, which is useful because .eslintignore is no longer available. NB the config is 'just Javascript' so you can make additional changes. This uses module.exports which avoids the need to add type: "module" to package.json:

// @ts-check

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

// https://typescript-eslint.io/getting-started/

const ignores = [
  '**/*.js',
];

export default tseslint.config(
  {
    ...eslint.configs.recommended,
    ignores,
  },
  ...tseslint.configs.recommended.map((config) => ({
    ...config,
    ignores,
  })),
);

Pro:

• It's actually quite clean
• The config above is a lot smaller than the sticky nest of stuff I had accumulated under the old config

Con:

• I was previously using AirBnB config but decided I needed to dump that because it's not (yet) available in flat config format
• Applying a different set of linting rules meant a raft of (mostly simple) changes across my codebase

FlatCompat#extends() works the same way as extends in eslintrc so configs are applied from first to last.

This has been fixed in typescript-eslint v7.5.0

If you're stuck on an older version you can manually fix the issue by updating the code:

  ...compat.extends("airbnb-typescript/base").map(c => {
    if (c.plugins) {
      // @ts-expect-error
      c.plugins['@typescript-eslint'] = tseslint.plugin;
    }
    return c
  }),

Background:

The error is unculear but this is working as expected. TL;DR is that our config defines

{
  plugins: {
    '@typescript-eslint': require('typescript-eslint').plugin
  },
}

But eslint-config-airbnb-typescript defines

{
  plugins: {
    '@typescript-eslint': require('@typescript-eslint/eslint-plugin')
  },
}

ESLint enforces that whilst you may have multiple definitions of a plugin namespace - each definition must have exactly the same value.

The issue here is that

require('typescript-eslint').plugin !== require('@typescript-eslint/eslint-plugin')

tseslint.configs.recommendedTypeChecked uses the former and compat.extends("airbnb-typescript/base") uses the latter.

Hence the error.