如何配置 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版本，我都这样做了。我还确保执行 a Reload Window，但我仍然收到以下错误：

在tsconfig.json：找不到“节点”的类型定义文件。

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

需要注意的是，我可以运行是非常重要的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 WindowVSCode不再报告错误，它正确地返回NodeJS.Process，当我徘徊process在我的test.ts。这至少表明大部分设置应该是正确的，并且它唯一的 PnP 给 VSCode 带来了麻烦。

Answer 1

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

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

在 monorepo 中使用 Yarn 工作区时，我在步骤 1 中还遇到了另一个问题，我必须做的是安装typescript,prettier并将eslintdevDependency 作为根包（通常没有任何依赖项）。在第 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 说明：

将 TypeScript 添加到项目根目录：

yarn add -D typescript

运行SDK命令：

yarn dlx @yarnpkg/sdks vscode

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

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

这里是我们尝试指向 VSCode 使用的 TypeScript SDK 的地方。

但是，如果您在多文件夹 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 问题。

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

VScode -> 新窗口 -> 打开 -> 直接打开你的项目文件夹。然后运行cmd​​+ shift+ p-> 选择 TypeScript Version 并选择工作区版本。

我的 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-modulesin ，则必须删除该行并运行以使其返回到 Yarn 2.x 及更高版本的默认即插即用设置。.yarnrc.ymlyarn install

2. 至少需要在根项目中安装需要修补才能使用即插即用的开发依赖项。我的根 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.多根项目另存为工作区，然后将配置移至文件来解决此.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
  }
}

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

Answer 4

为了将 VScode 与 Yarn 2 PnP 结合使用：

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）