[英]Is it possible to use yarn-pnp with typescript/vscode?
yarn-pnp is awesome - no more node_modules! yarn-pnp 很棒 - 没有更多的 node_modules! But without node_models, typescript/vscode can't seem to resolve modules correctly.
但是没有 node_models,typescript/vscode 似乎无法正确解析模块。
Is there a way to make this work?有没有办法使这项工作? Thanks!
谢谢!
Yes!是的!
Typescript cli works out of the box in Yarn 2+, so you can just add the package: Typescript cli 在 Yarn 2+ 中开箱即用,因此您只需添加包:
yarn add -D typescript
and run the compilation:并运行编译:
yarn tsc
It is also possible to make VS Code work with PnP modules!也可以让 VS Code 与 PnP 模块一起工作! You can use `@yarnpkg/sdks package (which is a part of Yarn 2+)
您可以使用`@yarnpkg/sdks 包(它是 Yarn 2+ 的一部分)
You can enable PnP support in VS Code via:您可以通过以下方式在 VS Code 中启用 PnP 支持:
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.这将生成
tssdk
并修改您的.vscode/settings.json
以在tssdk
添加 TypeScript 编译器包装器作为 Workspace TypeScript 编译器。 You should run VS Code, open any TypeScript file and in the bottom right side of the window click on TypeScript version.您应该运行 VS Code,打开任何 TypeScript 文件,然后在窗口的右下角单击 TypeScript 版本。 Select
Use Workspace Version
from dropdown menu to actually use Workspace Compiler, its version has the suffix -sdk
.从下拉菜单中选择
Use Workspace Version
以实际使用 Workspace Compiler,其版本后缀为-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您可能还想安装 VS Code zip 文件支持扩展: https : //marketplace.visualstudio.com/items?itemName=arcanis.vscode-zipfs以便能够开源您的项目依赖项,因为 Yarn 2 存储所有依赖项在 zip 文件中
You can also read official Yarn 2+ docs on Editor integrations here:您还可以在此处阅读有关编辑器集成的官方 Yarn 2+ 文档:
https://next.yarnpkg.com/getting-started/editor-sdks https://next.yarnpkg.com/getting-started/editor-sdks
Add to @Viktor Vlasenko:添加到@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.当我有一个工作区并在工作区中创建一个打字稿项目时,新项目的
settings.json
中的规则typescript.tsdk
和typescript.enablePromptUseWorkspaceTsdk
可能不起作用。 In this case, You would not find xxx-pnpify
when selecting the TypeScript Version.在这种情况下,您在选择 TypeScript 版本时不会找到
xxx-pnpify
。
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.
VS Code 报告
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.因此,在步骤
yarn dlx @yarnpkg/pnpify --sdk vscode
,确保应用settings.json
中的那些新规则。 You may need to open a new window and open the folder directly.您可能需要打开一个新窗口并直接打开文件夹。
VS Code Version: 1.53.2 VS 代码版本:1.53.2
yarn Version: 2.4.0纱线版本:2.4.0
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.