使用Vite创建React TS新项目遇JSX.IntrinsicElements错误求助

修正tsconfig.json配置 #

确保你的tsconfig.json里正确配置React相关类型选项，关键配置如下：

{
  "compilerOptions": {
    "jsx": "react-jsx", // 适配React 17+自动JSX转换，Vite默认使用该配置
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "types": ["vite/client"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

重点检查jsx字段，若被修改为react等其他值，会导致JSX类型识别异常。

补全必要类型依赖 #

确认已安装@types/react和@types/react-dom，若未安装，执行以下命令：

npm install @types/react @types/react-dom --save-dev

Vite初始化项目时通常会自动安装，但手动删除或版本不匹配也会引发类型错误。

重启VS Code的TypeScript服务 #

VS Code的TS服务可能缓存旧配置，按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入TypeScript: Restart TS Server，重启后错误大概率会消失。

检查文件扩展名 #

确保React组件文件的扩展名是.tsx而非.ts，只有.tsx文件才会被TypeScript识别为支持JSX语法的文件。

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