Is flat config ready to use?

[mikhaylov-ya]

Hi there! I've created a eslint.config.js instead of eslintrc file, but running npx eslint . ends with

Oops! Something went wrong! :(

ESLint: 8.22.0

ESLint couldn't find a configuration file.

What should I do to make it work?

[nzakas]

As noted in the docs:

This is an experimental feature that is not enabled by default. You can use the configuration system described on this page by using the FlatESLint class, the FlatRuleTester class, or by setting configType: "flat" in the Linter class.

Watch this pull request for updates:
#16235

[sassomedia]

Following up on this, I cannot seem to get the new eslint.config.js to work either. This is my file:

export default [
  {
    ignores: ["/node_modules/*", "/.next/*"],
    languageOptions: {
      browser: true,
      ecmaVersion: "latest",
      jest: true,
      mocha: true,
      mongo: true,
      node: true,
      sourceType: "module",
    },
    linterOptions: { reportUnusedDisableDirectives: true },
    plugins: ["react"],
    rules: {},
  },
];

and in the env.local, I have:

ESLINT_USE_FLAT_CONFIG=true

I'm using a standard Next.js project generated through npx create-next-app@latest. This creates an eslintrc.json, which I then replace with an eslint.config.js instead. The ESLint plugin in VSCode however, fails to recognize it and logs the following warning in the Output:

No ESLint configuration (e.g. .eslintrc) found for file:
File will not be validated. Consider running 'eslint --init' in the workspace folder
Alternatively you can disable ESLint by executing the 'Disable ESLint' command.

If I run npm run lint based on the package.json scripts, it too does not seem to recognize that ESLint is already configured in eslint.config.js. So the following setup comes up which I agree to execute:

> next lint

? How would you like to configure ESLint? https://nextjs.org/docs/basic-features/eslint
- ready ESLint has successfully been configured. Run next lint again to view warnings and errors.

This does not change anything though. I get the same warning messages in the Output and npm run lint will ask to run the setup again. Only if I run eslint --init like suggested in the warning, will it run a successful setup. But that then creates a plain old eslintrc.js.

How would I get the new eslint.config.js to get accepted? Is this an issue with the VSCode plugin?

For reference, here is my package.json as well:

{
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest --watch"
  },
  "dependencies": {
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.1.2",
    "@testing-library/react": "^14.0.0",
    "eslint": "^8.48.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-n": "^16.0.2",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.33.2",
    "jest": "^29.6.4",
    "jest-environment-jsdom": "^29.6.4"
  }
}

[Rec0iL99]

Hi @mikhaylov-ya, it's because you are using the Next.js CLI (next lint) which I think does not search for an eslint.config.js currently. Try using the ESLint CLI and things should work as expected (npx eslint .).

What version of the ESLint VSCode extension are you on currently?

[sassomedia]

@Rec0iL99 If I run npx eslint ., it does seem to respond to the file but I'm getting an error:

Oops! Something went wrong! :(

ESLint: 8.48.0

Error: Key "languageOptions": Unexpected key "browser" found.

And yes, I would essentially need VSCode's ESLint plugin to recognize it. The plugin is currently at Version 2.4.2. If there is no support for this new approach from the plugin, I will have to wait.

[Rec0iL99]

That's the wrong way of configuring globals in the new config. Please refer the docs for this.

You would have to do something like this:

import globals from "globals";
export default [
    {
        languageOptions: {
            globals: {
                ...globals.browser,
                ...globals.jest,
            }
        }
    }
];

As for the VSCode ESLint extension please refer to this comment.

[Rec0iL99]

Plugins are also configured the wrong way in your eslint.config.js, the docs should help you here.

[sassomedia]

@Rec0iL99 OK thanks! I must have mixed up the options with the old version. I will give this a try.

[mdjermanovic]

For the VSCode ESlint plugin to work with flat config, you'll need to enable eslint.experimental.useFlatConfig option in vscode settings.

{
    "eslint.experimental.useFlatConfig": true
}

https://github.com/microsoft/vscode-eslint#vs-code-eslint-extension:

• eslint.experimental.useFlatConfig: (since 2.3.0) - Enables support of experimental Flat Config (aka eslint.config.js, supported by ESLint version 8.21 or later)

[mfirry]

Hi, just started a new project following the suggested npm init @eslint/config way using eslint 9 but it stills creates a .eslintrc.js file.

[Rec0iL99]

Hi @mikhaylov-ya, you might be using the old version of @eslint/create-config which creates a config file in the eslintrc config system format. Please try using npm init @eslint/config@latest to get the latest version.

[mfirry]

Hmmm... it does not seem so...

 joem@alloy  ~/personal/javascript  npm list -g
/Users/joem/.nvm/versions/node/v20.11.1/lib
+-- corepack@0.23.0
+-- eslint@9.0.0
`-- npm@10.2.4

[mfirry]

Though using @latest as suggested created eslint.config.mjs

[ildella]

Then the command in home page and everywhere else in the docs is wrong.

[haotangio]

Yes for simple projects.
No for complex ones with many libraries and dependencies.