如何配置 VSCode 到运行 Yarn 2（使用 PnP）驱动的 TypeScript

Question

我喜欢使用 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 和其他地方检查过类似的问题，但它们归结为运行ning pnpify 并选择 VSCode 中的 TypeScript 版本作为其 workbench -pnpify 版本，我都这样做了。我还确保执行 Reload Window，但我仍然收到以下错误：

在 tsconfig.json 中：找不到 'node' 的类型定义文件。

并且在 test.ts 中：找不到名称 'process'。您需要为节点安装类型定义吗？尝试 npm i --save-dev @types/node，然后将 node 添加到 tsconfig 中的类型字段。

重要的是要注意，我可以运行 test.ts 而不会出现任何问题，例如 yarn ts-node src/test.ts。因此问题似乎仅限于 VSCode 的 workbench 配置（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 不再报告错误并且它正确 returns NodeJS.Process 当我在我的 test.ts 中悬停 process 时。这至少表明大部分设置应该是正确的，并且它唯一的 PnP 正在为 VSCode.

制造麻烦

Answer 1

我昨晚在迁移到 Yarn v2 并使用 PnP 时遇到了这个问题。

确保在运行 yarn dlx @yarnpkg/sdks vscode 之后在 .yarn 目录中创建了以下文件夹结构：.yarn/sdks/typescript/lib.
更改您的 VSCode 工作区配置以添加以下内容：
"typescript.tsdk": ".yarn/sdks/typescript/lib"

在 monorepo 中使用 Yarn 工作区时，我在步骤 1 中也遇到了另一个问题，我必须做的是将 typescript、prettier 和 eslint 作为 devDependencies 安装到根包（通常没有任何依赖项）。在第 2 步，我将路径更改为 frontend/.yarn/sdks/typescript/lib

Answer 2

这是部分答案，因为此页面是谷歌搜索时的最佳结果 yarn 2 vscode。

TL;DR - 据我目前了解，使 Yarn 2 在 VSCode 中工作的唯一方法是在单个文件夹工作区内。

对于上下文，我将 yarn2 设置为 monorepo，并使用带有 TypeScript 的 Create React App - 我到处都看到红色的波浪线，就像 OP 描述的那样，但在命令行中一切都很好。

基于Yarn 2 instructions here：

将 TypeScript 添加到您的项目根目录：

yarn add -D typescript

运行 SDK命令：

yarn dlx @yarnpkg/sdks vscode

这会将 SDK 文件添加到 .yarn/sdks，并创建一个包含以下 setttings.json

的 .vscode 文件夹

{
  "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 issue 以了解对消息的讨论。

我当时找到的解决方案是：

VScode -> 新建 window -> 打开 -> 直接打开你的项目文件夹。然后运行 cmd + shift + p -> Select TypeScript 版本和 select 工作区版本。

My Github issue 概述此 issue/solution.

Answer 3

虽然我已经接受了另一个答案，但我认为如果我能准确说明我最终是如何让它发挥作用的，它会对人们有所帮助。

Install the latest version of Yarn:
1. npm install -g yarn
2. cd ~/path/to/project
3. yarn set version latest（或者yarn set version berry，但我用的是latest）
或者，如果您像我一样，暂时在 .yarnrc.yml 中使用 nodeLinker: node-modules，则您必须删除该行，然后运行 yarn install它回到 Yarn 2.x 及更高版本的默认即插即用设置。
至少需要在根项目中安装需要修补才能与 Plug'n'Play 一起使用的开发依赖项。我的 root 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"
}

运行 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
}

如@dwjohnston 所述，此配置不适用于多根设置并给出错误：This setting cannot be applied in this workspace. It will be applied when you open the containing workspace folder directly. 我们可以通过确保将多根项目另存为工作区，然后将 .vscode/settings.json 的配置移动到 .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
  }
}

由于设置 enablePromptUseWorkspaceTsdk 已经说明，现在应该会出现一个提示，询问您是否要将 TypeScript 版本更改为 SDK 的版本。如果你不明白，你也可以通过以下方式配置它：ctrl/cmd + shift + p -> TypeScript: Select TypeScript Version... -> Use Workspace Version（以 -sdk 结尾的版本）。
根据您的处理方式，您可能需要重新加载：ctrl/cmd + shift + p -> Developer: Reload Window

Answer 4

为了将 VScode 与 Yarn 2 PnP 一起使用：

执行yarn dlx @yarnpkg/sdks vscode
安装并启用 ZipFS 插件（https://marketplace.visualstudio.com/items?itemName=arcanis.vscode-zipfs#:~:text=This%20extension%20adds%20support%20into,edit%20files%20from%20your%20cache.) as stated in the official Github issue (https://github.com/microsoft/vscode/issues/75559）

如何配置 VSCode 到运行 Yarn 2（使用 PnP）驱动的 TypeScript

How to configure VSCode to run Yarn 2 (with PnP) powered TypeScript

typescript

visual-studio-code

vscode-settings

yarn-v2

如何配置 VSCode 到 运行 Yarn 2（使用 PnP）驱动的 TypeScript

How to configure VSCode to run Yarn 2 (with PnP) powered TypeScript

typescript

visual-studio-code

vscode-settings

yarn-v2

如何配置 VSCode 到运行 Yarn 2（使用 PnP）驱动的 TypeScript