在VSCode搭建Vite+React+TypeScript后TSX文件无法识别的问题

云原生阿岚

2026-6-27

解决Yarn+Vite React+TypeScript项目中VSCode无法识别TSX文件的问题

确认TypeScript版本配置生效
打开任意TSX文件，按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入TypeScript: Select TypeScript Version，确保选中Workspace Version (5.5.0-dev.20240314)而非VSCode内置版本。若之前选择无效，重新选中后重启VSCode。
验证Yarn SDK配置文件
检查项目根目录是否存在.yarn/sdks/typescript文件夹，同时查看.vscode/settings.json是否包含以下配置：
```
{
  "typescript.tsdk": ".yarn/sdks/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}
```
若.vscode/settings.json不存在，手动创建并添加上述内容；若已有配置，确认typescript.tsdk路径指向正确的Yarn SDK生成目录。
重新生成Yarn SDK并清理缓存
删除.yarn/sdks文件夹及.vscode/settings.json中TS相关配置，重新执行：
```
yarn dlx @yarnpkg/sdks vscode
```
执行完成后运行yarn cache clean清理缓存，再重启VSCode。
检查tsconfig.json关键配置
打开项目根目录的tsconfig.json，确保compilerOptions包含以下必要配置：
```
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "bundler",
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
```
确认jsx设置适配React版本（React 17+用react-jsx），include覆盖src目录下所有文件。
排查VSCode扩展冲突
暂时禁用ZipFS以外的TypeScript相关扩展（如TypeScript Hero），重启VSCode后观察问题是否解决。若恢复正常，再逐个启用扩展定位冲突源。
确认Yarn版本兼容性
运行yarn --version检查版本，确保使用Yarn 2+（Berry）版本，@yarnpkg/sdks仅支持Yarn Berry。若为Yarn 1，先升级版本：
```
yarn set version berry
```
升级完成后重新执行yarn dlx @yarnpkg/sdks vscode。