使用 Yarn v3.2.3 的 VSCode 上出现 Typescript linting 错误

Question

每当我打算创建

react

或使用新的

next app

的

yarn v3.2.3

时，我的 VS Code 都会抛出 linting 错误，如下图所示。 主要是，linter 会抛出

ts(2307)

又名

Cannot find module 'next' or its corresponding type declarations.ts(2307)

错误。

Answer 1

我发现 .vscode 文件夹中包含一个名为 settings.json 的文件，如下所示有助于解决此问题。我收到一个 vscode 的提示表单，询问我是否希望它使用工作区打字稿，一旦我选择“是”，所有红色错误都会消失，我可以工作了。

我认为这是关于纱线工作空间的事情。希望这有帮助:)

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

Answer 2

如果您仍然有兴趣在当前或未来的项目中使用 Yarn 3+，请按照以下步骤在 VS Code 中正确设置 Yarn 3+。

1. 使用 VSCode 打开 Next.js 项目

2. 安装ZipFS扩展

3. 运行以下命令

   yarn dlx @yarnpkg/sdks vscode
   

   这将在工作区的

   settings.json

   文件夹中创建一个

   .vscode

   。

4. 接下来，打开工作区中的任何

   .ts

   或

   .tsx

   文件，然后按

   CTRL

   +

   SHIFT

   +

   P

5. 键入

   typescipt

   ，直到看到一些与 TypeScript 相关的选项。选择

   TypeScript: Select TypeScript Version...

6. 最后选择

   Use Workspace Version

如果设置正确，您将在

settings.json

中看到

.vscode

，其中包含与Michael之前回答的配置相同或相似的配置。您会注意到的第二件事是

sdks

目录中的

.yarn

目录，其中包含与您的工作区相关的 TypeScript 服务器配置。

如需进一步阅读，请访问Yarn Editor SDKs