Picking a different typescript.tsdk from a list / use in a multi-root workspace with yarn2 pnp

[Hecatron]

Hi,

Feature Request

I was wondering if it would be possible to have multiple options under the "Select Typescript version" command palette entry.

Looking here #82119
It's mentioned that

In a multiroot workspace, we only load a single TS Server instance (not one per folder). That's why the setting is disabled in the per-folder settings.

However what I'm looking for is not running multiple ts server instances at the same time
Just the ability to pick one from a list of multiple entries.
In my case I'm using a multi-root workspace with 2 directories and want to be able to switch from one to the other.

There could be a couple of possible solutions to this

1. in a multi-root vscode workspace, read in each of the workspace's settings.json files
   then list each of the typescript.tsdk options as something that can be picked under the command palette

2. Allow for a list to be passed to the typescript.tsdk setting, such as:

"eslint.nodePath": ".yarn/sdks",
"typescript.tsdk": ["client/.yarn/sdks/typescript/lib","server/.yarn/sdks/typescript/lib"],
"typescript.enablePromptUseWorkspaceTsdk": true

Currently it's only possible to list 1 alternative by placing it within the actual code-workspace file

Example

To give an example where this might be useful
I've recently been using Yarn 2 with PNP
There's a single code-workspace file with 2 directories sitting underneath, server and client.
In both directories I'm using typescript code

Since typescript doesn't support pnp natively yet, one of the way around this is the use of a yarn typescript sdk plugin via

yarn dlx @yarnpkg/pnpify --sdk vscode

which installs

• https://github.com/yarnpkg/berry/tree/master/.yarn/sdks/typescript

into .yarn/sdks/typescript

Then you point typescript.tsdk to the wrapper with something like

  "search.exclude": {
    "**/.yarn": true,
    "**/.pnp.*": true
  },
  "eslint.nodePath": ".yarn/sdks",
  "typescript.tsdk": ".yarn/sdks/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true

This is basically a small wrapper around tsc and the like so that it can handle yarn's pnp node resolution
The wrapper references the file generated by yarn: .pnp.js in the project directory.

However where things get complicated is if you have 2 different directories each with they're own .pnp.js file
since you can only specify one of the typescript wrappers at a time.

I did experiment with yarn's multi workspace setup which generates a single .pnp.js file at the top level
This does seem to fix the problem in one way, but fails when running webpack.
webpack has inbuilt pnp support but it doesn't seem to like yarn's multi workspace setup and pnp in combination at the same time

[kachkaev]

Same question here after trying to switch to yarn v2 this weekend.

Having multi-root workspace config → "typescript.tsdk": "ONE_OF_MANY_PROJECTS/.yarn/sdks/typescript/lib" seems like a blocker to using Yarn’s new module resolution mechanism.

[kachkaev]

@vscode-triage-bot repoen

(at least I tried 😅)

[asvetliakov]

For anyone interested i did an experiment by modifying original LS client to spawn multiple TS servers per folder. Seems working for me with with yarn2 pnp in multi-root environment:

https://marketplace.visualstudio.com/items?itemName=asvetliakov.typescript-language-features-multi-host

I've not fully tested it yet and i'm not sure how the performance would be for a large workspaces (don't think it will be worse than keeping multiple vscode windows, as we forced to do it now though), but you can try
Working without issues after few days of use.

Disable built-in LS client and install this one instead.