Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade to new ESLint Flat configuration files #146

Open
Tracked by #18093
Splines opened this issue Jan 4, 2024 · 14 comments
Open
Tracked by #18093

Upgrade to new ESLint Flat configuration files #146

Splines opened this issue Jan 4, 2024 · 14 comments

Comments

@Splines
Copy link

Splines commented Jan 4, 2024

Hey there, thanks for your ESLint plugin 馃檶. Starting with v9, ESLint provides a new flat config format (eslint.config.js). Also see the configuration migration guide and the plugin migration guide.

Do you have any plans to upgrade this plugin to the new format? For example, the env field does not exist anymore and globals have to provided in a different way. Also see my Stack Overflow answer here. And there are many other breaking changes too.

I've just migrated my eslint-plugin-erb to the new API. Feel free to take inspiration from it, e.g. I provide a legacy recommended configuration for backwards compatibility here.

@jennifer-shehane
Copy link
Member

We don't have plans to put effort into this migration, but would be open to a PR for this support.

@Splines
Copy link
Author

Splines commented Jan 6, 2024

@jennifer-shehane Ok, thanks for the reply. Looking into your index.js and recommended.js, it shouldn't be too much work to perform the migration. I'm happy to tackle this, however, me being a student, it will probably take until mid/end-February until I can look into this.

@brettz9
Copy link
Contributor

brettz9 commented Jan 17, 2024

@jennifer-shehane : Be aware that this plugin will essentially stop working by default in ESLint 9 as the flat format becomes the default.

@MikeMcC399

This comment was marked as resolved.

@martin131
Copy link

Cannot update to ESLint 9 because of this issue.

@MikeMcC399

This comment was marked as resolved.

@codeflorist
Copy link

codeflorist commented May 3, 2024

Actually, you can use FlatCompat to use legacy packages with the new flat config. (see here for more info.)

So this should be working with v8 flat config:

import { FlatCompat } from '@eslint/eslintrc'

const compat = new FlatCompat()

export default [
	{
		rules: {
			// your rules
		}
	}, ...compat.config({
		extends: ['plugin:cypress/recommended'],
		rules: {
			// your rules
		}
	})
]

EDIT: Actually, this is also working with eslint v9.

So while support for flat configs is probably required to make this package future-proof, you can use this package with eslint v9 using FlatCompat as described above.

@MikeMcC399
Copy link
Collaborator

@codeflorist

Thanks very much for your advice! I was able to successfully test this on https://github.com/cypress-io/cypress-example-kitchensink with ESLint v8 and v9. I'll work on updating the documentation accordingly.

Using the FlatCompat facility should be good for a transition period. The roadblock of ESLint v9 API compatibility issue was recently resolved through PR #182.

There is still quite some work to do for full native ESLint 9.x compatibility after this.

@MikeMcC399
Copy link
Collaborator

@codeflorist

Thanks once again for drawing attention to FlatCompat!

Once this document has been approved and published, it should be a small step to open up the plugin to usage with ESLint v9, albeit still using the FlatCompat for backwards compatibility.

@MikeMcC399
Copy link
Collaborator

  • Although no native flat config is available from this plugin yet, it is now possible to use the plugin with ESLint v9 and with a flat config file. This is supported by the plugin in release v3.2.0.
  • See FLAT-CONFIG for installation and configuration details.

@ceisele-r
Copy link

How could this compatibility support be restricted to a specific directory?
E.g. until now I havethe following directory structure:

cypress/.eslintrc.cjs
cypress/tsconfig.json
...

Now using the flat config compatibility support, I would add the contents of the cypress/.eslintrc.cjs to the eslint.config.js in the root as follows:

  ...
  ,
  ...compat.config({
    extends: ["plugin:cypress/recommended"],
    parserOptions: {
      ecmaVersion: 2020,
      sourceType: "module",
      project: "./cypress/tsconfig.json",
    },
  }),
  ...

How can I restrict that this config only should be applied to files within the cypress directory?

@MikeMcC399
Copy link
Collaborator

@ceisele-r

Could you please put your question into a separate new issue?

@nelli91
Copy link

nelli91 commented May 7, 2024

Hello!

I see now you started worked on this migration, last week I forked the repo to give it a try and I put here the code in case can be helpful, if you want I can open a PR but I don't want to mess with your changes, putting it just in case it can be helpful for you and it can save you some time

@MikeMcC399
Copy link
Collaborator

@nelli91

I see now you started worked on this migration, last week I forked the repo to give it a try and I put here the code in case can be helpful, if you want I can open a PR but I don't want to mess with your changes, putting it just in case it can be helpful for you and it can save you some time

Thanks very much for sharing your work. 馃憤馃徎

Some of it overlaps with what I already did, or is in PRs I have submitted or have prepared, so it would not make sense to make a direct PR out of it at the moment.

The other changes I did not cover yet are definitely interesting, so I suggest waiting a little until the planned changes have been processed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants