typescriptvisual-studio-codeyarnpkg

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


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!


Solution

  • 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://yarnpkg.com/getting-started/editor-sdks