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

5

35

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.

Jolty answered 16/12, 2020 at 17:24 Comment(1)
I have a similar issue, maybe the same, after passing my monorepo to PnP, in inner packages TS does not find root dev-dependencies, and request for @types/node, which was not required before. I found this thread github.com/yarnpkg/berry/issues/1058 implying that yarn 2 PnP became more restrictive, if it can help you, I guess in your case you have to add @types/node to dev-dependencies. Since the time if you found proper solution don't hesitate to share !Schnauzer
P
47

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

Philender answered 30/3, 2021 at 13:46 Comment(5)
Thx! My vscode didn't let me choose the workspace typescript option on ctrl-shift-p -> Select Typescript version after i run the dlx command. When i added the key-value pair in your step 2, it became possible. So using a code-workspace-file seems to override the settings that were made by the dlx-command i guess.Bushman
I think step 2 can be clarified in your answer, that you have to edit the .code-workspace file to contain the generated .vscode/settings.json entries, and the command of step 1 now seems to be yarn dlx @yarnpkg/sdks vscode, but I basically ended up doing what you described. Installed my dev dependencies in the root project, ran yarn dlx @yarnpkg/sdks vscode then copied over those settings to my .code-workspace file and it now works!Jolty
The yarn dlx @yarnpkg/sdks vscode command generated the .vscode/settings.json file for me. The answer below includes a link to the official documentation on this. yarnpkg.com/getting-started/editor-sdksRaycher
yarn dlx @yarnpkg/sdks vscode doesn't create typescript folder anymore 🤷‍♂️Iolite
Turns out with monorepo one has to install typescript as devDependency in the root first! Appeared now.Iolite
A
14

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.

Artema answered 7/9, 2021 at 4:58 Comment(0)
J
12

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": "[email protected]"
}
  1. 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
}
  1. 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. 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
  }
}
  1. 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).
  2. Depending on the way you went about it, you might require a reload: ctrl/cmd + shift + p -> Developer: Reload Window
Jolty answered 1/10, 2021 at 22:30 Comment(0)
G
5

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)
Gyn answered 23/1, 2022 at 18:28 Comment(0)
C
1

For anyone else that runs into this issue and is using a workspace with more than one folder, the earlier listed solutions do not work. VSCode won't load the typescript options generated by yarn in a single root of a mullti-root workspace. The solution listed in this github issue for yarn, however, seems to bypass the problem by assigning those settings to all folders in the workspace. This seems to work however your mileage may vary, especially if there's another root that's not using yarn pnp.

In short...

  1. Execute yarn dlx @yarnpkg/sdks vscode as listed by @jmarceli
  2. Copy the contents of the generated .vscode/settings.json file and paste it into the .code-workspace file's settings key
  3. Reload vscode

This worked correctly for me and is compatible with typescript takeover for vue SFC. This likely wont work where another root does not use yarn pnp though.

Cuirassier answered 22/12, 2023 at 17:22 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.