TypeScript 5与VSCode中moduleResolution:bundler配置兼容问题求助

核心问题原因 #

VSCode默认使用内置的TypeScript版本，若该版本低于5.0.2，会无法正确支持moduleResolution: "bundler"与module: "ES2020+"的组合配置，导致模块解析错误。而tsc直接调用项目本地的5.0.2版本，所以能正常工作。

统一配置步骤 #

1. 切换VSCode使用项目本地TS版本

   • 点击VSCode左下角状态栏显示的TypeScript版本号
   • 在弹出菜单中选择「Use Workspace Version」，确保使用项目安装的5.0.2版本

2. 统一tsconfig.json配置
   使用以下配置，同时满足tsc --noEmit检查与VSCode类型提示：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "moduleResolution": "bundler",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    // 若使用React，添加对应JSX配置，否则可移除
    "jsx": "react-jsx"
  },
  "include": ["src"],
  // 若项目存在Vite的Node端配置文件，添加该引用，否则可移除
  "references": [{ "path": "./tsconfig.node.json" }]
}

验证效果 #

• 执行tsc --noEmit，应无配置错误
• 在VSCode中打开导入@mui/material的文件，模块解析错误提示消失

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