是否可以将 yarn-pnp 与 typescript/vscode 一起使用？

Posted 2023-02-16

【中文标题】是否可以将 yarn-pnp 与 typescript/vscode 一起使用？

【英文标题】：Is it possible to use yarn-pnp with typescript/vscode?

【发布时间】：2019-07-24 01:25:27

【问题描述】：

yarn-pnp 太棒了——不再有 node_modules！ 但是没有 node_models，typescript/vscode 似乎无法正确解析模块。

有没有办法让这个工作？ 谢谢！

【问题讨论】：

我不知道，但正在讨论中，请参阅github.com/Microsoft/TypeScript/issues/28289

谢谢，@artem - 我会看那个帖子。

【参考方案1】：

是的！

Typescript cli 在 Yarn 2+ 中开箱即用，因此您只需添加包：yarn add -D typescript

并运行编译：yarn tsc

也可以让 VS Code 与 PnP 模块一起工作！您可以使用 `@yarnpkg/sdks 包（它是 Yarn 2+ 的一部分）

您可以通过以下方式在 VS Code 中启用 PnP 支持：yarn dlx @yarnpkg/sdks vscode 这将生成 tssdk 并修改您的 .vscode/settings.json 以在 tssdk 中添加 TypeScript 编译器包装器作为 Workspace TypeScript 编译器。您应该运行 VS Code，打开任何 TypeScript 文件，然后在窗口的右下方单击 TypeScript 版本。从下拉菜单中选择Use Workspace Version实际使用Workspace Compiler，其版本后缀为-sdk。

您可能还想安装 VS Code zip 文件支持扩展： https://marketplace.visualstudio.com/items?itemName=arcanis.vscode-zipfs 能够开源您的项目依赖项，因为 Yarn 2 将所有依赖项存储在 zip 文件中

您还可以在此处阅读有关编辑器集成的官方 Yarn 2+ 文档：https://next.yarnpkg.com/getting-started/editor-sdks

【讨论】：

嗯...在我看来它忽略了@latest 并且只安装了稳定版。

菜鸟问题：我们是否必须在每次添加、升级或删除依赖项时运行yarn pnpify --sdk？因为如果是的话，这是 yarn v2 的一个主要缺点。

只有在添加新依赖时才需要运行yarn pnpify --sdk，typescript、eslint 等。该工具获取当前安装的依赖并为它们生成包装器，它需要知道什么你使用的包，需要包装器。当您删除或升级这些部门之一时，您不需要运行yarn pnpify --sdk。当你升级typescript 时，你可能还想这样做，以便 VS Code 在状态栏中显示正确的版本：x.y.z-pnpify 一个，否则它会显示旧，但一切仍然有效。

谢谢，我已经更新了答案，cli语法最近才改变

我希望有 VS Code 实时分享的解决方案。似乎不允许客人使用自定义生成的 tsdk 文件。

【参考方案2】：

添加到@Viktor Vlasenko：

当我有一个工作区并在工作区中创建一个打字稿项目时， 新项目的settings.json 中的typescript.tsdk 和typescript.enablePromptUseWorkspaceTsdk 规则可能不起作用。在这种情况下，您在选择 TypeScript 版本时不会找到 x.x.x-pnpify。

VS Code 报告说This setting cannot be applied in this workspace. It will be applied when you open the containing workspace folder directly.

因此，在步骤yarn dlx @yarnpkg/pnpify --sdk vscode 之后，确保应用settings.json 中的那些新规则。您可能需要打开一个新窗口并直接打开该文件夹。

VS 代码版本：1.53.2

纱线版本​​：2.4.0