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/sdks 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