VSCode doesn't run ESLint Server with eslint.config.js flat config #1620
Comments
|
For an easier investigation, it would be good to provide a repo with a minimal project that reproduces the issue. |
Context
First Repo
VSCode seems to work for all subprojects but not for the root (open Second Repo
VSCode doesn't seems to work in this case (open each |
|
Flat configs are still experimental and need to be enabled in VSCode ESLint using the |
|
I has been excluded by my .gitignore but I do have it both of my repos. I have updated the repos with my EDITI have tried to open VSCode at It seems like the extension has issue traversing the project tree to look for the closest |
|
Regarding Svelte files: they are currently not autodetected in the ESLint extension. See #1468. So you need to configure the |
|
For there second repro this is very likely a working directory issue. Have you tried to list the playground directories containing a ESLint is very sensitive in regards to the working directory used when searching for configuration files. |
|
I have tried multiple options "eslint.workingDirectories": [
{ "pattern": "./playground/*/" }
],"eslint.workingDirectories": ["...", "./playground/20-react-ts", "..."]"eslint.workingDirectories": [{ "mode": "auto" }]"eslint.workingDirectories": [{ "mode": "location" }]When running eslint cli I get this error ~/d/t/eslint-flat-vscode-playground main ❯ pnpm eslint .
Oops! Something went wrong! :(
ESLint: 8.36.0
ESLint couldn't find a configuration file. To set up a configuration file for this project, please run:
npm init @eslint/config
ESLint looked for configuration files in /Users/eliasaboukhalillanvin/dev/test/eslint-flat-vscode-playground/dist and its ancestors. If it found none, it then looked in your home directory.
If you think you already have a configuration file or if you need more help, please stop by the ESLint Discord server: https://eslint.org/chat |
|
The ESLint extension depends on a proper setup ESLint. If running ESLint in the terminal fails it will very likely fail with the extension as well. What I would recommend is to get it working in the terminal and then take it to the extension. If it works in the terminal but not in the extension I can definitely have a look. |
|
The same problem 😢 |
|
I am also running into a the same (or at least very similar) issue. I am able to run ESLint in the terminal, however I am not seeing the errors in the VSCode editor using the new flat config. I created a quick sample repo so you can take a look: https://github.com/tdfranklin/eslint-test If you run pnpm lint, you should see 3 errors in App.tsx, however when I open the file in VSCode, I don't see any errors or warnings. |
|
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: |
|
@dbaeumer It works! Thanks a lot! |
|
Very strange - I do have the flag enabled, but I'm getting this error in the output:
I thought it might be something to do with it being a monorepo and not ignoring all node_modules folder's, but maybe on of my other VSCode settings is blocking it? |
|
@tdfranklin does it work in the terminal when executing |
|
@dbaeumer - Yes, when I run it in the terminal, I don't see any errors. Today I'm going to move my tsconfig and eslint config to shared workspace packages instead of having them in the root directory and see if that changes anything, so I'll update once I finish if I'm still seeing errors. |
|
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! "eslint.workingDirectories": [
{ "pattern": "./apps/*/" },
{ "pattern": "./packages/*/" }
]@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 -- package.json
{
"name": "trinity-frontend",
"version": "0.0.1",
"description": "",
"main": "index.js",
"scripts": {
"dealer": "pnpm --filter @trinity/dealer",
"clean": "find ./ -name node_modules -type d -exec rm -rf {} +"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"prettier": "^2.8.4",
"typescript": "^4.9.5"
}
}
pnpm-workspace.yaml
packages:
- apps/*
- packages/*-- TYPESCRIPT CONFIG FILES -- /packages/tsconfig/package.json
{
"name": "@trinity/tsconfig"
}
/packages/tsconfig/base.json
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"outDir": "dist",
"incremental": true,
"noImplicitAny": true,
"sourceMap": true,
"importHelpers": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true
},
"exclude": ["node_modules"]
}-- ESLINT CONFIG FILES -- /packages/eslint-config-custom/package.json
{
"name": "eslint-config-custom",
"main": "index.js",
"version": "1.0.0",
"dependencies": {
"@typescript-eslint/eslint-plugin": "^5.53.0",
"@typescript-eslint/parser": "^5.53.0",
"eslint": "^8.35.0",
"eslint-config-prettier": "^8.6.0",
"eslint-import-resolver-typescript": "^3.5.3",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-simple-import-sort": "^10.0.0"
}
}/packages/eslint-config-custom/index.js
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 'latest',
sourceType: 'module',
project: './tsconfig.json',
},
extends: [
'eslint:recommended',
'plugin:jsx-a11y/recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:react/jsx-runtime',
'plugin:import/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
],
plugins: ['react', 'prettier', 'import', 'jsx-a11y', '@typescript-eslint', 'simple-import-sort'],
settings: {
react: {
version: 'detect',
},
'import/resolver': {
typescript: {
paths: './tsconfig.json',
alwaysTryTypes: true,
},
},
},
globals: {
React: true,
JSX: true,
__APP_VERSION__: true,
},
rules: {REMOVED FOR BREVITY},
}-- APP CONFIG FILES -- /apps/dealer/package.json
{
"name": "@trinity/dealer",
"version": "3.2.7",
"main": "index.tsx",
"private": true,
"dependencies": { REMOVED FOR BREVITY },
"devDependencies": {
"@trinity/tsconfig": "workspace:^",
"eslint-config-custom": "workspace:^",
},
}
/apps/dealer/tsconfig.json
{
"compilerOptions": {
"baseUrl": "src"
},
"extends": "@trinity/tsconfig/base.json",
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
/apps/dealer/.eslintrc.json
{
"root": true,
"extends": ["custom"]
}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 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! |
|
@dbaeumer - Ok, sorry for the sidetrack, but we're back to the original issue. So after getting everything working in the monorepo with the old .eslintrc* file, I tried moving back to the new flat config and am running into the same issue as above. When running the CLI, it successfully lints the project:
However, I am getting the same error in the ESLint console for the UI:
Do you have any idea what's going on here? Perhaps some other setting I need to tweak in VSCode? (And yes, I made sure to turn back on the flat config option in VSCode):
|
|
Can I reproduce that in the repository you provided? |
|
@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 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 have a very similar issue. In my case I want to use a flat config AND yarn with pnp. Does not work. Only if I switch to |
|
@levino yarn with pnp needs special setup on the yarn side to work with VS Code. Have you followed the steps here: https://yarnpkg.com/getting-started/editor-sdks |
|
@tdfranklin I pulled from that repository and when trying to run eslint in the terminal it actually fails very early with I did run Anything missing? |
|
Yes. I use a legacy config now with pnp and it works fine. |
|
@dbaeumer - That's very odd, update For simplicity, I just removed the code that was using globals as it's not part of this issue, so if you pull down the changes, you shouldn't have that issue anymore. Thank you! |
|
@tdfranklin I pulled and the problem with that setup is now that you need to define a working directory since running eslint in the workspace folder root doesn't work either. It produces whereas this works: So you need to specify |
|
|
I did set that up:
However, I am still getting the same error:
|
|
@tdfranklin hmm, that is very wired since I could get the test repository working with this setup without any problem. What is wired as well is the fact that the error happens in ESLint npm itself when they read the flat config not in the extension code. When you run it is the terminal are you using something like this: Don't go through |
|
@dbaeumer Yea, it's very strange. For me, the CLI tool works fine (both with the method you listed above and just using I'm not sure if the environment might be a factor, but I am using WSL on Windows 10, so maybe that is causing the issue? |
|
Here is what I did:
Any additional info? |
|
I thought that would be enough to reproduce the issue so I'm not sure what additional info I can give you unfortunately. I've tried running the repro on multiple computers now (one running win10 and the other win11) but I get the same error on both of them so I'm at a loss of what could be the cause of this. Do you have any ideas? The only thing I could think of was the node version so I tried setting |
|
I was able to reproduce this. It seems that you need to have 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) const library = require(`eslint`);
async function main() {
const eslint = new (await library.loadESLint({ useFlatConfig: true }))();
const report = await eslint.lintText(`var test = "hello";`);
console.log(report);
}
main().catch((error) => {
console.error(error);
process.exit(1);
});produces the exact same error: IMO this is something the yarn people have to look into. |
|
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: yarnpkg/berry#5241 (comment): It also seems to work if you start node with "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." |
Yes, and this is what is happening. By setting The The extension itself doesn't know anything about yarn pnp. |
|
Thanks @dbaeumer. I understand the issue better now. I also found another issue about more or less the same problem in #1602 where they fix the loader issue by registering it with the eslint.execArgv option. So I can get linting working with the mjs config file by setting the loader argument like this: But hardcoding the path there is not really a solution so I'm guessing all we can do is wait for either vscode to implement support for using variables in settings? Or do you think this could be fixed in Yarn somehow without having to use the node loader argument? |
|
I am still the opinion that this should be addressed in Yarn / yarn dlx. This worked before and has only problems when trying to load mjs config files in ESLint. I don't know a lot about yarn pnp but my guess is that the loading works differently when doing |
|
VS Code itself has an issue to support variables in settings which would be the right approach to avoid the hardcoded absolute path. |
|
I created yarnpkg/berry#6219 to track the mjs load failure in yarn. |
|
This is not experimental you morons, it is the default output for the configuration file with The old config files are now deprecated and are unrecognized on latest: https://eslint.org/docs/latest/use/configure/configuration-files-deprecated |
|
It does recognize it (you moron) as long as you set your working path correctly. |
|
I just copied an old |
|
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. |
Thank you I didn't noticed I upgraded eslint by mistake. Go back from 9.1 to 8.31 solved this issue (or I think go step by step trough Migrate to v9.x) |
For those who are still having the same problem, this solution has directly fixed it for me |
|
I'm using the ESLint extension 3.0.5 and the issue still exists with whatever It works fine with |
|
For yarn pnp please see: yarnpkg/berry#6219. It basically doesn't work with the npm package of eslint in a non VS Code example either. |
|
My package is |
|
Would it be possible to update this extension to support |
|
This works for me in my examples: 
@caleb531 could you please provide me with a GitHub repository I can clone with a minimal setup that demos the problem you are seeing? |
|
@dbaeumer Well, I have a SvelteKit project, and after further testing I can confirm that VS Code with Here is my repository (branch: eslint-v9): Interestingly, when I run I made sure I have the Eslint: Use Flat Config setting enabled in VS Code. I have also made sure that The Output pane just shows: Here is my import js from '@eslint/js';
import ts from 'typescript-eslint';
import svelte from 'eslint-plugin-svelte';
import prettier from 'eslint-config-prettier';
import globals from 'globals';
/** @type {import('eslint').Linter.Config[]} */
export default [
js.configs.recommended,
...ts.configs.recommended,
...svelte.configs['flat/recommended'],
prettier,
...svelte.configs['flat/prettier'],
{
languageOptions: {
globals: {
...globals.browser,
...globals.node
}
}
},
{
files: ['**/*.svelte'],
languageOptions: {
parserOptions: {
parser: ts.parser
}
}
},
{
ignores: [
'.DS_Store',
'node_modules',
'build',
'.svelte-kit',
'.vercel',
'package',
'.env',
'.env.*',
'!.env.example',
'pnpm-lock.yaml',
'package-lock.json',
'yarn.lock'
]
}
];Please let me know if I'm missing anything crucial here. |
|
I figured it out! I just had to set the {
// ...
"eslint.validate": ["svelte"]
// ...
}For anyone who comes across this same issue, also take a look at #1736, which explains the difference between the Hopefully there are no drawbacks to doing it this way, even though the error shows up correctly in my Problems panel: |
|
The |
|
@caleb531 This solution also works for me, but doesn't feel ideal. I want my eslint extension to use the exact same rules as defined in I have a pretty standard project created with sveltekit, and |
|
@kjmj Can you please clarify what you're asking? What's working for you, and what isn't working? |
|
@caleb531 I want VS Code to use my |
|
@kjmj @kjmj If you commit a |
|
I was able to get this working with |
and others
VSCode is not running ESLint server on my codebase when using the new ESLint Flat Config
eslint.config.js.I have the following setup:
pnpm eslint srcpnpm installand the ESLint server has been restartedMy codebase structure
ESLint correctly lint my codebase with
pnpm eslint srcand find errors in bothsrc/main.tsandsrc/App.svelte.But VSCode is unable to run the ESLint server with
eslint.config.jslocated at the workspace rootThe Output console says
My
settings.jsonlocated atclient/.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 } }The text was updated successfully, but these errors were encountered: