vs-code-prettier-eslint does not work with yarn 3 PnP

[yarick123]

If vs-code-prettier-eslint is used with projects managed by yarn 3 in PnP mode, the extension does not work. Here is the output:

Error: Cannot find module 'eslint'
Require stack:
- c:\Users\dev\.vscode\extensions\rvest.vs-code-prettier-eslint-5.0.4\dist\extension.js
- c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js
- c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-amd.js
- c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-fork.js
-
Error: Cannot find module 'eslint'
Require stack:
- c:\Users\dev\.vscode\extensions\rvest.vs-code-prettier-eslint-5.0.4\dist\extension.js
- c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js
- c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-amd.js
- c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-fork.js
-
    at Module._resolveFilename (node:internal/modules/cjs/loader:987:15)
    at i._resolveFilename (node:electron/js2c/utility_init:17:840)
    at p.resolve (c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:4:761)
    at n4 (c:\Users\dev\.vscode\extensions\rvest.vs-code-prettier-eslint-5.0.4\dist\extension.js:204:36)
    at Lge (c:\Users\dev\.vscode\extensions\rvest.vs-code-prettier-eslint-5.0.4\dist\extension.js:180:599)
    at k0 (c:\Users\dev\.vscode\extensions\rvest.vs-code-prettier-eslint-5.0.4\dist\extension.js:204:6948)
    at c:\Users\dev\.vscode\extensions\rvest.vs-code-prettier-eslint-5.0.4\dist\extension.js:204:7802
    at Generator.next (<anonymous>)
    at c:\Users\dev\.vscode\extensions\rvest.vs-code-prettier-eslint-5.0.4\dist\extension.js:1:796
    at new Promise (<anonymous>)
    at M0 (c:\Users\dev\.vscode\extensions\rvest.vs-code-prettier-eslint-5.0.4\dist\extension.js:1:616)
    at gye (c:\Users\dev\.vscode\extensions\rvest.vs-code-prettier-eslint-5.0.4\dist\extension.js:204:7597)
    at Object.provideDocumentRangeFormattingEdits (c:\Users\dev\.vscode\extensions\rvest.vs-code-prettier-eslint-5.0.4\dist\extension.js:205:74)
    at F.provideDocumentRangeFormattingEdits (c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:96:39981)
    at c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:96:61976
    at se.s (c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:96:56458)
    at se.$provideDocumentRangeFormattingEdits (c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:96:61963)
    at u.N (c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:104:11208)
    at u.M (c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:104:10926)
    at u.H (c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:104:9981)
    at u.G (c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:104:9000)
    at c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:104:7788
    at d.invoke (c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:145)
    at w.deliver (c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:2029)
    at g.fire (c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:1667)
    at h.fire (c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:72:14314)
    at c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:120:15804
    at d.invoke (c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:145)
    at w.deliver (c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:2029)
    at g.fire (c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:1667)
    at h.fire (c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:72:14314)
    at MessagePortMain.<anonymous> (c:\Users\dev\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:120:13960)
    at MessagePortMain.emit (node:events:526:28)
    at MessagePortMain._internalPort.emit (node:electron/js2c/utility_init:5:364)

Versions:

• VS Code Prettier ESLint extension 5.0.4
• Visual Studio Code: 1.74.0
• Node: 18.12.1
• Package Manager: yarn 3.3.0
• prettier: 2.8.1
• eslint: 8.29.0

System Specifications:

• OS: Windows 10.0.19045 x64 Enterprise
• Processor: Intel i7 6700HQ @ 2.6GHz
• RAM Size: 32 GB

[idahogurl]

@yarick123 I'll take a look. I'm pretty sure I'll have to bundle ESLint and Prettier with the extension and I'd rather not do that. Would installing them globally work?

[idahogurl]

@yarick123 I think this may do the trick. Run the following inside your project directory: yarn dlx @yarnpkg/pnpify --sdk vscode See https://github.com/prettier/prettier-vscode/issues/1502#issuecomment-728376262 for more details

[yarick123]

@idahogurl in yarn 3 the command should be yarn dlx @yarnpkg/sdks vscode, executing the command you sugesst produces the following output:

> yarn dlx @yarnpkg/pnpify --sdk vscode
...
Usage Error: The 'pnpify --sdk ...' command has been moved to the '@yarnpkg/sdks' package - use 'yarn dlx @yarnpkg/sdks ...' instead

And yes, I executed this command before creating the issue :)

[yarick123]

@yarick123 I'll take a look. I'm pretty sure I'll have to bundle ESLint and Prettier with the extension and I'd rather not do that. Would installing them globally work?

@idahogurl Unfortunately installing prettier and eslint globally does not help either. The error output was also not changed.

[yarick123]

Hmmm... the problem seems to go away after installing esbenp.prettier-vscode plugin

[idahogurl]

Hmmm... the problem seems to go away after installing esbenp.prettier-vscode plugin

I saw that extension is officially supported by Yarn PnP (see https://yarnpkg.com/getting-started/editor-sdks#tools-currently-supported) I looked through their issues and code and tried to figure out what they did to get it functioning. I found that ticket I linked earlier so I thought that is all they did was run that command.

[github-actions[bot]]

This issue is stale because it has been open for 14 days with no activity.

[idahogurl]

@yarick123 Are you sure it's my extension that is formatting the document and not the esbenp.prettier-vscode extension?

[idahogurl]

@yarick123 Also, is your project using Yarn workspaces? Or is it a single project?

[yarick123]

@idahogurl

@yarick123 Are you sure it's my extension that is formatting the document and not the esbenp.prettier-vscode extension? after installing esbenp.prettier-vscode I am not sure, if your plugin does something. Only one thing I am sure is, that the exception is not there any more :)

@yarick123 Also, is your project using Yarn workspaces? Or is it a single project? It is a single project

[github-actions[bot]]

This issue is stale because it has been open for 14 days with no activity.

[github-actions[bot]]

This issue was closed because it has been inactive for 14 days since being marked as stale.

[davidfarinha]

Can confirm this is an issue with this extension. Tried installing the yarn sdk's for VSCode and installing eslint/prettier globally but it didn't work sadly