是否可以將 yarn-pnp 與 typescript/vscode 一起使用？

Question

yarn-pnp 很棒 - 沒有更多的 node_modules！ 但是沒有 node_models，typescript/vscode 似乎無法正確解析模塊。

有沒有辦法使這項工作？ 謝謝！

Answer 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

Answer 2

添加到@Viktor Vlasenko：

當我有一個工作區並在工作區中創建一個打字稿項目時，新項目的settings.json中的規則typescript.tsdk和typescript.enablePromptUseWorkspaceTsdk可能不起作用。 在這種情況下，您在選擇 TypeScript 版本時不會找到xxx-pnpify 。

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.

因此，在步驟yarn dlx @yarnpkg/pnpify --sdk vscode ，確保應用settings.json中的那些新規則。 您可能需要打開一個新窗口並直接打開文件夾。

VS 代碼版本：1.53.2

紗線版本：2.4.0