VSCode找不到vue、react等模块，是因为Yarn PnP移除了node_modules，而VSCode TypeScript服务默认不读.pnp.cjs虚拟映射；必须用yarn dlx @yarnpkg/sdks vscode生成PnP感知的SDK，并在.vscode/settings.json中配置typescript.tsdk和javascript.tsdk指向.yarn/sdks/typescript/lib，最后重启TS Server才能生效。
VSCode 为什么找不到 vue、react 这些模块？
因为 Yarn Berry 的 PnP 模式彻底移除了 node_modules，所有包都通过 .pnp.cjs 虚拟映射到缓存路径。VSCode 默认的 TypeScript 语言服务只认物理目录，压根不读 .pnp.cjs，所以 import 语句全标红，类型定义也断了。
这不是你代码写错了，也不是 VSCode 坏了——是两边解析逻辑根本没对上号。
-
.pnp.cjs是运行时生效的“路由表”，但 VSCode 的 tsserver 启动时根本没加载它 - TypeScript 工作区版本若指向
./node_modules/typescript，而该路径下实际没有包（PnP 下node_modules是空的），就会 fallback 到内置版本，进一步加剧解析失败 - 即使你手动配了
typescript.tsdk，如果路径没指向 Yarn 提供的 SDK，依然无效
必须用 yarn dlx @yarnpkg/sdks vscode 生成 SDK
Yarn 官方提供的 @yarnpkg/sdks 不是可选插件，是 PnP 场景下唯一能桥接 VSCode 和虚拟依赖系统的方案。它会生成带 PnP 加载逻辑的 TypeScript/JavaScript 包装器，让 tsserver 在启动时主动读取 .pnp.cjs。
执行前确认：yarn 命令可用、项目根目录有 .yarn 目录、且已启用 PnP（yarn set version berry 后默认开启）。
- 在项目根目录运行：
yarn dlx @yarnpkg/sdks vscode - 成功后会创建
.yarn/sdks/typescript/lib和.yarn/sdks/javascript/lib - 这个路径才是
typescript.tsdk必须指向的位置，不是node_modules，也不是全局安装路径 - 如果提示
command not found，说明 Yarn 版本太低或未启用 PnP；检查yarn --version是否 ≥ 3.0，以及.yarnrc.yml中是否含enableGlobalCache: true
.vscode/settings.json 的关键配置项
光生成 SDK 不够，VSCode 得知道该用哪个。直接覆盖工作区设置，别依赖状态栏点击切换——那在 PnP 下经常失效。
在项目根目录的 .vscode/settings.json 中写死以下内容：
{
"typescript.tsdk": ".yarn/sdks/typescript/lib",
"javascript.tsdk": ".yarn/sdks/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true,
"npm.packageManager": "yarn"
}
注意三点：
-
typescript.tsdk和javascript.tsdk必须都设，否则 JS 文件里的 import 也会报错 -
enablePromptUseWorkspaceTsdk设为true是为了防止 VSCode 弹窗干扰，强制走配置路径 - 不要加
./前缀——路径是相对于项目根目录的，.yarn/sdks/...才对；写成./.yarn/sdks/...反而会失败
重启 TS Server + 验证是否生效
改完配置不重启，等于没改。VSCode 不会自动 reload tsserver，尤其在 PnP 下旧进程可能还卡着 .pnp.cjs 的旧快照。
- 按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS），输入TypeScript: Restart TS server并执行 - 打开任意
.ts文件，写一行import { createApp } from 'vue'，看是否还有波浪线 - 把光标停在
vue上，按Ctrl+Click（或Cmd+Click），应能跳转到.yarn/cache/vue-npm-...下的真实类型文件，而不是报 “No definition found” - 如果仍失败，检查 VSCode 底部状态栏的 TypeScript 版本号——它应该显示类似
5.4.5 (workspace version)，且点击后只有 “Use Workspace Version” 选项（没有 “Use VS Code’s Version”）
PnP 的类型解析链很薄：Yarn SDK → .pnp.cjs → 缓存路径 → .d.ts。任一环断开，IDE 就失联。最常被忽略的是忘记重启 TS Server，或者生成 SDK 后没配对路径。
