如何配置 VSCode 以運行 Yarn 2（帶 PnP）供電的 TypeScript

Question

如何配置 VSCode 以運行 Yarn 2（帶 PnP）供電的 TypeScript

我喜歡使用 Yarn 2（帶有 PnP），幾個月前我設置了一個項目，它運行良好。 現在我嘗試設置一個新項目，但無論我嘗試什么，我都無法讓 VSCode 正確解析模塊。 舊項目仍然有效，我的測試用例在其中正常工作，所以它一定是新項目，而不是問題所在的 VSCode。

我的新項目設置如下：

mkdir my-project
cd my-project
npm install -g npm
npm install -g yarn
yarn set version berry
yarn init
yarn add --dev @types/node typescript ts-node prettier
yarn dlx @yarnpkg/pnpify --sdk vscode
cat <<'EOF' > tsconfig.json
{
  "compilerOptions": {
    "types": [
      "node"
    ]
  }
}
EOF
mkdir src
cat <<'EOF' > src/test.ts
process.once("SIGINT", () => process.exit(0));
EOF

我確實在 StackExchange 和其他地方檢查了類似的問題，但它們歸結為運行pnpify並在 VSCode 中選擇 TypeScript 版本作為其工作台-pnpify版本，我都這樣做了。 我還確保執行Reload Window ，但我仍然收到以下錯誤：

在tsconfig.json ：找不到“節點”的類型定義文件。

在test.ts中：找不到名稱“進程”。 您需要為節點安裝類型定義嗎？ 嘗試npm i --save-dev @types/node然后將node添加到 tsconfig 中的類型字段。

重要的是要注意我可以運行test.ts沒有任何問題，例如： yarn ts-node src/test.ts 。 因此問題似乎僅限於 VSCode 的工作台配置（VSCode 仍然可以為我的舊項目解析模塊）。

我在設置中缺少哪些步驟以使 Yarn 2（帶 PnP）驅動的 TypeScript 在 VSCode 中正常工作？

VSCode 關於信息：

Version: 1.51.1
Commit: e5a624b788d92b8d34d1392e4c4d9789406efe8f
Date: 2020-11-10T23:31:29.624Z
Electron: 9.3.3
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Linux x64 5.7.19

在 VSCode 中報告了 TypeScript 版本： 4.1.3-pnpify 。

> cd my-project
> yarn --version
2.4.0

更新：我嘗試將nodeLinker: node-modules添加到.yarnrc.yml ，當我Reload Window時，VSCode 不再報告錯誤，並且當我在test.ts中的 hover process時它正確返回NodeJS.Process 。 這至少表明大多數設置應該是正確的，並且它唯一給 VSCode 帶來麻煩的 PnP。

Answer 1

我昨晚在遷移到 Yarn v2 並使用 PnP 時遇到了這個問題。

1. 確保在運行yarn dlx @yarnpkg/pnpify --sdk vscode后，在.yarn目錄中創建了以下文件夾結構： .yarn/sdks/typescript/lib 。
2. 更改 VSCode 工作區配置以添加以下內容：
   "typescript.tsdk": ".yarn/sdks/typescript/lib"

在monorepo中使用Yarn工作區時，第1步還有另一個問題，我必須做的是安裝typescript ， prettier和eslint作為 devDependencies 到根 package （它通常沒有任何依賴項）。 在第 2 步中，我將路徑更改為frontend/.yarn/sdks/typescript/lib

Answer 2

這是部分答案，因為此頁面是谷歌搜索yarn 2 vscode時的最佳結果。

TL;DR - 據我目前了解，使 Yarn 2 在 VSCode 中工作的唯一方法是在單個文件夾工作區中。

就上下文而言，我將 yarn2 設置為 monorepo，並使用帶有 TypeScript 的 Create React App - 就像 OP 描述的那樣，我到處都是紅色的波浪線，但在命令行中一切都很好。

根據此處的紗線 2 說明：

將 TypeScript 添加到您的項目根目錄：

yarn add -D typescript

運行 SDK 命令：

yarn dlx @yarnpkg/sdks vscode

這會將 SDK 文件添加到.yarn/sdks ，並使用以下setttings.json創建一個.vscode文件夾。json

{
  "search.exclude": {
    "**/.yarn": true,
    "**/.pnp.*": true
  },
  "typescript.tsdk": ".yarn/sdks/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

這是我們試圖指向 TypeScript SDK 以供 VSCode 使用的地方。

但是，如果您一直在多文件夾 VS Code 工作區中執行此操作（您可以在其中右鍵單擊 -> 將文件夾添加到工作區），您將看到typescript.tsdk顯示為灰色並顯示以下消息：

This setting cannot be applied in this workspace. It will be applied when you open the containing workspace folder directly.

有關該消息的討論，請參閱此Github 問題。

我當時找到的解決方案是 go：

VScode -> new window -> open -> 直接打開你的項目文件夾。 然后運行cmd + shift + p -> Select TypeScript 版本和 Z99938282F04071685994 工作區版本E1。

我的 Github 問題概述了此問題/解決方案。

Answer 3

盡管我已經接受了另一個答案，但我認為如果我准確地說明我最終如何使其工作，它可以幫助人們。

1. 安裝最新版本的 Yarn ：

   1. npm install -g yarn
   2. cd ~/path/to/project
   3. yarn set version latest （或yarn set version berry ，但我用的是latest ）

   或者，如果你和我一樣，暫時使用nodeLinker: node-modules in .yarnrc.yml ，你將不得不刪除該行並運行yarn install讓它 go 回到默認的 Plug'n'Play 設置紗線 2.x 及更高版本。

2. 至少需要在根項目中安裝需要修補才能與 Plug'n'Play 一起使用的開發依賴項。 我的根 package.json 的簡化版本如下：

{
  "name": "root",
  "private": true,
  "devDependencies": {
    "prettier": "^2.4.1",
    "ts-node": "^10.2.1",
    "typescript": "^4.4.3"
  },
  "workspaces": [
    "packages/*"
  ],
  "packageManager": "yarn@3.0.2"
}

3. 運行yarn dlx @yarnpkg/sdks vscode以使 VSCode 與 Yarn 的即插即用設置配合得很好。 這將在.vscode/settings.json中生成以下內容：

{
  "search.exclude": {
    "**/.yarn": true,
    "**/.pnp.*": true
  },
  "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
  "typescript.tsdk": ".yarn/sdks/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

4. 正如@dwjohnston 所提到的，此配置不適用於多根設置並給出錯誤： 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. 我們可以通過確保將多根項目保存為工作區，然后將.vscode/settings.json的配置移動到 .code .code-workspace文件來解決此問題。 如果您已經將其設為工作區但不記得存儲此文件的位置，則可以通過File -> Preferences -> Settings -> Workspace -> Open Settings (JSON)訪問它。 例如：

{
  "folders": [
    {
      "path": "."
    }
  ],
  "settings": {
    "search.exclude": {
      "**/.yarn": true,
      "**/.pnp.*": true
    },
    "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
    "typescript.tsdk": ".yarn/sdks/typescript/lib",
    "typescript.enablePromptUseWorkspaceTsdk": true
  }
}

5. 由於設置enablePromptUseWorkspaceTsdk已經說明，現在應該顯示一個提示，詢問您是否要將 TypeScript 版本更改為 SDK 版本。 If you don't get that, you can also configure it via: ctrl / cmd + shift + p -> TypeScript: Select TypeScript Version... -> Use Workspace Version (version ending with -sdk ).
6. 根據您的處理方式，您可能需要重新加載： ctrl / cmd + shift + p -> Developer: Reload Window

Answer 4

為了在 Yarn 2 PnP 中使用 VScode：

1. 執行yarn dlx @yarnpkg/sdks vscode
2. 安裝並啟用 ZipFS 插件 ( https://marketplace.visualstudio.com/items?itemName=arcanis.vscode-zipfs#:~:text=This%20extension%20adds%20support%20into,edit%20files%20from%20your%20cache . ) 如官方 Github 問題中所述（ https://github.com/microsoft/vscode/issues/75559 ）