eslint-config/eslint-plugin: Support "Flat Config" (ESLint 9)

[JoshuaKGoldberg]

trafficstars

Description

👋 Coming over from https://github.com/eslint/eslint/issues/18093: ESLint is migrating to a new "flat config" format that will be the default in ESLint v9.

It doesn't look like @react-native-community/eslint-plugin has support yet. I'm posting this issue here as a reference & cross-linking it to the table in https://github.com/eslint/eslint/issues/18093. If there's anything technical blocking the extension from supporting flat configs, please let us know - we'd be happy to try to help! 💜

Additional resources:

• Configuration Migration Guide
• (edit) Plugin Migration Guide
• Blog posts on the new config system: Part 1: Background, Part 2: Introduction to flat config

(sorry for not using the issue template properly - I wasn't sure how best to report this)

Steps to reproduce

1. Have an eslint.config.js (flat config)
2. See setup instructions https://www.npmjs.com/package/@react-native-community/eslint-plugin
3. Note the missing mention of flat config

React Native Version

n/a

Affected Platforms

Other (please specify)

Output of npx react-native info

n/a

Stacktrace or Logs

n/a

Reproducer

n/a

Screenshots and Videos

No response

[github-actions[bot]]

:warning:	Add or Reformat Version Info
:information_source:	We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.70.2

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[cortinico]

It doesn't look like `@react-native-community/eslint-plugin has support yet

Hey @JoshuaKGoldberg, we don't maintain this package anymore. Did you mean @react-native/eslint-plugin?

[JoshuaKGoldberg]

Oh! Maybe I did. Sorry, I haven't written anything in React Native in a few years and I got confused by all the similar names 😅.

Just confirming where the packages are now, what package(s) should I be filing this issue on?

I think part of my confusion comes from both https://www.npmjs.com/package/@react-native/eslint-plugin and https://www.npmjs.com/package/@react-native-community/eslint-plugin linking to this repo.

[cortinico]

Just confirming where the packages are now, what package(s) should I be filing this issue on?

Packages that are eslint related and hosted on this repo are:

• @react-native/eslint-config
• @react-native/eslint-plugin
• @react-native/eslint-plugin-specs

I think part of my confusion comes from both npmjs.com/package/@react-native/eslint-plugin and npmjs.com/package/@react-native-community/eslint-plugin linking to this repo.

Yup as historically we were hosting @react-native-community/eslint-plugin inside this repo. We then renamed it to @react-native/eslint-plugin

[Eprince-hub]

I guess there is no update on this yet

[aeyll-11]

@JoshuaKGoldberg Hello, I hope you're doing well! I'm currently in the process of migrating to ESLint version 9 using a flat configuration. However, I couldn't find any information regarding the overrides property in the configration files for version 9. In the version 8 documentation it was mentioned.

Could you please clarify if there have been changes to the overrides property or if it's still applicable in version 9?

Thank you in advance for the answer

[JoshuaKGoldberg]

👋 @aeyll-11 - just to clarify, is this for adding support for React Native's ESLint presets, or for another project?

Answering in general: yes, you can think of the new flat config format as kind of being a list of overrides. From https://eslint.org/docs/head/use/configure/configuration-files#specifying-files-and-ignores (in the page you linked) - you can specify any number of files/ignores entries that apply in order.

If you've got more questions about what's changed that aren't directly on React Native using flat config, I think the ESLint Discord would be a good place to ask more. If your question actually is about specifically React Native & this issue then never mind, apologies. 🙂

[aeyll-11]

@JoshuaKGoldberg Its for adding support for React Native's ESLint presets.

[MCanhisares]

@cortinico Can you assign this issue to me? I'd like to take a crack based on some of the other libraries that also added support to the flat config

[cortinico]

@cortinico Can you assign this issue to me? I'd like to take a crack based on some of the other libraries that also added support to the flat config

Sure please go ahead 👍

[MCanhisares]

@cortinico opened a PR with the changes

[ClementLevesque]

For those who want to start using the flat config before it is supported here is my working config file (partial) :

import { fixupPluginRules } from '@eslint/compat';
import js from '@eslint/js';
import eslintReactNative from 'eslint-plugin-react-native';
import typescriptEslint from 'typescript-eslint';

export default typescriptEslint.config(
  js.configs.recommended,
  ...typescriptEslint.configs.recommendedTypeChecked,
  // react-native
  {
    name: 'eslint-plugin-react-native',
    plugins: {
      'react-native': fixupPluginRules({
        rules: eslintReactNative.rules,
      }),
    },
    rules: {
      ...eslintReactNative.configs.all.rules,
      'react-native/sort-styles': 'off',
      'react-native/no-inline-styles': 'warn',
    },
  },
);

It uses eslint V9 compatibility utilities.

[mwmcode]

Thanks @ClementLevesque, this is for eslint-plugin-react-native.

Anyone managed to have it work w/o installing additional packages? (iow, managed to have @react-native/eslint-[packages] work with flat config?