12

如何配置 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.xml 中的类型字段。

重要的是要注意,我可以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. 这至少表明大多数设置应该是正确的,并且它唯一给 VSCode 带来麻烦的 PnP。

4

4 回答 4

16

我昨晚在迁移到 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 中也遇到了另一个问题,我必须做的是 install typescriptprettier并将eslintdevDependencies 作为根包(它通常没有任何依赖项)。在第 2 步,我将路径更改为frontend/.yarn/sdks/typescript/lib

于 2021-03-30T13:46:55.173 回答
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 及更高版本的默认 Plug'n'Play 设置。.yarnrc.ymlyarn install

  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"
}
  1. 运行yarn dlx @yarnpkg/sdks vscode以使 VSCode 与 Yarn 的 Plug'n'Play 设置一起运行。这将在 中生成以下内容.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
}
  1. 正如@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
  }
}
  1. 由于设置enablePromptUseWorkspaceTsdk已经说明,现在应该会出现一个提示,询问您是否要将 TypeScript 版本更改为 SDK 的版本。如果你不明白,你也可以通过:ctrl/ cmd+ shift+ p-> TypeScript: Select TypeScript Version...-> Use Workspace Version(以 结尾的版本-sdk)进行配置。
  2. 根据您的处理方式,您可能需要重新加载:ctrl/ cmd+ shift+ p->Developer: Reload Window
于 2021-10-01T22:30:06.873 回答
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,并创建一个.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​​++ -> Select TypeScript Version 并选择工作区版本shiftp

我的 Github 问题概述了这个问题/解决方案。

于 2021-09-07T04:58:58.430 回答
0

为了在 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 )中所述
于 2022-01-23T18:28:38.740 回答