How can the eslint flat config compatibility support be restricted to a specific directory?

[ceisele-r]

How can the new flat mode compatibility support be restricted to a specific directory?
E.g. until now I have the 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 should only be applied to files within the cypress directory?

Originally posted by @ceisele-r in #146 (comment)

[MikeMcC399]

@ceisele-r
Thank you for re-posting your question!
Please say which version of eslint and eslint-plugin-cypress you are using.
Also to complete the picture, it is helpful to know which operating system you are using and which version of Node.js.

[codeflorist]

Each config object of the flat config can have it's own files definition (see docs here). So this should be possible (not tested):

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

[ceisele-r]

@MikeMcC399 thanks, I'm on eslint 8.57.0 and eslint-plugin-cypress 3.2.0.

@codeflorist that's what I already tried before, but unfortunately, there is no files property for ...compat.config(...) objects:

Object literal may only specify known properties, and 'files' does not exist in type 'Config<RulesRecord, RulesRecord>'.ts(2353)

So that's unfortunately no solution.

[MikeMcC399]

@ceisele-r

In the https://github.com/cypress-io/cypress-example-kitchensink repo there is a script defined as

"lint": "eslint --fix cypress app/assets/js/scripts.js"

so that only lints cypress (and one other JavaScript file)

Would that be a workaround for you?

[ceisele-r]

@MikeMcC399 unfortunately not.
It's a larger project where cypress is only one part.
Therefore, there is one new flat eslint.config.js that should cover everything (regular code, other tests, cypress tests etc.) with one lint script (as well as that VS Code picks up that single config for IDE support).

This used to work by having multiple eslintrc.js files in respective directories that extended the main config.
According to my understanding of the new eslint.config.js, this is now all to be flattened in that single config (to only ever have 1 eslint config file).
Therefore, there is the files property in there now so that we can do something like:

{
...
  {
    files: ["src/whatever/**/*"],
    rules: {
      "@typescript-eslint/promise-function-async": "error",
    },
  },
...
}

to enforce specific rules/plugin configurations for specific directories/files.
But for your recommended compat solution using compat.config, this does not seem to be an option (or I missed the correct syntax how to specify the files this compat.config should be applied to).

[MikeMcC399]

@ceisele-r

Would you take a look at eslint/eslintrc#148 to see if this explains it?

You're welcome to take the question over to the ESLint experts in their Discord channel https://eslint.org/chat as well since it concerns how to use their @eslint/eslintrc library.

I will also see in parallel if I can get this working.

[ceisele-r]

@MikeMcC399 ah, thank you!

This eslint/eslintrc#148 (comment) seems to do the trick.

So if anyone else encounters this, what seems to be working is the following:

{
  ...,
  ...compat
    .config({
      extends: ["plugin:cypress/recommended"],
      parserOptions: {
        ecmaVersion: 2020,
        sourceType: "module",
        project: "./cypress/tsconfig.json",
      },
    })
    .map((config) => ({ ...config, files: ["cypress/**/*"] })), // Add the files property to every array entry to restrict it to only be applied to these files.
  ...
}

Thanks again for the tip!

[MikeMcC399]

@ceisele-r

It's great that solved your issue. 🎉 This should probably go into the documentation as it will be a common problem for those upgrading and used to having a specific eslintrc* file in the cypress directory.

[MikeMcC399]

I'm going to close this issue now as v3.3.0 removes the reliance on the Flat mode compatibility utility.