Editor SDKs

Smart IDEs (such as VSCode or IntelliJ) require special configuration for TypeScript to work when using Plug'n'Play installs. This page is a collection of settings for each editor we've looked into.

The editor SDKs and settings can be generated using yarn dlx @yarnpkg/sdks. Its detailed documentation can be found on the dedicated page.

info

Why are SDKs needed with Yarn PnP?

Yarn PnP works by generating a Node.js loader, which has to be injected within the Node.js runtime. Many IDE extensions execute the packages they wrap (Prettier, TypeScript, ...) without consideration for loaders.

The SDKs workaround that by generating indirection packages. When required, these indirection automatically setup the loader before forwarding the require calls to the real packages.

Usage

Generate both the base SDK and the editor settings:

yarn dlx @yarnpkg/sdks vscode vim ...

Generate the base SDK, but no editor settings:

yarn dlx @yarnpkg/sdks base

Update all installed SDKs & editor settings:

yarn dlx @yarnpkg/sdks

Tools currently supported

warning

The yarn dlx @yarnpkg/sdks command will look at the content of your root package.json to figure out the SDKs you need - it won't look at the dependencies from any other workspaces.

Supported extension	Enabled if ... is found in your package.json dependencies
Builtin VSCode TypeScript Server	typescript
astro-vscode	astro
vscode-eslint	eslint
prettier-vscode	prettier
relay	relay

If you'd like to contribute more, take a look here!

Editor setup

CoC nvim

1. Install vim-rzip

2. Run the following command, which will generate a .vim/coc-settings.json file:

yarn dlx @yarnpkg/sdks vim

Emacs

The SDK comes with a typescript-language-server wrapper which enables you to use the ts-ls LSP client.

1. Run the following command, which will generate a new directory called .yarn/sdks:

yarn dlx @yarnpkg/sdks base

2. Create a .dir-locals.el with the following content to enable Flycheck and LSP support, and make sure LSP is loaded after local variables are applied to trigger the eval-after-load:

((typescript-mode
  . ((eval . (let ((project-directory (car (dir-locals-find-file default-directory))))
                (setq lsp-clients-typescript-server-args `("--tsserver-path" ,(concat project-directory ".yarn/sdks/typescript/bin/tsserver") "--stdio")))))))

Neovim Native LSP

1. Install vim-rzip

2. Run the following command, which will generate a new directory called .yarn/sdks:

yarn dlx @yarnpkg/sdks base

TypeScript support should then work out of the box with nvim-lspconfig and theia-ide/typescript-language-server.

VSCode

1. Install the ZipFS extension, which is maintained by the Yarn team.

2. Run the following command, which will generate a .vscode/settings.json file:

yarn dlx @yarnpkg/sdks vscode

3. For safety reason VSCode requires you to explicitly activate the custom TS settings:

   1. Press ctrl+shift+p in a TypeScript file
   2. Choose "Select TypeScript Version"
   3. Pick "Use Workspace Version"

Your VSCode project is now configured to use the exact same version of TypeScript as the one you usually use, except that it will be able to properly resolve the type definitions.