[Bug?]: Multi-folder VSCode workspaces not supported/ Documentation unclear

Self-service

• I’d be willing to implement a fix (I’d be willing to update the documentation if that’s what the suggested fix is).

Describe the bug

The editor SDKs appear not to work in a VSCode multi folder workspace.

The work around is to use a single folder VSCode workspaces.

Can the documentation be updated to reflect this? Or is there a better work around?

To reproduce

Very similar to this issue:

https://github.com/yarnpkg/berry/issues/3350

• Create new folder
• yarn set version berry
• yarn init
• yarn add typescript -D
• yarn add react
• yarn add @types/react
• Create new file index.ts
• write in index.ts import React from 'react'
• yarn dlx @yarnpkg/sdks vscode

(Or checkout this repo https://github.com/dwjohnston/yarn2-vscode-issue)

Now:

❌ Doesn’t work:

Open VSCode -> New Window -> ✨ Add folder to workspace✨ -> select your folder

In index.ts you have red squiggly lines and:

Cannot find module 'react' or its corresponding type declarations.ts(2307)

cmd + shift +p -> Select TypeScript version -> there is no option to select TypeScript version.

Go to .vscode/setting.json note that typescript.tsdk and typescript.enablePromptUseWorkspaceTsdk are greyed out with the message:

This setting cannot be applied in this workspace. It will be applied when you open the containing workspace folder directly.

See this discussion re that message: https://github.com/microsoft/vscode/issues/82117

✅ Does work

Open VSCode -> New Window -> ❇️ Open❇️ -> select your folder

cmd + shift +p -> Select TypeScript version -> Select workspace version.

Squiggly lines solved.

Environment

System: OS: macOS 10.15.7 CPU: (8) x64 Intel® Core™ i7-8559U CPU @ 2.70GHz Binaries: Node: 14.17.0 - /private/var/folders/3_/7t918q9d1g9cpw7l31bzdmpwd8z945/T/xfs-c9b131cd/node Yarn: 3.0.2 - /private/var/folders/3_/7t918q9d1g9cpw7l31bzdmpwd8z945/T/xfs-c9b131cd/yarn npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm

Version: 1.60.0

Additional context

No response

[ikhsanuddin]

I could reproduce the bug, with multi-folder VS Code workspace Currently using yarn Version 3

It caused if you have multiple yarn 1 & yarn 2 project in single vs code folder with folder order of yarn 1 as first folder

I manage to prevent the bug, by putting Yarn 2 project first, then Yarn 1 project folders

[yjoer]

I managed to make VSCode works with the integrations in multi-root workspaces. In my case, I had ESLint, Prettier, and TypeScript integrated. I copied the settings in the .vscode/settings.json file to the global workspaces settings.

Here’s the step to get to the workspaces settings.

In VSCode -> File -> Preferences -> Settings -> Workspace -> Open Settings (JSON)

Similarly, you will expect the same JSON structure in a .code-workspace file.

{
  "folders": [
    {
      "name": "directory-1",
      "path": "path\\to\\directory-1"
    },
    {
      "name": "directory-2",
      "path": "path\\to\\directory-2"
    }
  ],
  "settings": {
+    "search.exclude": {
+      "**/.yarn": true,
+      "**/.pnp.*": true
+    },
+    "eslint.nodePath": ".yarn/sdks",
+    "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
+    "typescript.tsdk": ".yarn/sdks/typescript/lib",
+    "typescript.enablePromptUseWorkspaceTsdk": true
  }
}