FlatCompat doesn't have a good pattern for applying plugins / extends to files

[matthew-dean]

I'd like to convert our ESLint configs to the flat config format.

However, I'm running into immediate problems where it seems I must choose to use FlatCompat for everything, or use FlatCompat for nothing.

For example, I have plugins and extends that apply to specific files.

Yet, in the documentation, it has plugins and extends spreading into the root configuration array.

Instead, what I want is:

module.exports = [
  // other files
  {
    files: ['*.ts', '*.tsx', '*.vue'],
    // this is an error, because it spreads configs, but I want it to apply extends to JUST THESE FILES based on the compat layer
    ...compat.extends(
      'plugin:vue/vue3-strongly-recommended',
      'standard-with-typescript'
    ),
    languageOptions: {
      parser: VueEsLintParser,
      parserOptions: {
        parser: TSParser,
        project: './tsconfig.json',
        extraFileExtensions: ['.vue']
      }
    }
  }
 ]

In other words, with the old file format, I could use plugins / extends with specific matching files. Yet if I do that, it looks like I must use ...compat.config and use the old configuration for everything (so, not using languageOptions, direct parser imports, etc).

Is there not a way to get the best of both worlds, and import plugins / extends while maintaining the new format for everything else?

[matthew-dean]

Maybe I can do something like:

...compat.config({
    extends: ['standard', 'plugin:storybook/recommended'],
    files: ['*.js']
  }),
  {
    files: ['*.js'],
    languageOptions: {
      parser: VueEsLintParser
    },
    rules: {
      ...jsRules
    }
  }

...That still feels really unnecessarily awkward and repetitive though? 🤔

EDIT: Actually, it looks like what I have to do is:

  ...compat.config({
    overrides: [
      {
        extends: ['standard', 'plugin:storybook/recommended'],
        files: ['*.js']
      }
    ]
  }),

... because files is not allowed top-level in the old format. Is that really the simplest option?

[nzakas]

Please see https://eslint.org/docs/next/use/configure/combine-configs#apply-a-config-array-to-a-subset-of-files

Because all of the methods on FlatCompat returns arrays, you can follow the same pattern.