any plan for support eslint new config file eslint.config.js?

[zhanglolo]

new eslint 8.23.0 release. and cli can use new config file.

eslint/eslint#16235

Is there any plan for support eslint new config file eslint.config.js? 👀

[dbaeumer]

It should be support in the sense that the config file is read correctly. The only thing that is missing is the watching of that new config file.

[zhanglolo]

It should be support in the sense that the config file is read correctly. The only thing that is missing is the watching of that new config file.

But it show: No ESLint configuration found

[dbaeumer]

Actually, you are right. To use the new config files new API classes are to be used :-(. This is more effort.

[koshic]

@dbaeumer do we have any estimates to release it? Asking you because it's not a new feature, it's a kind of compatibility with existing eslint (experimental, yep) functionality.

[dbaeumer]

Somewhen in the next weeks.

[uhyo]

Hello, may I kindly ask for the release of this? We are very eagerly waiting for this. 🥺 If anythig blocks the release, I may be able to help.

[dbaeumer]

Nothing is blocking it except time :-)

[dbaeumer]

If you want you can help me sanity check:

vscode-eslint-2.3.0.zip

Download the zip and rename it to vsix and run the command install extension from vsix

[uhyo]

Thank you! I tested it with our project and found a problem; it doesn't check .ts files 😨 (and maybe other files that require custom parser)
I will look into it very soon.

[dbaeumer]

OK. Great. Let me know the outcome!

[uhyo]

@dbaeumer Hi, so it turned that the current approach for detecting custom parsers based on languageId2ParserRegExp, languageId2PluginName and languageId2ParserOptions no longer works with the new config format.

The reason is that in eslint.config.js users don't specify parser by name, but import the parser at the user side and passes the imported object to ESLint.

// old config format
  parser: "@typescript-eslint/parser"

// new config format
import typescriptEslintParser from "@typescript-eslint/parser";

  parser: typescriptEslintParser

So it is now hard for the extension to know what exact parser is used for a file.
I have a couple of idea:

• Provide an option to specify what languageId to lint.
• Or, stop trying to detect what exact parser is used, and instead try to lint any file with custom parser specified (plus JavaScript files that are linted by default).

What do you think? 🥲

[dbaeumer]

@uhyo this doesn't sound good.

Provide an option to specify what languageId to lint.

we have been there and the feedback was bad since users expected that the extension works out of the box.

Or, stop trying to detect what exact parser is used,

Always try to lint a file type even if no parser exists results in bad experiences as well. I tried this before introducing the detection but may think have changed.

Have you looked whether there is API on the ESLint instance to get some sort of config that list these parsers? If not, we could talk to the ESLint people to provide such an API since we have this information in the configuration object.

Can you setup an example GitHub repository with a custom parser? Then I can have a look as well.

[uhyo]

@dbaeumer

Can you setup an example GitHub repository with a custom parser? Then I can have a look as well.

Here's an example setup with new config format and custom parser:

https://github.com/uhyo/vscode-eslint/tree/flat-config-ts/playgrounds/flatConfig

Have you looked whether there is API on the ESLint instance to get some sort of config that list these parsers?

There does exist one, but we can no longer retrieve the name of parser, but only the parser object.

So what we could do is:

// Current approach (rough sketch)
eslintConfig.parser === "@typescript-eslint/parser"
// New approach (rough sketch)
eslintConfig.parser === require('@typescript-eslint/parser')

With the current ESLint API, the above seems the only possible way. I'm not sure whether this is the right way to go...

[dbaeumer]

After a lot of documentation reading, I found an easy fix for this. The key is this section: https://eslint.org/docs/latest/user-guide/configuring/configuration-files-new#specifying-files-and-ignores

Basically the new flat config will not validate files (except **/*.js, **/*.cjs, and **/*.mjs) if there is not corresponding section configuration section with a files pattern in the flat config.

If no configuration section is in the flat config then calculateConfigForFile returns undefined for that file. If this is the case we mark the file as probe failed. If we find one then we simply assume that the section uses a correctly configured parser and plugin. Otherwise linting on the command line would fail as well.

This was different with the old configuration mechanism where the .eslintrc* file didn't need to indicate for which file types it is used. Hence, I needed the parser checks to see if for example the config file will be able to validate TypeScript file.

See branch dbaeumer/fresh-wildebeest-lavender

[dbaeumer]

Here is a zip that can be used for another sanity check

vscode-eslint-2.3.0.zip

[dbaeumer]

@uhyo let me know how it goes

[uhyo]

@dbaeumer Genius, this works perfectly! In addition to the example setup, I tested with our actual project and there is no problem.

Thank you for your work.

[dbaeumer]

One minor tweak I did as well is to rename the setting to experimental.useFlatConfig`

[dburles]

Just wondering if the plan is for this feature to ship with 2.3.0?

[dbaeumer]

Yes, that is the plan.

[dmaskasky]

When is 2.3.0 planned for release?

[dbaeumer]

@2.3.0 will be a pre-release which I will release this week.

[uhyo]

@dbaeumer Hello, thank you for the 2.3.0 release -- but I noticed that the config name has been reverted in the released version. 😢

[dbaeumer]

Let me check.

[dbaeumer]

That is strange: I see

[uhyo]

@dbaeumer I restarted VSCode a couple of times and now the config name seems fine to me. Sorry to have botherd you. 🥺

[dbaeumer]

No problem.

[danielrentz]

Hi! Thanks for your great work with this plugin.
The only pain point during experiments with the new config in our project is that the plugin does not watch the config file. Could you add this please?

[dbaeumer]

This is actually caused by a problem in ESLint itself. I opened eslint/eslint#16660

[danielrentz]

Great, thank you!

[dburles]

Hey @dbaeumer, would you consider maybe adding another option, ie. eslint.experimental.flatConfigFilename to support specifying the config filename? It would allow for using an ESM config within CJS projects. I've opened an issue to potentially support .mjs (and resolve the config as Node would) out of the box. As a workaround, ESlint supports a cli flag to specify the filename, eg. ESLINT_USE_FLAT_CONFIG=true npx eslint -c eslint.config.mjs ..

Though I can understand that it might be worthwhile waiting for a resolution there before adding the filename option, just not sure what that might look like. It may simply remain as above, and in that case the option would make sense.

[dbaeumer]

The ESLint extension has akready support to pass options to the linter. The options available are the ESLint options passed to the ESLint instance created (https://eslint.org/docs/latest/developer-guide/nodejs-api#-new-eslintoptions) and can be set using the eslint.options setting.

[dburles]

Thanks @dbaeumer! For anyone else with a similar setup (ESM config in a CJS project), this will get things working:

VSCode:

  "eslint.experimental": {
    "useFlatConfig": true
  },
  "eslint.options": {
    "overrideConfigFile": "eslint.config.mjs"
  }

and for the cli:
ESLINT_USE_FLAT_CONFIG=true npx eslint -c eslint.config.mjs .

[tigrr]

I am getting an error: "Could not find config file", with the "Experimental: Use Flat Config" option enabled if a project has a .eslintrc file rather than eslint.config.js. The full error in the ESLint output:

Uncaught exception received.
Error: Could not find config file.
    at calculateConfigArray (\node_modules\eslint\lib\eslint\flat-eslint.js:357:19)
    at async FlatESLint.calculateConfigForFile (\node_modules\eslint\lib\eslint\flat-eslint.js:1158:25)
    at async FlatESLint.isPathIgnored (\node_modules\eslint\lib\eslint\flat-eslint.js:1169:24)
    at async c:\Users\user\.vscode\extensions\dbaeumer.vscode-eslint-2.4.0\server\out\eslintServer.js:1:23325
    at async Object.E [as withClass] (c:\Users\user\.vscode\extensions\dbaeumer.vscode-eslint-2.4.0\server\out\eslintServer.js:1:18742)
    at async w.then.g.validate (c:\Users\user\.vscode\extensions\dbaeumer.vscode-eslint-2.4.0\server\out\eslintServer.js:1:23296)

Isn't the old .eslintrc format supposed to be supported at all when "Experimental: Use Flat Config" is enabled?

ESLint: 8.34.0
Node: 16.15.0
npm: 8.5.5
Windows 11

[dbaeumer]

Flat configs are currently implemented using a different class in ESLint and that needs to be decided upfront. Don't know what the further plans in ESLint are. I guess that separate class will go away.

[tigrr]

Thank you. I think we can workaround this so far, by enabling the flat config on per workspace basis rather than globally.

[ryancwalsh]

@dbaeumer and @dburles You seem to know a lot about Eslint and VSC, and I wonder if you know the answer to https://stackoverflow.com/questions/76184736/vscode-no-longer-shows-eslint-errors-after-i-switched-to-eslint-flat-config-alt

I appreciate your help!

[sharh]

with "eslint.experimental.useFlatConfig": true, the config file .eslintrc.js does not work, vscode-eslint throw error:

while disable useFlatConfig works well

[dbaeumer]

@sharh does validation work for you in the terminal?

[kecrily]

@sharh I think it's about https://github.com/microsoft/vscode-eslint/pull/.