Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vscode-eslint extension not working on latest version of VSCode, v1.90.0 #1856

Closed
D-Maher opened this issue Jun 7, 2024 · 27 comments
Closed
Labels
info-needed Issue requires more information from poster upstream

Comments

@D-Maher
Copy link

D-Maher commented Jun 7, 2024

Environment

Operating System: macOS
VSCode Version: 1.90.0
vscode-eslint Version: 2.4.4
ESLint Version: 8.45.0
eslint-plugin-prettier Version: 5.0.0

Description

This extension does not appear to be formatting code when setting "source.fixAll.eslint" in VSCode's editor.codeActionsOnSave settings. When saving a file, the extension hangs indefinitely without much indication in the ESLint Output of what could be going on.

This is an issue I've noticed happening in the last two days or so, and it seems to coincide with updating to the May 2024 release of VSCode, v1.90.0. When downgrading to VSCode v1.89.1, the issue disappears entirely.

I'm not sure if this is an issue with compatibility between the extension and the latest version of VSCode or if this is a bug in VSCode itself, but I'm inclined to think it's the former since other code actions I have configured to run on save (e.g. "source.organizeImports") run just fine on VSCode v1.90.0.

Additional Information

The extension appears to start up just fine based on what I'm seeing in the ESLint Output:

[Info  - 11:18:37 AM] ESLint server is starting.
[Info  - 11:18:38 AM] ESLint server running in node v20.9.0
[Info  - 11:18:38 AM] ESLint server is running.
[Info  - 11:18:39 AM] ESLint library loaded from: /my/obfuscated/path/to/.yarn/sdks/eslint/lib/api.js

Note

This particular project is on Yarn v4.0.2 so there is an ESLint SDK installed, hence the path in the logs above.

But when saving a file, I see this pop-up at the bottom right of VSCode that seems to hang there indefinitely:
code_actions_hanging

I've tried hitting 'Cancel' and then running the ESLint: Restart ESLint Server command, but then I get the following pop-up:
restart_failed

And the ESLint output displays the following:

[Error - 11:22:35 AM] Restarting client failed
Error: Stopping the server timed out
    at /my/obfuscated/path/to/.vscode/extensions/dbaeumer.vscode-eslint-2.4.4/client/out/extension.js:1:105150
    at b.restart (/my/obfuscated/path/to/.vscode/extensions/dbaeumer.vscode-eslint-2.4.4/client/out/extension.js:1:270303)

I've also run an extension bisect in VSCode and that did not identify any other extensions as the potential culprit here.

I'm happy to provide additional information if helpful.

@cwsault
Copy link

cwsault commented Jun 7, 2024

Seeing this as well since the VSCode update; seems to be related to using eslint-plugin-prettier & yarn's PNP loading.

I can reproduce it on a fresh project with the following steps, on multiple systems --

  1. yarn create vite some-project-name
  2. choose react & TS; cd into project
  3. add "packageManager": "yarn@4.2.2", to package.json
  4. yarn or yarn install
  5. yarn add --dev eslint-plugin-prettier eslint-config-prettier prettier
  6. add 'plugin:prettier/recommended' to extends block of .eslintrc.cjs
  7. yarn dlx @yarnpkg/sdks vscode
  8. open project in VSCode; edit & attempt to save a .ts or .tsx file

You'll also notice if you go to VSCode's Help -> Process Explorer that upon open a TS file, the ESLint server will die immediately upon starting (listed as 'defunct') -- probably related to #1855 as well (in fact, the server dying is the real issue; it occurs even if you don't have fix-on-save enabled. based on logs it seems to happen while still loading)

If plugin:prettier/recommended is not included in the eslintrc then the problem does not occur. If yarn is configured to use node_modules installation ( echo nodeLinker: node-modules >> .yarnrc.yml ) then the problem also does not occur. Also no issue when using npm instead of yarn.

@D-Maher
Copy link
Author

D-Maher commented Jun 7, 2024

@cwsault, good info! I've got eslint-plugin-prettier configured too.

@jrmybtlr
Copy link

jrmybtlr commented Jun 9, 2024

Interesting. I didn't have prettier or prettier extensions installed, but I removed an older .prettierrc and restarted ESLint, and it started working.

I'm almost sure it's just a coincidence.

@ottobonn
Copy link

We are seeing the same issue after updating to VSCode 1.90, running on Mac OS, using yarn PNP with eslint and prettier and "editor.codeActionsOnSave": { "source.fixAll": "explicit" } in our project settings. When saving TypeScript files, the editor waits indefinitely at "Getting Code Actions."

I can also confirm that when restarting the ESLint server, it fails with "stopping the server timed out," but before explicitly trying to restart it, I don't see errors in its output.

@dbaeumer
Copy link
Member

This is very likely related to yarnpkg/berry#6219.

Can you see if upgrading to yarn 4.3 changes anything.

@dbaeumer
Copy link
Member

I tired it wit yarn 4.3.0 and I couldn't make the server crash.

@dbaeumer dbaeumer added the info-needed Issue requires more information from poster label Jun 11, 2024
@joonaathaan
Copy link

I've had the same issue since VSCode May release last Thursday. I've tested in both cjs and mjs, I'm using flat config with yarn pnp.

Apple Silicon, VSCode 1.90, Yarn Berry v4.3.0
"eslint": "^9.4.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "5.1.2", (tested 5.1.3)
"prettier": "3.1.1", (tested 3.3.1 and 3.3.2)
"typescript": "5.4.3"

// eslint.config.mjs
import eslintPluginPrettier from 'eslint-plugin-prettier/recommended';
export default [eslintPluginPrettier];

After 2-3 days of research i decided to follow the debugging technique since it was my last option (here)
It seems that whenever 'prettier/prettier' rule is present, the prettier plugin crashes and causes the infinite hang on "Getting code actions from...". I've reached this conclusion after copying the recommended flat config from the prettier-plugin package and removing this rule stopped the crash.

// debugger logs
[Info  - 4:07:21 PM] ESLint library loaded from: /Users/xxxxxx/Work/xxxxxx/.yarn/sdks/eslint/lib/api.js
[Error - 4:07:22 PM] An unexpected error occurred:
[Error - 4:07:22 PM] Error: synckit tried to access ", but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Required package: " (via ""/Applications/Visual")
Required by: synckit@npm:0.8.8 (via /Users/xxxxxx/.yarn/berry/cache/synckit-npm-0.8.8-f5ee4a6dac-10c0.zip/node_modules/synckit/lib/)

Require stack:
- /Users/xxxxxx/.yarn/berry/cache/synckit-npm-0.8.8-f5ee4a6dac-10c0.zip/node_modules/synckit/lib/index.cjs
- /Users/xxxxxx/Work/xxxxxx/.yarn/__virtual__/eslint-plugin-prettier-virtual-288b79f086/3/.yarn/berry/cache/eslint-plugin-prettier-npm-5.1.2-d18bb6313f-10c0.zip/node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js
- /Users/xxxxxx/Work/xxxxxx/eslint.config.cjs
Occurred while linting /Users/xxxxxx/Work/xxxxxx/eslint.config.cjs:1
Rule: "prettier/prettier"
    at Function._resolveFilename (/Users/xxxxxx/Work/xxxxxx/.pnp.cjs:8329:13)
    at Function.resolve (node:internal/modules/helpers:136:19)
    at /Users/xxxxxx/.yarn/berry/cache/synckit-npm-0.8.8-f5ee4a6dac-10c0.zip/node_modules/synckit/lib/index.cjs:205:92
    at Array.some (<anonymous>)
    at setupTsRunner (/Users/xxxxxx/.yarn/berry/cache/synckit-npm-0.8.8-f5ee4a6dac-10c0.zip/node_modules/synckit/lib/index.cjs:204:68)
    at startWorkerThread (/Users/xxxxxx/.yarn/berry/cache/synckit-npm-0.8.8-f5ee4a6dac-10c0.zip/node_modules/synckit/lib/index.cjs:285:7)
    at Object.createSyncFn (/Users/xxxxxx/.yarn/berry/cache/synckit-npm-0.8.8-f5ee4a6dac-10c0.zip/node_modules/synckit/lib/index.cjs:90:18)
    at Program (/Users/xxxxxx/Work/xxxxxx/.yarn/__virtual__/eslint-plugin-prettier-virtual-288b79f086/3/.yarn/berry/cache/eslint-plugin-prettier-npm-5.1.2-d18bb6313f-10c0.zip/node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js:165:51)
    at ruleErrorHandler (/Users/xxxxxx/.yarn/berry/cache/eslint-npm-9.4.0-fe5b02f3aa-10c0.zip/node_modules/eslint/lib/linter/linter.js:1115:48)
    at /Users/xxxxxx/.yarn/berry/cache/eslint-npm-9.4.0-fe5b02f3aa-10c0.zip/node_modules/eslint/lib/linter/safe-emitter.js:45:58

Steps to reproduce

  • yarn init
  • yarn set version latest
  • yarn add typescript@5.4.3 eslint eslint-config-prettier eslint-plugin-prettier prettier --dev
  • yarn dlx @yarnpkg/sdks vscode
  • copy the same config, save and restart vscode, then edit and save any file
// eslint.config.mjs
import eslintPluginPrettier from 'eslint-plugin-prettier/recommended';
export default [eslintPluginPrettier];

Attaching the debugger from the cloned vscode-eslint project with the steps mentioned in the link above, it will produce the error stack above ONLY, without the hanging on saving.
Meanwhile running ESLint extension normally in a project without attaching the debugger will produce an infinite hang on any file unless cancelled the operation, opened or focused another file or edited the current file. Note that there's no error or warning on ESLint's output.
image

@cwsault
Copy link

cwsault commented Jun 11, 2024

Still occurs for me using "packageManager": "yarn@4.3.0", instead of 4.2.2

@shermify
Copy link

I tried a bunch of yarn versions including latest build and it doesn't work for me. I'm thinking it might have something to do with the jump to node 20 and changes to the way commonjs/ES modules are resolved.

@shermify
Copy link

shermify commented Jun 11, 2024

Here is a simple reproduction with 1 file. Just need to run yarn install. When you open index.js, you don't get any formatting highlights for prettier and when you try to save, it freezes up. This is on VSCode 1.90

https://github.com/shermify/eslint-plugin-repro

@dbaeumer
Copy link
Member

I was able to reproduce this and I am pretty confident that this has nothing to do with the ESLint extension itself. The underlying problem is that prettier is using the syncKit to call sync into a worker which blocks the eslint server. For some reason the worker newer return and therefore the server is hanging here:

Image

@dbaeumer
Copy link
Member

Prettier creates the sync function with:

              prettierFormat = require('synckit').createSyncFn(
                require.resolve('./worker'),
              );

where require.resolve('./worker') resolve to

'/workspaces/eslint-plugin-repro/.yarn/__virtual__/eslint-plugin-prettier-virtual-bc1e252fbd/0/cache/eslint-plugin-prettier-npm-5.1.3-496c3b84df-f45d5fc1fc.zip/node_modules/eslint-plugin-prettier/worker.js'

It looks like that this makes the worker fail which makes the Atomics.wait never return.

@dbaeumer
Copy link
Member

This is nothing I can fix in the ESLint extension itself. I opened yarnpkg/berry#6335

Since things seemed to work with Node 18.18.2 you could install that version and use the eslint.runtime setting to point to that version.

@shermify
Copy link

If anyone needs to fix this immediately, you can use this yarn patch on eslint-plugin-prettier. Basically just change the dynamic import in worker.js to a require and point it to prettier/index.cjs

diff --git a/eslint-plugin-prettier.js b/eslint-plugin-prettier.js
index 74cd8c0497dadb3a79226bd059845a0fb662a697..cc7b6f7bcb2587d541e042c9e25fd76cf43936f8 100644
--- a/eslint-plugin-prettier.js
+++ b/eslint-plugin-prettier.js
@@ -164,7 +164,7 @@ const eslintPluginPrettier = {
             if (!prettierFormat) {
               // Prettier is expensive to load, so only load it if needed.
               prettierFormat = require('synckit').createSyncFn(
-                require.resolve('./worker'),
+                require.resolve('./worker.js'),
               );
             }
 
diff --git a/worker.js b/worker.js
index 8a8a802ca719a55f4d2ae526eb54e712edfd7455..06269d1c27ca49fd9c7da320318872aa7f40f4f5 100644
--- a/worker.js
+++ b/worker.js
@@ -7,11 +7,10 @@
  */
 
 const { runAsWorker } = require('synckit');
-
+const prettier = require('prettier/index.cjs')
 /**
  * @type {typeof import('prettier')}
  */
-let prettier;
 
 runAsWorker(
   /**
@@ -32,9 +31,6 @@ runAsWorker(
     },
     eslintFileInfoOptions,
   ) => {
-    if (!prettier) {
-      prettier = await import('prettier');
-    }
 
     const prettierRcOptions = usePrettierrc
       ? await prettier.resolveConfig(onDiskFilepath, {

@joonaathaan
Copy link

I've tried the patch, it didn't seem to work sadly.
In the meantime downgrading vsc to april's release seems to be the best option, everything is working properly since it's on node 18.18.2

@shermify
Copy link

shermify commented Jun 13, 2024

You also need to run yarn unplug eslint-plugin-prettier. I'm not sure why it also needs to be unplugged, but it should work unless this is an issue across more plugins, which is possible

@PavelOparin
Copy link

Hello everyone. For me setting up "eslint.runtime": "node" helped to fix this problem without removing or fixing prettier plugin. Without this settings eslint used node 20.* when I actually have 18.14 and this settings force him to use my version and looks like this solves problem.

@hanyufoodles
Copy link

By unplugging with yarn unplug eslint-plugin-prettier and applying the patch from @shermify, the extension v3.0.10 works again under node v20 and yarn pnp.

pkirilin added a commit to pkirilin/food-diary that referenced this issue Jun 28, 2024
kris7t added a commit to kris7t/refinery that referenced this issue Jul 5, 2024
pkirilin added a commit to pkirilin/food-diary that referenced this issue Jul 7, 2024
* Added input method tabs for NoteInputDialog

* Hotfix eslint

microsoft/vscode-eslint#1856

* Refactor NoteInputDialog in a new component

* Add reusable AddOrEditNoteFlow component

* Setup tests and dsl for AddOrEditNoteFlow

* Fixed act warning in AddOrEditNoteFlow tests

* Moved tests from NoteInputDialog to AddOrEditNoteFlow

* Use AddOrEditNoteFlow in EditNote

* Added aider

* Added reset for add/edit note mutations

* Remove old NoteInputDialog

* Upload and preview photo in AddOrEditNoteFlow

* Merge repeated note props into FormValues prop

* Hide tabs for edit note dialog

* Implement recognize note in "From photo" tab

* Remove unused components and hooks

* Use type alias for productAutocompleteInput

* Fix dialog and tab paddings

* WIP: Fix clear note form after successful edit

* Fixed focus trap issue

* Fixed paddings
@savolkov
Copy link

This is quite an issue, any plans here?

@fmal
Copy link

fmal commented Jul 17, 2024

@savolkov this has been fixed with latest release of synckit (https://github.com/un-ts/synckit/releases/tag/v0.9.1) which is a dependency of eslint-plugin-prettier. Just make sure you have synckit@0.9.1 in your packages. If reinstalling eslint-plugin-prettier package doesn't fetch latest synckit then you can enforce it through yarnresolutions like this:

"resolutions": {
  "synckit": "^0.9.1"
}

@D-Maher
Copy link
Author

D-Maher commented Jul 17, 2024

Interesting. I now get a different issue after both upgrading eslint-plugin-prettier to the latest (v5.2.1) and adding that "synckit": "^0.9.1" entry to my "resolutions". Here's my ESLint extension output:

[Error - 9:28:25 AM] An unexpected error occurred: undefined Occurred while linting /obfuscated/path/to/MyComponent.tsx:1 Rule: "prettier/prettier".
[Error - 9:28:29 AM] Request textDocument/formatting failed.
  Message: Request textDocument/formatting failed with message: undefined
Occurred while linting /obfuscated/path/to/MyComponent.tsx:1
Rule: "prettier/prettier"
  Code: -32603

I've got "prettier/prettier": "warn" configured in my ESLint config for .tsx files, and removing all Prettier-related configuration in my ESLint config allows this extension to work as expected. Really a bummer since my project is set up to run Prettier through ESLint, but what I'm observing feels more like a prettier or eslint-plugin-prettier issue at this point.

Just wanted to leave this here in case others run into this too.

Here's my latest environment, FWIW
Operating System: macOS
Software Version
VSCode v1.91.1
vscode-eslint v3.0.10
eslint v8.46.0
eslint-plugin-prettier v5.2.1
prettier v3.3.3

Aside from eslint, all of the above are latest versions at the time of writing this. It's possible that upgrading eslint to v9 is the key here.

@akhmadullin
Copy link

@D-Maher, I have similar problem after adding "synckit": "^0.9.1" to resolutions

My project also runs Prettier through ESLint

But text error a little bit shorter, than yours

[Error - 09:50:52] An unexpected error occurred: undefined Occurred while linting /path/to/my/file.ts:1 Rule: "prettier/prettier".

Operating System: macOS

Software Version
VSCode v1.91.1
vscode-eslint v3.0.10
eslint v8.56.0
eslint-plugin-prettier v5.2.1
eslint-config-prettier v9.1.0
prettier v3.3.3

@fmal
Copy link

fmal commented Jul 18, 2024

Interesting. I now get a different issue after both upgrading eslint-plugin-prettier to the latest (v5.2.1) and adding that "synckit": "^0.9.1" entry to my "resolutions". Here's my ESLint extension output:

[Error - 9:28:25 AM] An unexpected error occurred: undefined Occurred while linting /obfuscated/path/to/MyComponent.tsx:1 Rule: "prettier/prettier".
[Error - 9:28:29 AM] Request textDocument/formatting failed.
  Message: Request textDocument/formatting failed with message: undefined
Occurred while linting /obfuscated/path/to/MyComponent.tsx:1
Rule: "prettier/prettier"
  Code: -32603

I've got "prettier/prettier": "warn" configured in my ESLint config for .tsx files, and removing all Prettier-related configuration in my ESLint config allows this extension to work as expected. Really a bummer since my project is set up to run Prettier through ESLint, but what I'm observing feels more like a prettier or eslint-plugin-prettier issue at this point.

Just wanted to leave this here in case others run into this too.

Here's my latest environment, FWIW

Could you see if this minimal example also fails in your environment: https://github.com/fmal/eslint-prettier-test ? I updated bunch of projects running eslint@8 to latest eslint-plugin-prettier with quite complex configs and haven't experienced the issue you described

darazuiscaptain added a commit to darazuiscaptain/food-diary-asp-react that referenced this issue Aug 8, 2024
* Added input method tabs for NoteInputDialog

* Hotfix eslint

microsoft/vscode-eslint#1856

* Refactor NoteInputDialog in a new component

* Add reusable AddOrEditNoteFlow component

* Setup tests and dsl for AddOrEditNoteFlow

* Fixed act warning in AddOrEditNoteFlow tests

* Moved tests from NoteInputDialog to AddOrEditNoteFlow

* Use AddOrEditNoteFlow in EditNote

* Added aider

* Added reset for add/edit note mutations

* Remove old NoteInputDialog

* Upload and preview photo in AddOrEditNoteFlow

* Merge repeated note props into FormValues prop

* Hide tabs for edit note dialog

* Implement recognize note in "From photo" tab

* Remove unused components and hooks

* Use type alias for productAutocompleteInput

* Fix dialog and tab paddings

* WIP: Fix clear note form after successful edit

* Fixed focus trap issue

* Fixed paddings
@D-Maher
Copy link
Author

D-Maher commented Aug 21, 2024

Could you see if this minimal example also fails in your environment: https://github.com/fmal/eslint-prettier-test ? I updated bunch of projects running eslint@8 to latest eslint-plugin-prettier with quite complex configs and haven't experienced the issue you described

That example repo does seem to work just fine in my environment, so it seems like my issue may be more specific to my particular setup. I'm running with a different version of Yarn (v.4.0.2) and using the Yarn SDKs, either of which could be a culprit for me.

@retrixe
Copy link

retrixe commented Aug 22, 2024

[Error - 09:50:52] An unexpected error occurred: undefined Occurred while linting /path/to/my/file.ts:1 Rule: "prettier/prettier".

I was experiencing this issue, and it seems to have been resolved after updating Yarn to 4.4.0 from 4.1.1, then rerunning yarn dlx @yarnpkg/sdks vscode to re-create the SDK files. I'm not sure which of the two steps resolved it, but perhaps it resolves the issue on your end too?

@D-Maher
Copy link
Author

D-Maher commented Sep 12, 2024

Just to close the loop on my particular issues, performing the following steps got me back to a working state:

  1. Update VSCode to the latest version (v1.92.2 at the time of writing this, but I have every reason to believe this works on v1.93.0 as well)
  2. Update Yarn to latest stable version (v4.4.1 at the time of writing this): yarn set version stable
  3. Re-install dependencies: yarn install
  4. Upgrade/install the following ESLint plugins and related packages:
  5. For good measure, reinstall editor SDKs with the latest version of Yarn: yarn dlx @yarnpkg/sdks vscode
  6. Restart VSCode
  7. Celebrate 🎉

TL;DR: Some combination of upgrading Yarn and upgrading the ESLint-related packages above did the trick. If I had to identify a culprit here, I'm fairly certain it was the eslint-plugin-import (or even the absence of the eslint-import-resolver-typescript package) that was causing this extension to stall out for me.


Thank you all for the discussion here. And thank you, @dbaeumer, for this invaluable extension and for your support with this issue!

@D-Maher D-Maher closed this as completed Sep 12, 2024
@ben-rogerson
Copy link

TL;DR: Some combination of upgrading Yarn and upgrading the ESLint-related packages above did the trick. If I had to identify a culprit here, I'm fairly certain it was the eslint-plugin-import (or even the absence of the eslint-import-resolver-typescript package) that was causing this extension to stall out for me.

Thanks for the update - I actually only needed these steps to fix the issue:

  1. Update VSCode and restart
  2. Update eslint-plugin-prettier
  3. In vscode, Developer: Reload Window

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
info-needed Issue requires more information from poster upstream
Projects
None yet
Development

No branches or pull requests