Is it possible to use yarn-pnp with typescript/vscode?

Question

yarn-pnp is awesome - no more node_modules! But without node_models, typescript/vscode can't seem to resolve modules correctly.

Is there a way to make this work? Thanks!

Answer 1

Yes!

Typescript cli works out of the box in Yarn 2+, so you can just add the package:
yarn add -D typescript

and run the compilation:
yarn tsc

It is also possible to make VS Code work with PnP modules! You can use `@yarnpkg/sdks package (which is a part of Yarn 2+)

You can enable PnP support in VS Code via:
yarn dlx @yarnpkg/sdks vscode
This will generate tssdk and modifies your .vscode/settings.json to add TypeScript compiler-wrapper inside tssdk as a Workspace TypeScript compiler. You should run VS Code, open any TypeScript file and in the bottom right side of the window click on TypeScript version. Select Use Workspace Version from dropdown menu to actually use Workspace Compiler, its version has the suffix -sdk .

You might also want to install VS Code zip file support extension: https://marketplace.visualstudio.com/items?itemName=arcanis.vscode-zipfs to be able to open source of your project dependencies, because Yarn 2 stores all the dependencies in zip files

You can also read official Yarn 2+ docs on Editor integrations here:
https://next.yarnpkg.com/getting-started/editor-sdks

Answer 2

Add to @Viktor Vlasenko:

When I have a workspace and I create a typescript project inside the workspace, the rule typescript.tsdk and typescript.enablePromptUseWorkspaceTsdk inside the settings.json of the new project may not work. In this case, You would not find xxx-pnpify when selecting the TypeScript Version.

The VS Code reported that 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.

Therefore, after the step yarn dlx @yarnpkg/pnpify --sdk vscode , make sure those new rules in the settings.json are applied. You may need to open a new window and open the folder directly.

VS Code Version: 1.53.2

yarn Version: 2.4.0