如何配置 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 ）