Language-tools: Yarn 2 support

[joelmukuthu]

Is your feature request related to a problem? Please describe.
The Svelte for VSCode extension cannot currently load modules defined in svelte.config.js when using Yarn 2. My setup is as follows:

// svelte.config.js
const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: sveltePreprocess({
    defaults: {
      script: 'typescript',
    },
  }),
};

This yields the following error when I open a .svelte file with a <script> tag:

Error in svelte.config.js

Error: Cannot find module 'svelte-preprocess'
Require stack:
- <project path>/svelte.config.js
- $HOME/.vscode/extensions/svelte.svelte-vscode-102.5.1/node_modules/cosmiconfig/dist/loaders.js
- $HOME/.vscode/extensions/svelte.svelte-vscode-102.5.1/node_modules/cosmiconfig/dist/ExplorerBase.js
- $HOME/.vscode/extensions/svelte.svelte-vscode-102.5.1/node_modules/cosmiconfig/dist/Explorer.js
- $HOME/.vscode/extensions/svelte.svelte-vscode-102.5.1/node_modules/cosmiconfig/dist/index.js
- $HOME/.vscode/extensions/svelte.svelte-vscode-102.5.1/node_modules/svelte-language-server/dist/src/lib/documents/configLoader.js
- $HOME/.vscode/extensions/svelte.svelte-vscode-102.5.1/node_modules/svelte-language-server/dist/src/lib/documents/Document.js
- $HOME/.vscode/extensions/svelte.svelte-vscode-102.5.1/node_modules/svelte-language-server/dist/src/lib/documents/index.js
- $HOME/.vscode/extensions/svelte.svelte-vscode-102.5.1/node_modules/svelte-language-server/dist/src/server.js
- $HOME/.vscode/extensions/svelte.svelte-vscode-102.5.1/node_modules/svelte-language-server/bin/server.jssvelte

My understanding is that the extension needs to be made aware of Yarn's PnP context to properly load svelte-preprocess and any other modules required in svelte.config.js.

Describe the solution you'd like

With Yarn 2, when one sets up VSCode, some SDKs are generated (for ESlint, Prettier, TypeScript etc).

1. Do we need to have one generate one for Svelte as well?
2. As part of the setup, one also is advised to update VSCode to use the workspace version of TypeScript. Does the extension automatically pick up the same version or does it need to have it's own setting as well?

Describe alternatives you've considered

1. Deleting my svelte.config.js file and having the extension use the default settings (use the version of svelte-preprocess that's bundled with the extension)
2. Patching the generated .yarn/sdks/typescript/lib/typescript.js (generated via https://yarnpkg.com/getting-started/editor-sdks#vscode) to enable loading svelte-preprocess somehow.

Additional context
N/A

[dummdidumm]

I fear we need to do both: make the extension aware of the yarn stuff and add the possibility to chose the TypeScript workspace version.

[joelmukuthu]

@dummdidumm do you have some pointers on how to get this done, where to start etc?

[joelmukuthu]

I just found this: https://github.com/yarnpkg/berry/blob/56cc85a8d3a13d3b3b11c2de066db9b6ccbf758f/packages/yarnpkg-pnpify/sources/sdks/vscode.ts#L95, seems like there might be some work done towards this already

[dummdidumm]

Interesting. Maybe this means you need to use this setting and then it may work?

[joelmukuthu]

It worked! The steps that worked for me:

1. Run yarn add -D svelte-language-server to install svelte-language-server as a dev dependency
2. Run yarn dlx @yarnpkg/pnpify --sdk vscode to generate or update the VSCode/Yarn integration SDKs. This also sets the svelte.language-server.ls-path setting for the workspace, pointing it to the workspace-installed language server.
3. Restart VSCode. I think restarting the Svelte language server should work as well but it didn't work for me.
4. Commit the changes to .yarn/sdks

[dummdidumm]

Great to hear that! I copied your instructions over to the docs.

[abrenneke]

This no longer works with https://github.com/sveltejs/language-tools/commit/5d7bf1fd98bfe2cd2080863a3c95ce099b898075, you have to set ls-path manually in your user settings ☹️

[dummdidumm]

Thanks for noticing, I'll update the instructions

[abrenneke]

Thanks @dummdidumm! That said, it would be nice if there was something akin to typescript.enablePromptUseWorkspaceTsdk so that we wouldn't have to set our global ls-path to a project-local path.