Update configs format for use with defineConfig()

[nzakas]

The format for flat configs in eslint-plugin-react is outside the norm for ESLint plugins.

Currently:

const react = require('eslint-plugin-react');

module.exports = [
    react.configs.flat.recommended
];

What I'd like to see:

import react from "eslint-plugin-react";
import { defineConfig } from "eslint";

export default defineConfig({
    files: ["**/*.jsx"],
    plugins: {
        react
    },
    extends: ["react/recommended"]
});

You can support this newer format by renaming flat.recommended to flat/recommended (or by exporting the same config with both names). See the docs here:
https://eslint.org/docs/latest/extend/plugins#backwards-compatibility-for-legacy-configs

[ljharb]

If eslint doesn't force it, then I'm not sure how important that norm is.

[nzakas]

The fact that I opened this issue should tell you that it's important. :) This problem of having different plugins specifying different ways to include configs is what motivated the creation of defineConfig() in the first place.

I'm working with a client right now where this came up. The expectation is that plugins support the name/config-name format for extends, and people are trying that first and then becoming confused when it doesn't work. Only then do they go and read the README, and then are still left confused as to why this plugin is different.

[ljharb]

Why is that the expectation tho? neither eslint 8 or 9 mandates a format, so there should be no expectation of a single format, and imo defineConfig shouldn't be a subset of what eslint mandates.

Having property names that aren't identifiers is "icky" and inconvenient.

[ljharb]

If your goal is to specify a protocol, then i think a more appropriate direction would be a symbol, exported by eslint itself, that eslint always looks for on objects it's given, that links to the config - then users wouldn't have to type anything to get there.