[英]How to configure VSCode to run Yarn 2 (with PnP) powered TypeScript
How to configure VSCode to run Yarn 2 (with PnP) powered TypeScript如何配置 VSCode 以运行 Yarn 2(带 PnP)供电的 TypeScript
I like to use Yarn 2 (with PnP) and a few months ago I setup a project for which it worked fine.我喜欢使用 Yarn 2(带有 PnP),几个月前我设置了一个项目,它运行良好。 Now I tried to setup a fresh project, but whatever I try, I cannot get VSCode to resolve the modules properly.
现在我尝试设置一个新项目,但无论我尝试什么,我都无法让 VSCode 正确解析模块。 The old project still works and my test case works properly in it, so it must be the new project and not VSCode wherein the problem lies.
旧项目仍然有效,我的测试用例在其中正常工作,所以它一定是新项目,而不是问题所在的 VSCode。
My new project is setup as follows:我的新项目设置如下:
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
I did check similar questions on StackExchange and elsewhere, but they come down to running pnpify
and selecting the TypeScript version within VSCode to be its workbench -pnpify
version, which I both did.我确实在 StackExchange 和其他地方检查了类似的问题,但它们归结为运行
pnpify
并在 VSCode 中选择 TypeScript 版本作为其工作台-pnpify
版本,我都这样做了。 I also made sure to preform a Reload Window
, but I still get the following errors:我还确保执行
Reload Window
,但我仍然收到以下错误:
In tsconfig.json
: Cannot find type definition file for 'node'.在
tsconfig.json
:找不到“节点”的类型定义文件。
And in test.ts
: Cannot find name 'process'.在
test.ts
中:找不到名称“进程”。 Do you need to install type definitions for node?您需要为节点安装类型定义吗? Try
npm i --save-dev @types/node
and then add node
to the types field in your tsconfig.尝试
npm i --save-dev @types/node
然后将node
添加到 tsconfig 中的类型字段。
It is important to note that I can run test.ts
without any problems like so: yarn ts-node src/test.ts
.重要的是要注意我可以运行
test.ts
没有任何问题,例如: yarn ts-node src/test.ts
。 Thus the problem seems limited to the workbench configuration of VSCode (VSCode can still resolve modules for my old project).因此问题似乎仅限于 VSCode 的工作台配置(VSCode 仍然可以为我的旧项目解析模块)。
What steps am I missing in my setup to make Yarn 2 (with PnP) powered TypeScript properly work within VSCode?我在设置中缺少哪些步骤以使 Yarn 2(带 PnP)驱动的 TypeScript 在 VSCode 中正常工作?
VSCode about information: 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
Reported TypeScript version in VSCode: 4.1.3-pnpify
.在 VSCode 中报告了 TypeScript 版本:
4.1.3-pnpify
。
> cd my-project
> yarn --version
2.4.0
Update: I tried adding nodeLinker: node-modules
to .yarnrc.yml
and when I Reload Window
VSCode no longer reports errors and it correctly returns NodeJS.Process
when I hover process
in my test.ts
.更新:我尝试将
nodeLinker: node-modules
添加到.yarnrc.yml
,当我Reload Window
时,VSCode 不再报告错误,并且当我在test.ts
中的 hover process
时它正确返回NodeJS.Process
。 This at least shows that most of the setup should be correct, and its only PnP that is making trouble for VSCode.这至少表明大多数设置应该是正确的,并且它唯一给 VSCode 带来麻烦的 PnP。
I had this problem last night while migrating to Yarn v2 and using PnP.我昨晚在迁移到 Yarn v2 并使用 PnP 时遇到了这个问题。
yarn dlx @yarnpkg/pnpify --sdk vscode
the following folder structure was created inside your .yarn
directory: .yarn/sdks/typescript/lib
.yarn dlx @yarnpkg/pnpify --sdk vscode
后,在.yarn
目录中创建了以下文件夹结构: .yarn/sdks/typescript/lib
。"typescript.tsdk": ".yarn/sdks/typescript/lib"
I also had another problem with step 1 while using Yarn workspaces in a monorepo, what I had to do was to install typescript
, prettier
and eslint
as devDependencies to the root package (where it usually doesn't have any dependencies).在monorepo中使用Yarn工作区时,第1步还有另一个问题,我必须做的是安装
typescript
, prettier
和eslint
作为 devDependencies 到根 package (它通常没有任何依赖项)。 And on step 2 I changed the path to frontend/.yarn/sdks/typescript/lib
在第 2 步中,我将路径更改为
frontend/.yarn/sdks/typescript/lib
Here's a partial answer as this page is top result when googling yarn 2 vscode
.这是部分答案,因为此页面是谷歌搜索
yarn 2 vscode
时的最佳结果。
TL;DR - As I currently understand it, the only way to make Yarn 2 work in VSCode is within a single folder workspace. TL;DR - 据我目前了解,使 Yarn 2 在 VSCode 中工作的唯一方法是在单个文件夹工作区中。
For context, I'm setting up yarn2 as a monorepo, and using Create React App with TypeScript - and I get red squiggly lines everywhere like the OP describes, but in command line everything builds fine.就上下文而言,我将 yarn2 设置为 monorepo,并使用带有 TypeScript 的 Create React App - 就像 OP 描述的那样,我到处都是红色的波浪线,但在命令行中一切都很好。
Based on the Yarn 2 instructions here :根据此处的纱线 2 说明:
Add TypeScript to your project root:将 TypeScript 添加到您的项目根目录:
yarn add -D typescript
Run the SDK command:运行 SDK 命令:
yarn dlx @yarnpkg/sdks vscode
This will add SDK files to .yarn/sdks
, as well as creating a .vscode
folder with the following setttings.json
这会将 SDK 文件添加到
.yarn/sdks
,并使用以下setttings.json
创建一个.vscode
文件夹。json
{
"search.exclude": {
"**/.yarn": true,
"**/.pnp.*": true
},
"typescript.tsdk": ".yarn/sdks/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true
}
Here is where we are trying to point to the TypeScript SDK for VSCode to use.这是我们试图指向 TypeScript SDK 以供 VSCode 使用的地方。
However, if you've been doing this in a multifolder VS Code workspace (where you have right click -> Add Folder to workspace) you will see typescript.tsdk
is greyed out with the message:但是,如果您一直在多文件夹 VS Code 工作区中执行此操作(您可以在其中右键单击 -> 将文件夹添加到工作区),您将看到
typescript.tsdk
显示为灰色并显示以下消息:
This setting cannot be applied in this workspace. It will be applied when you open the containing workspace folder directly.
See this Github issue for discussion of the message.有关该消息的讨论,请参阅此Github 问题。
The solution I've found then, is to go:我当时找到的解决方案是 go:
VScode -> new window -> open -> open your project folder directly. VScode -> new window -> open -> 直接打开你的项目文件夹。 Then run cmd + shift + p -> Select TypeScript Version and select the workspace version.
然后运行cmd + shift + p -> Select TypeScript 版本和 Z99938282F04071685994 工作区版本E1。
My Github issue outlining this issue/solution.我的 Github 问题概述了此问题/解决方案。
Though I already accepted another answer, I think it could help people if I spell out exactly how I made it to work in the end.尽管我已经接受了另一个答案,但我认为如果我准确地说明我最终如何使其工作,它可以帮助人们。
Install the latest version of Yarn : 安装最新版本的 Yarn :
npm install -g yarn
cd ~/path/to/project
yarn set version latest
(or yarn set version berry
, but I used latest
) yarn set version latest
(或yarn set version berry
,但我用的是latest
) Or if you, like me, worked with nodeLinker: node-modules
in .yarnrc.yml
for the time being, you will have to remove that line and run yarn install
to have it go back to the default Plug'n'Play setup of Yarn 2.x and higher.或者,如果你和我一样,暂时使用
nodeLinker: node-modules
in .yarnrc.yml
,你将不得不删除该行并运行yarn install
让它 go 回到默认的 Plug'n'Play 设置纱线 2.x 及更高版本。
At least the dev dependencies that need to be patched to work with Plug'n'Play need to be installed in the root project.至少需要在根项目中安装需要修补才能与 Plug'n'Play 一起使用的开发依赖项。 A simplified version of my root package.json is like follows:
我的根 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
to make VSCode play nice with Yarn's Plug'n'Play setup.yarn dlx @yarnpkg/sdks vscode
以使 VSCode 与 Yarn 的即插即用设置配合得很好。 This will generate the following in .vscode/settings.json
:.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
}
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.
This setting cannot be applied in this workspace. It will be applied when you open the containing workspace folder directly.
We can workaround this issue by making sure the multi-root project is saved as a workspace and then moving the config of .vscode/settings.json
to the .code-workspace
file..vscode/settings.json
的配置移动到 .code .code-workspace
文件来解决此问题。 If you already made it a workspace but can't remember where you stored this file, you can access it via File -> Preferences -> Settings -> Workspace -> Open Settings (JSON)
.File -> Preferences -> Settings -> Workspace -> Open Settings (JSON)
访问它。 For example:{
"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
already spells out, there should now show up a prompt asking whether you want to change the TypeScript version to that of the SDK.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
). TypeScript: Select TypeScript Version...
-> Use Workspace Version
(version ending with -sdk
).Developer: Reload Window
Developer: Reload Window
In order to use VScode with Yarn 2 PnP:为了在 Yarn 2 PnP 中使用 VScode:
yarn dlx @yarnpkg/sdks vscode
yarn dlx @yarnpkg/sdks vscode
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.