如何配置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中：找不到"node"的类型定义文件。

并且在test.ts中：找不到名称"process"。是否需要为节点安装类型定义？尝试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不再报告错误时，当我将process悬停在test.ts中时，它正确地返回NodeJS.Process。这至少表明大多数设置应该是正确的，也是唯一给VSCode带来麻烦的PnP。

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

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

在monoreo中使用Yarn工作区时，第1步我也遇到了另一个问题，我必须将typescript、prettier和eslint作为devDependencies安装到根包中(通常没有任何依赖项)。在第2步，我将路径更改为frontend/.yarn/sdks/typescript/lib

以下是部分答案，因为在谷歌搜索yarn 2 vscode时，此页面是最高结果。

TL；DR-据我目前所知，使Yarn 2在VSCode中工作的唯一方法是在单个文件夹工作区内。

就上下文而言，我将yarn2设置为单repo，并使用带有TypeScript的Create React App，我会像OP描述的那样到处都是红色的歪歪扭扭的线，但在命令行中，一切都很好。

根据此处的纱线2说明：

将TypeScript添加到您的项目根目录：

yarn add -D typescript

运行SDK命令：

yarn dlx @yarnpkg/sdks vscode

这将向.yarn/sdks添加SDK文件，并创建一个具有以下setttings.json的.vscode文件夹

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

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

但是，如果您在多文件夹VS代码工作区(右键单击->将文件夹添加到工作区)中执行此操作，您将看到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版本，然后选择工作区版本。

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

虽然我已经接受了另一个答案，但如果我能准确地说出我最终是如何做到的，我认为这会对人们有所帮助。

安装最新版本的Yarn:
1. npm install -g yarn
2. cd ~/path/to/project
3. yarn set version latest(或yarn set version berry，但我使用了latest)
或者，如果您像我一样，暂时在.yarnrc.yml中使用nodeLinker: node-modules，则必须删除该行并运行yarn install，使其返回到Yarn 2.x及更高版本的默认Plug'n'Play设置。
至少需要在根项目中安装需要修补才能使用Plug'n'Play的开发依赖项。我的根包.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 -> 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
}
}

由于设置enablePromptUseWorkspaceTsdk已经阐明，现在应该会出现一个提示，询问您是否要将TypeScript版本更改为SDK的版本。如果你没有得到，你也可以通过以下方式配置它：ctrl/cmd+1shift>+p1->TypeScript: Select TypeScript Version...->Use Workspace Version(以-sdk结尾的版本)
根据您的操作方式，您可能需要重新加载：ctrl/cmd+1shift>+p1->Developer: Reload Window

为了将VScode与Yarn 2 PnP:一起使用

执行yarn dlx @yarnpkg/sdks vscode
安装并启用ZipFS插件(https://marketplace.visualstudio.com/items?itemName=arcanis.vscode-zipfs#：~：text=此%20扩展%20将%20支持%20添加到%20中，从%20编辑%20文件%20您的%20缓存。)正如Github官方发布的那样(https://github.com/microsoft/vscode/issues/75559)

相关内容

最新更新

热门标签：