纱线工作区monorepo与vite，反应，顺风-VS代码无法解决包

Question

我用yarn@3工作区。

我的根package.json：

{
  "name": "hello-yarn-workspaces",
  "packageManager": "yarn@3.1.1",
  "workspaces": [
    "apps/*",
    "packages/*"
  ],
  "devDependencies": {
    "@commitlint/cli": "^16.0.1",
    "@commitlint/config-conventional": "^16.0.0",
    "husky": "^7.0.4"
  },
  "scripts": {
    "postinstall": "husky install",
    "prepublishOnly": "pinst --disable",
    "postpublish": "pinst --enable"
  }
}

app/ui中的package.json：

{
  "name": "ui",
  "packageManager": "yarn@3.1.1",
  "scripts": {
    "dev": "vite"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.4.0",
    "@types/react": "^17.0.38",
    "@types/react-dom": "^17.0.11",
    "@vitejs/plugin-react": "^1.1.3",
    "autoprefixer": "latest",
    "postcss": "latest",
    "tailwindcss": "latest",
    "typescript": "^4.5.4",
    "vite": "^2.7.10"
  }
}

我已经在我的app/ui/src文件夹中创建了一个组件，当我运行yarn workspace ui run dev时，该应用程序可以在浏览器中启动。

但是，在VS代码中打开我的monorepo时，它无法解析import语句中的npm包：

// Cannot find module 'react' or its corresponding type declarations.ts(2307)
import React, { ReactElement, useState } from 'react'

同样的情况发生在vite.config.ts中的app/ui

// Cannot find module 'vite' or its corresponding type declarations.ts(2307)
import { defineConfig } from 'vite'
// Cannot find module '@vitejs/plugin-react' or its corresponding type declarations.ts(2307)
import react from '@vitejs/plugin-react'

在WebStorm中打开monorepo时，一切正常。

可以在这里找到repo存储库。

更新：它似乎与PnP机制有关。我遇到了这个问题，并在中设置了nodeLinker:node modules。雅尔克。yml后接纱线安装修复了它。

然而，这个问题的答案对我不起作用。

在运行warn dlx@yarnpkg/sdks vscode后，我在VS代码中遇到了这个错误：

The path /Users/alexzeitler/src/hello-yarn-workspaces/.yarn/sdks/typescript/lib/tsserver.js doesn't point to a valid tsserver install. Falling back to bundled TypeScript version.

. yarn/sdks/typecript/lib中的文件实际上不存在，但我在. yarn/sdks中有一个文件integrations.yml：

# This file is automatically generated by @yarnpkg/sdks.
# Manual changes might be lost!

integrations:
  - vscode

Answer 1

看起来丢失的部分是由于PnP配置造成的：

yarn add --dev typescript ts-node prettier
yarn dlx @yarnpkg/sdks vscode

添加一个最小的tsconfig.json：

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",
    "module": "commonjs",
    "lib": ["ESNext"],

    /* Strict Type-Checking Options */
    "strict": true,

    /* Module Resolution Options */
    "moduleResolution": "node",
    "esModuleInterop": true,

    /* Advanced Options */
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true
  }
}

然后安装这个VS Code扩展，然后执行以下步骤：

• 在打字脚本文件中按ctrl-shift-p键
• 选择“选择打字脚本版本”
• 选择“使用工作区版本”

更多细节可以在文档中找到。