vscode-eslint: VSCode doesn't run ESLint Server with eslint.config.js flat config
VSCode is not running ESLint server on my codebase when using the new ESLint Flat Config eslint.config.js.
I have the following setup:
- The app is a Vite + Svelte + TS starter
- The issue happens in a monorepo (pnpm workspace)
- ESLint correctly lint my codebase when invoked via the CLI
pnpm eslint src - Packages has been reinstalled several times with
pnpm installand the ESLint server has been restarted - VSCode doesn’t run ESLint server on my codebase when using the flat config
My codebase structure
/client
/.vscode
settings.json
/src
main.ts
App.svelte
eslint.config.js
package.json
vite.config.ts
package.json
pnpm-workspace.yaml
ESLint correctly lint my codebase with pnpm eslint src and find errors in both src/main.ts and src/App.svelte.
But VSCode is unable to run the ESLint server with eslint.config.js located at the workspace root
The Output console says
[Info - 5:43:59 PM] ESLint server is starting.
[Info - 5:44:00 PM] ESLint server running in node v16.14.2
[Info - 5:44:00 PM] ESLint server is running.
[Info - 5:44:00 PM]
Failed to load the ESLint library for the document <project_root>/client/src/App.svelte
To use ESLint please install eslint by running pnpm install eslint in the workspace folder test
or globally using 'pnpm install -g eslint'. You need to reopen the workspace after installing eslint.
Alternatively you can disable ESLint for the workspace folder test by executing the 'Disable ESLint' command.
My settings.json located at client/.vscode/settings.json
{
"css.lint.unknownAtRules": "ignore",
"scss.lint.unknownAtRules": "ignore",
"eslint.enable": true,
"eslint.packageManager": "pnpm",
"eslint.format.enable": true,
"eslint.validate": [
"javascript",
"typescript",
"svelte"
],
"eslint.experimental.useFlatConfig": true,
"eslint.workingDirectories": [{ "mode": "auto" }],
"eslint.options": {
"overrideConfigFile": "./eslint.config.js"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 26
- Comments: 73 (28 by maintainers)
Flat configs are still experimental and need to be enabled in VSCode ESLint using the
eslint.experimental.useFlatConfigsetting. I could not find such a setting in the repositories. Do you enable it?Works for me
Please note that in ESLint extension you still need to enable flat config. The reason is that we need to call different API in ESLint and we need to find a way to abstract that. The setting is:
I just copied an old
.eslintrcand downgraded to8.0.0and things are working. This team’s only job is to maintain this part of the software. Do better.Still having issues with this @dbaeumer
The same problem 😢
I’m still having this issue on ESLint extension v2.4.2 with flat ESLint config and
useFlatConfigset to true.You’re looking for the people over at eslint who changed how the config is looked up. “This team” is as far as I can tell one person and you certainly aren’t paying them.
This is not experimental you morons, it is the default output for the configuration file with
eslint --initnow. The current behavior of simply not recognizing the new config, without showing any kind of warning, is unjustifiable.The old config files are now deprecated and are unrecognized on latest:
https://eslint.org/docs/latest/use/configure/configuration-files-deprecated
I tested this with the vscode-eslint 3.0.3 alpha together with Yarn 4.1.1 in PnP mode using Eslint 8.57.0 and for me it seems like imports are not found when using a mjs config file but it works with a CommonJS config file.
With the mjs config I get an error like this one for whatever the first import happen to be in eslint.config.mjs:
The mjs config file works fine when I run eslint from the cli though and I also ran
yarn dlx @yarnpkg/sdksafter updating eslint and the extension but it didn’t make any difference.Like @Elxx said it does work if I change the config file to CommonJS instead so it seems like the problem lies in that it can’t handle config files that are ES modules?
The only eslint related settings I’ve set in .vscode\settings.json are these now that
eslint.experimental.useFlatConfigisn’t needed any longer:RESOLVED - I’m leaving the comments below in case they help anyone in the future, but I think I’ve resolved this issue. After adding the following to my VSCode settings, it seems to be working correctly. Now to see if I can get it to work with the new flat config!
@dbaeumer - First of all, thank you so much for your help! I’ve been fighting with trying to get this working all week and it’s probably something really obvious that I’m missing, but I just can’t put my finger on it…
So first, the new folder structure:
A little bit of additional info - everything was working correctly before moving to a pnpm workspaces monorepo, both in the CLI and UI layers. To try and simplify the issue, I reverted back to the old eslint config and get that working first (as I’m now having issues with getting that to even work in the UI).
Here’s all the relevant config files:
– ROOT CONFIG FILES –
– TYPESCRIPT CONFIG FILES –
– ESLINT CONFIG FILES –
– APP CONFIG FILES –
So now what’s happening is there seems to be a discrepancy between the CLI and UI on where the tsconfig.json file lives… with the config above, the CLI tool seems to lint the project correctly, however the UI is looking for a tsconfig file in the root directory. So when I update the eslint config file to point to
apps/dealer/tsconfig.jsonthen the UI will lint, but the CLI stops working.Also, I’m not sure if I’m better off trying to keep the config in separate packages the way I have it above or going back and just keeping all of the config in the root directory? While I only have a single app at the moment, I’m trying to prepare the repo to add several more apps and packages and I want to keep it as simple as possible to share both eslint and typescript across the entire project. Any help you could offer would be so appreciated! Thank you!
I created https://github.com/yarnpkg/berry/issues/6219 to track the mjs load failure in yarn.
"eslint.experimental.useFlatConfig": true,This works for me but it seems to disable legacy config files. Would be nice if I could have both options on but I guess that’s not possible?Had a similar problem, adding rules:
solved the issue
It does recognize it (you moron) as long as you set your working path correctly.
Yes, and this is what is happening. By setting
$env:NODE_PATH=".yarn/sdks"node is instructed to load node modules from.yarn/sdkswhich should inject the loader according to: https://yarnpkg.com/getting-started/editor-sdksThe
yarn dlx @yarnpkg/sdks vscodesets theeslint.nodePathsetting (see https://github.com/davidkarlsson/vscode-eslint-test/blob/main/.vscode/settings.json#L6) which the extension then passes on tonode.The extension itself doesn’t know anything about yarn pnp.
I can open a bug report in the Yarn repo for this but are you sure this is an problem with Yarn and not vscode-eslint or eslint? It looks like your repro works in node if you specify .pnp.loader.mjs as a loader which you always have to do with Yarn according to this comment: https://github.com/yarnpkg/berry/issues/5241#issuecomment-1414226426:
It also seems to work if you start node with
yarn nodewithout a loader argument because then the loader is registered automatically I think. I thought that this loader was injected in the node runtime by the vscode eslint sdk package that gets installed when you run theyarn dlx @yarnpkg/sdks vscodecommand so that it should be able to use ESM? From https://yarnpkg.com/getting-started/editor-sdks:“The SDKs workaround that by generating indirection packages. When required, these indirection automatically setup the loader before forwarding the require calls to the real packages.”
I was able to reproduce this. It seems that you need to have
corepackenabled so that yarn does the right thing.This being said I do think that this comes from some PnP stuff yarn does. I can reproduce the same problem using simple eslint API. The following code:
PowerShell:
This is what yarn does when running the editor SDK for VS Code (see https://yarnpkg.com/getting-started/editor-sdks)
produces the exact same error:
IMO this is something the yarn people have to look into.
@dbaeumer That is strange because I get the same error with 3.0.5 as I did with 3.0.3 with the mjs config. test.ts doesn’t show the linting errors and the output log logs this error:
Perhaps there’s something with my environment or Yarn installation that’s causing this issue then. I just don’t understand what it could be. I also noticed @bppdddqqqq had the same problem as me according to a comment here: https://github.com/microsoft/vscode-eslint/issues/1644#issuecomment-2001964277 but I think that was with an older version.
Ran into the same issue today, weirdly enough what solved it for me was renaming the
eslint.config.jsfiles in my workspace projects toeslint.config.cjs(and porting them to CommonJS by changing import to require, export to module.exports etc) and adding this to my workspace config:Seems like the .js and .mjs variants don’t get loaded properly by the extension but .cjs works fine. My packages all have
"type": "module"in their package.json so everything else is ESM except this…locateConfigFileToUse()is getting passed the root directory that vscode has opened instead of the directory that containspackage.json. If you use vscode to open the directory that haspackage.jsonimmediately inside it as the root it will find the file (or an even deeper directory, since it goes up until it finds the config).You need to set the
eslint.workingDirectoriessetting correctly if you are encountering this. Eslint used to look for a config file relative to the file you are linting, now I guess this call is required. I’m not sure what, if anything, this extension can do to make this less painful in the future, it kind of seems like eslint screwed us over.Just wanted to share what I have that is working:
Thanks! Moving it to local settings did make that error go away, but the linting still isn’t showing in the UI.
@dbaeumer - Sorry for the delay, it’s been a crazy day, but I just updated that repo to reproduce the same issue.
So currently I have it setup to use the new flat config and it lints from the command line, but on the UI, I am getting the same “unexpected key” error as show above. I also have it setup to swap to the old .eslintrc* style config and that works both on the command line and UI. If you want to switch between the two, in
/packages/eslint-config/package.jsonchange the “main” export file tooldConfig.cjs, then in/apps/client/package.jsonupdate the lint script to use flat config to be false and then (obviously) disable the setting in VSCode and restart the ESLint server and you will see that both sides work fine. However, with the flat config, the CLI works, but the UI gives that error.Hopefully that makes sense, but just shout at me if I can provide any additional information. And thank you again for investigating this issue!
I has been excluded by my .gitignore but I do have it both of my repos. I have updated the repos with my
.vscode/settings.jsonEDIT
I have tried to open VSCode at
/testwhich is not a monorepo, just the folder where I have both of my monorepos. ESLint doesn’t work at all.It seems like the extension has issue traversing the project tree to look for the closest
eslint.config.js