迁移至pnpm后VSCode的TypeScript自动提示失效问题排查

• Node版本：14.20.0
• pnpm版本：7.9.5
• TypeScript版本：4.4.2
• 项目背景：monorepo项目，近期完成从yarn到pnpm的迁移
• VSCode配置更新：已将VSCode内置包管理器、ESLint的包管理器均设置为pnpm

monorepo中的多个React+TypeScript应用均出现VSCode无法读取嵌套依赖类型的问题，以下以其中一个应用为例说明：

该应用package.json中直接依赖react-router-dom，而react-router-dom依赖react-router，并从中导出useLocation钩子。但在代码中使用useLocation时，VSCode显示类型异常。

奇怪的是ESLint未提示任何错误，说明它能正常跟随pnpm的符号链接读取嵌套依赖的类型，但VSCode的TypeScript服务却无法识别。

VSCode当前使用的是工作区的TypeScript 4.4.2版本。

解决方法 #

1. 开启pnpm依赖扁平化 #

pnpm默认的非扁平化依赖结构可能导致TypeScript无法定位嵌套依赖的类型文件。在项目根目录的.npmrc中添加：

shamefully-hoist=true

执行pnpm install重装依赖后，重启VSCode验证。

2. 显式配置TypeScript路径 #

在应用的tsconfig.json中，为嵌套依赖添加路径映射，帮助TypeScript快速定位：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "react-router": ["node_modules/react-router"]
    }
  }
}

3. 确认VSCode的TypeScript版本 #

打开VSCode命令面板（Ctrl+Shift+P），执行TypeScript: Select TypeScript Version，确保选择Use Workspace Version（即项目的4.4.2版本），而非VSCode内置版本。

4. 清除缓存并重启 #

• 执行pnpm store prune清除pnpm全局缓存
• 删除项目根目录的.tsbuildinfo文件
• 完全关闭VSCode后重新打开项目，等待TypeScript服务重新加载类型定义

内容的提问来源于stack exchange，提问作者pkyriazo