Upgrade to new ESLint Flat configuration files about eslint-plugin-cypress

[cypress-app-bot]

🎉 This issue has been resolved in version 3.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[brettz9]

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

[MikeMcC399]

@codeflorist

• I have submitted #201 to add some documentation for this to the repo.

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]

@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]

@martin131

Cannot update to ESLint 9 because of this issue.

This should not be a blocker anymore, even though the issue is still open. You can check out the https://github.com/cypress-io/cypress-example-kitchensink repo which is already running ESLint v9.

[martin131]

Cannot update to ESLint 9 because of this issue.

[codeflorist]

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]

• 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.

[MikeMcC399]

@ceisele-r

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

[MikeMcC399]

@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.

[MikeMcC399]

My planned changes have all been processed now. The repo is using ESLint 9.2.0.

eslint-plugin-cypress/package.json

Line 30 in a109c4a

"eslint": "^9.2.0",

So although it supports usage from an ESLint flat file config (eslint.config.*js) as described in the FLAT-CONFIG document, it does not yet offer a flat configuration option itself.

[jennifer-shehane]

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

[Splines]

@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.

[MikeMcC399]

See blog post ESLint v9.0.0 released Apr 5, 2024.

[MikeMcC399]

If flat configuration files were the only issue, then it should be possible to use the backwards compatible mode with

ESLINT_USE_FLAT_CONFIG=false

according to Eslint > Configuration Files (Deprecated).

I found that didn't work, see:

• #156

I also logged some related issues:

• #154
• #155

[ceisele-r]

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?

[nelli91]

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]

• I have added a draft PR #212 to add flat config to this plugin