How to configure VSCode to run Yarn 2 (with PnP) powered TypeScript

Question

How to configure VSCode to run Yarn 2 (with PnP) powered TypeScript

I like to use Yarn 2 (with PnP) and a few months ago I setup a project for which it worked fine. Now I tried to setup a fresh project, but whatever I try, I cannot get VSCode to resolve the modules properly. The old project still works and my test case works properly in it, so it must be the new project and not VSCode wherein the problem lies.

My new project is setup as follows:

mkdir my-project
cd my-project
npm install -g npm
npm install -g yarn
yarn set version berry
yarn init
yarn add --dev @types/node typescript ts-node prettier
yarn dlx @yarnpkg/pnpify --sdk vscode
cat <<'EOF' > tsconfig.json
{
  "compilerOptions": {
    "types": [
      "node"
    ]
  }
}
EOF
mkdir src
cat <<'EOF' > src/test.ts
process.once("SIGINT", () => process.exit(0));
EOF

I did check similar questions on StackExchange and elsewhere, but they come down to running pnpify and selecting the TypeScript version within VSCode to be its workbench -pnpify version, which I both did. I also made sure to preform a Reload Window , but I still get the following errors:

In tsconfig.json : Cannot find type definition file for 'node'.

And in test.ts : Cannot find name 'process'. Do you need to install type definitions for node? Try npm i --save-dev @types/node and then add node to the types field in your tsconfig.

It is important to note that I can run test.ts without any problems like so: yarn ts-node src/test.ts . Thus the problem seems limited to the workbench configuration of VSCode (VSCode can still resolve modules for my old project).

What steps am I missing in my setup to make Yarn 2 (with PnP) powered TypeScript properly work within VSCode?

VSCode about information:

Version: 1.51.1
Commit: e5a624b788d92b8d34d1392e4c4d9789406efe8f
Date: 2020-11-10T23:31:29.624Z
Electron: 9.3.3
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Linux x64 5.7.19

Reported TypeScript version in VSCode: 4.1.3-pnpify .

> cd my-project
> yarn --version
2.4.0

Update: I tried adding nodeLinker: node-modules to .yarnrc.yml and when I Reload Window VSCode no longer reports errors and it correctly returns NodeJS.Process when I hover process in my test.ts . This at least shows that most of the setup should be correct, and its only PnP that is making trouble for VSCode.

Answer 1

I had this problem last night while migrating to Yarn v2 and using PnP.

1. Make sure that after running yarn dlx @yarnpkg/pnpify --sdk vscode the following folder structure was created inside your .yarn directory: .yarn/sdks/typescript/lib .
2. Change your VSCode workspace configuration to add the following:
   "typescript.tsdk": ".yarn/sdks/typescript/lib"

I also had another problem with step 1 while using Yarn workspaces in a monorepo, what I had to do was to install typescript , prettier and eslint as devDependencies to the root package (where it usually doesn't have any dependencies). And on step 2 I changed the path to frontend/.yarn/sdks/typescript/lib

Answer 2

Here's a partial answer as this page is top result when googling yarn 2 vscode .

TL;DR - As I currently understand it, the only way to make Yarn 2 work in VSCode is within a single folder workspace.

For context, I'm setting up yarn2 as a monorepo, and using Create React App with TypeScript - and I get red squiggly lines everywhere like the OP describes, but in command line everything builds fine.

Based on the Yarn 2 instructions here :

Add TypeScript to your project root:

yarn add -D typescript

Run the SDK command:

yarn dlx @yarnpkg/sdks vscode

This will add SDK files to .yarn/sdks , as well as creating a .vscode folder with the following setttings.json

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

Here is where we are trying to point to the TypeScript SDK for VSCode to use.

However, if you've been doing this in a multifolder VS Code workspace (where you have right click -> Add Folder to workspace) you will see typescript.tsdk is 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 Github issue for discussion of the message.

The solution I've found then, is to go:

VScode -> new window -> open -> open your project folder directly. Then run cmd + shift + p -> Select TypeScript Version and select the workspace version.

My Github issue outlining this issue/solution.

Answer 3

Though I already accepted another answer, I think it could help people if I spell out exactly how I made it to work in the end.

1. Install the latest version of Yarn :

   1. npm install -g yarn
   2. cd ~/path/to/project
   3. yarn set version latest (or yarn set version berry , but I used latest )

   Or if you, like me, worked with nodeLinker: node-modules in .yarnrc.yml for the time being, you will have to remove that line and run yarn install to have it go back to the default Plug'n'Play setup of Yarn 2.x and higher.

2. At least the dev dependencies that need to be patched to work with Plug'n'Play need to be installed in the root project. A simplified version of my root package.json is like follows:

{
  "name": "root",
  "private": true,
  "devDependencies": {
    "prettier": "^2.4.1",
    "ts-node": "^10.2.1",
    "typescript": "^4.4.3"
  },
  "workspaces": [
    "packages/*"
  ],
  "packageManager": "yarn@3.0.2"
}

3. Run yarn dlx @yarnpkg/sdks vscode to make VSCode play nice with Yarn's Plug'n'Play setup. This will generate the following in .vscode/settings.json :

{
  "search.exclude": {
    "**/.yarn": true,
    "**/.pnp.*": true
  },
  "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
  "typescript.tsdk": ".yarn/sdks/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

4. As mentioned by @dwjohnston, this config won't apply well to a multi-root setup giving the error: This setting cannot be applied in this workspace. It will be applied when you open the containing workspace folder directly. This setting cannot be applied in this workspace. It will be applied when you open the containing workspace folder directly. We can workaround this issue by making sure the multi-root project is saved as a workspace and then moving the config of .vscode/settings.json to the .code-workspace file. If you already made it a workspace but can't remember where you stored this file, you can access it via File -> Preferences -> Settings -> Workspace -> Open Settings (JSON) . For example:

{
  "folders": [
    {
      "path": "."
    }
  ],
  "settings": {
    "search.exclude": {
      "**/.yarn": true,
      "**/.pnp.*": true
    },
    "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
    "typescript.tsdk": ".yarn/sdks/typescript/lib",
    "typescript.enablePromptUseWorkspaceTsdk": true
  }
}

5. As the setting enablePromptUseWorkspaceTsdk already spells out, there should now show up a prompt asking whether you want to change the TypeScript version to that of the SDK. If you don't get that, you can also configure it via: ctrl / cmd + shift + p -> TypeScript: Select TypeScript Version... -> Use Workspace Version (version ending with -sdk ).
6. Depending on the way you went about it, you might require a reload: ctrl / cmd + shift + p -> Developer: Reload Window

Answer 4

In order to use VScode with Yarn 2 PnP:

1. Execute yarn dlx @yarnpkg/sdks vscode
2. Install and enable ZipFS plugin ( https://marketplace.visualstudio.com/items?itemName=arcanis.vscode-zipfs#:~:text=This%20extension%20adds%20support%20into,edit%20files%20from%20your%20cache. ) as stated in the official Github issue ( https://github.com/microsoft/vscode/issues/75559 )