带有 vite、react、tailwind 的 yarn 工作区 monorepo - VS Code 无法解析包答案

【问题标题】：yarn workspaces monorepo with vite, react, tailwind - VS Code fails to resolve packages带有 vite、react、tailwind 的 yarn 工作区 monorepo - VS Code 无法解析包
【发布时间】：2022-01-03 23:04:01
【问题描述】：

我使用yarn@3 工作区创建了一个monorepo。

我的根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"
  }
}

apps/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"
  }
}

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

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

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

vite.config.ts 中的 apps/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 时，一切正常。

可以在here找到repro存储库。

更新：貌似和PnP机制有关。我遇到了this question 并在.yarnrc.yml 中设置nodeLinker: node-modules，然后yarn install 修复了它。

但是，这个问题的分析器对我不起作用。

我在运行yarn dlx @yarnpkg/sdks vscode 后在 VS Code 中收到此错误：

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/typescript/lib 中的文件实际上不存在，但我在.yarn/sdks 中有一个文件integrations.yml：

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

integrations:
  - vscode

【问题讨论】：

标签： reactjs typescript visual-studio-code yarn-workspaces yarn-v2

【解决方案1】：

看起来丢失的部分是由于PnP configuration：

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
  }
}

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

在 TypeScript 文件中按 ctrl+shift+p
选择“选择 TypeScript 版本”
选择“使用工作区版本”

更多详情请见docs。

【讨论】：