正文 

当前位置： 首页 > 问答 >

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

     2023-02-16     225

关键词：

【中文标题】如何配置 VSCode 以运行 Yarn 2（使用 PnP）驱动的 TypeScript【英文标题】：How to configure VSCode to run Yarn 2 (with PnP) powered TypeScript 【发布时间】：2021-03-27 09:37:15 【问题描述】：

如何配置 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 中的 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 Window VSCode 不再报告错误并且当我将process 悬停在我的test.ts 中时它正确返回NodeJS.Process。这至少表明大部分设置应该是正确的，并且它唯一给 VSCode 带来麻烦的 PnP。

【问题讨论】：

我有一个类似的问题，也许是一样的，在将我的 monorepo 传递给 PnP 之后，在内部包中 TS 没有找到根开发依赖项，并且请求 @types/node，这是以前不需要的。我发现这个线程 github.com/yarnpkg/berry/issues/1058 暗示纱线 2 PnP 变得更具限制性，如果它可以帮助你，我想在你的情况下你必须将 @types/node 添加到开发依赖项。从那时起，如果您找到了合适的解决方案，请不要犹豫分享！ 【参考方案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 安装到根包（它通常不会安装在这个位置） t 有任何依赖项）。在第 2 步中，我将路径更改为 frontend/.yarn/sdks/typescript/lib

【讨论】：

谢谢！在我运行 dlx 命令后，我的 vscode 不允许我在 ctrl-shift-p -&gt; Select Typescript version 上选择工作区打字稿选项。当我在您的第 2 步中添加键值对时，这成为可能。所以使用code-workspace-file 似乎覆盖了我猜的 dlx-command 所做的设置。 我认为步骤 2 可以在您的回答中澄清，您必须编辑 .code-workspace 文件以包含生成的 .vscode/settings.json 条目，步骤 1 的命令现在似乎是 @987654333 @，但我基本上最终做了你描述的事情。在根项目中安装了我的开发依赖项，运行 yarn dlx @yarnpkg/sdks vscode 然后将这些设置复制到我的 .code-workspace 文件中，它现在可以工作了！【参考方案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

这里是我们试图指向供 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 issue 以了解有关消息的讨论。

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

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

My Github issue 概述此问题/解决方案。

【讨论】：

【参考方案3】：

虽然我已经接受了另一个答案，但我认为如果我详细说明我最终是如何工作的，它会对人们有所帮助。

    Install the latest version of Yarn:

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

    或者，如果您和我一样，暂时在.yarnrc.yml 中使用nodeLinker: node-modules，则必须删除该行并运行yarn install 以使其返回默认的即插即用设置Yarn 2.x 及更高版本。

    至少需要在根项目中安装需要修补才能与 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"
    运行 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
    正如@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 -&gt; Preferences -&gt; Settings -&gt; Workspace -&gt; 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

【讨论】：

在通过 Yarn 管理的 VSCode 中使用自定义 eslint 配置文件

】在通过Yarn管理的VSCode中使用自定义eslint配置文件【英文标题】：UsecustomeslintconfigfileinVSCodethatismanagedviaYarn【发布时间】：2018-08-2023:44:20【问题描述】：我已经在VSCode中安装并运行了eslint，但它没有使用我们的配置文件。我更改... 查看详情

vscode在终端中使用yarn命令

VsCode中在集成终端使用yarn命令的出现错误，如下截图。原因：这是因为VsCode中的集成终端使用的是powershell，而计算机上启动WindowsPowerShell时，默认执行策略是Restricted(执行策略不允许任何脚本运行)。解决方案࿱... 查看详情

如何创建 GitHub Action 以使用 Yarn 运行 Jest 测试？

】如何创建GitHubAction以使用Yarn运行Jest测试？【英文标题】：HowdoIcreateaGitHubActiontorunJesttestswithYarn?【发布时间】：2020-04-1110:06:59【问题描述】：我使用Yarn运行我的Jest测试。package.json"scripts":"test":"jest"yarntest当我在GitHub中合并提交... 查看详情

如何使用 vscode 设置 jest typescript 测试以在调试模式下运行

】如何使用vscode设置jesttypescript测试以在调试模式下运行【英文标题】：Howtosetupjesttypescriptsteststorunindebugmodeusingvscode【发布时间】：2019-07-1220:45:52【问题描述】：我通过关注https://github.com/Microsoft/TypeScript-React-Starter创建了一个React... 查看详情

如何设置 Zeppelin 以使用远程 EMR Yarn 集群

】如何设置Zeppelin以使用远程EMRYarn集群【英文标题】：HowtosetupZeppelintoworkwithremoteEMRYarncluster【发布时间】：2015-12-1203:19:30【问题描述】：我有带有Spark1.4.1和Yarn资源管理器的AmazonEMRHadoopv2.6集群。我想在单独的机器上部署Zeppelin，... 查看详情

Yarn 2 PnP、VSCode 和 @types

】Yarn2PnP、VSCode和@types【英文标题】：Yarn2PnP,VSCodeand@types【发布时间】：2021-04-1210:33:32【问题描述】：我想让intellisense为远程库(Chart.js)工作，而不将其作为依赖项包含（通过CDN加载）。所以我使用@types/chart.js来实现智能。yarnadd-D... 查看详情

vscode源码分析环境搭建+以源码运行vscode(代码片段)

安装git，nodejs和yarn安装Python27，3.x版本的不行，确保它在你的环境变量里；安装gulpnpminstall--globalgulp-cli安装windowsbuildtools：npminstall--globalwindows-build-tools--vs2015安装node-gypnpminstall-gnode-gyp下载vscode的源码；用管理员的方式打开pow 查看详情

Yarn 2：如何从 `node_modules/.bin` 目录运行脚本？

】Yarn2：如何从`node_modules/.bin`目录运行脚本？【英文标题】：Yarn2:howtorunascriptfromthe`node_modules/.bin`directory?【发布时间】：2021-12-0317:50:54【问题描述】：如何使用Yarn2从node_modules/.bin目录运行脚本？示例假设我需要运行位于该目录... 查看详情

如何修改 Yarn 的配置？

】如何修改Yarn的配置？【英文标题】：HowdoImodifytheconfigurationofYarn?【发布时间】：2017-02-2009:55:21【问题描述】：在npm我可以跑npmconfigsetcafile"path/to/my/cert.pem"你能用Facebook的yarn做类似的事情吗？当我运行yarn-h时，我看不到任何用于... 查看详情

使用vscode如何调试c#控制台程序_2_加深总结

原文:使用VSCode如何调试C#控制台程序_2_加深总结要想使用调试，必须创建项目1-你要调式的类，控制台类等等，你需要放在一个项目下，这个项目最好是由使用.netcore创建的，VSCode对应的命令为：dotnetnewconsole（这里以控制台为例... 查看详情

如何使用 yarn 2 (berry) 设置工作区存储库

】如何使用yarn2(berry)设置工作区存储库【英文标题】：Howtosetupaworkspacerepositorywithyarn2(berry)【发布时间】：2021-09-0515:58:15【问题描述】：在使用文档和教程几个小时后，我仍然无法运行我的项目。如何将核心包添加到lambda包中？... 查看详情

如何让 yarn 2 在我的项目中工作？

】如何让yarn2在我的项目中工作？【英文标题】：HowdoIgetyarn2toworkinmyproject?【发布时间】：2021-09-2710:27:42【问题描述】：我cd进入我的项目并运行yarnsetversionberry。它使用yarnPath变量创建.yarnrc.yml。但是，如果我在目录中运行yarn，它... 查看详情

vscode为啥打不开但是后台在运行

...运行。VSCode的版本是最新的系统版本是Win10回答1、在VSCode配置好java的开发环境后，在终端运行时出现如下错误2、刚开始以为是系统环境没配置好，结果在PowerShell运行没问题3、网上找到了解决方法，原因是没有权限，在这里记... 查看详情

vscode如何使用模拟器运行flutter项目

参考技术A（1）可以直接在vscode下方终端面板中，执行命令：flutterrun（2）也可以使用vscode右上角快捷键启动项目：Run>StartDebugging 查看详情

如何配置 Apache 2 以运行 Perl CGI 脚本？

】如何配置Apache2以运行PerlCGI脚本？【英文标题】：HowdoIconfigureApache2torunPerlCGIscripts?【发布时间】：2010-10-0807:50:28【问题描述】：我想配置在Kubuntu上运行的Apache2来执行PerlCGI脚本。我尝试了一些通过谷歌搜索发现的步骤，但似乎... 查看详情

vscode中yarn命令不能使用是怎么回事

参考技术A  由于vscode中的集成终端使用的是powershell，所以我们要设置一下powershell的执行权限。 查看详情

使用 Yarn 2 的 PnP 运行脚本

】使用Yarn2的PnP运行脚本【英文标题】：RunningscriptswithYarn2\'sPnP【发布时间】：2021-02-1504:32:47【问题描述】：要，应该运行yarnnodescript.js，而不是nodescript.js。有没有一种通用的方式来运行像ts-node这样的东西（即你不直接调用node，... 查看详情

如何配置 VS Code (windows) 以使用 Ubuntu App 作为终端

】如何配置VSCode(windows)以使用UbuntuApp作为终端【英文标题】：HowtoconfigureVSCode(windows)touseUbuntuAppasterminal【发布时间】：2018-05-0720:17:29【问题描述】：我在Windows10上安装了Ubuntu应用程序，我想将其用作VSCode中的终端。我看到VSCode会... 查看详情