使用Vite创建React TypeScript项目时VSCode出现JSX与tsconfig错误

报错详情 #

1. App.tsx中JSX元素类型错误 #

VSCode里App.tsx始终提示：

Property 'div' does not exist on type 'JSX.IntrinsicElements'.
Property 'a' does not exist on type 'JSX.IntrinsicElements'.
Property 'img' does not exist on type 'JSX.IntrinsicElements'.

项目可正常在浏览器运行，但编辑器报错无法消除。

2. tsconfig.json配置错误 #

tsconfig.json中重复提示：

Option '--resolveJsonModule' cannot be specified without 'node' module resolution strategy.

项目创建命令 #

用户执行的创建命令：

npm create vite@latest npm install npm i -D @types/react-dom

解决方案 #

1. 修复tsconfig.json配置错误 #

打开项目根目录的tsconfig.json，在compilerOptions中添加或修改以下配置：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "jsx": "react-jsx"
  }
}

• moduleResolution: "node"：解决resolveJsonModule的依赖问题
• jsx: "react-jsx"：适配React 17+的自动JSX转换语法，避免类型识别错误

2. 修复React类型依赖问题 #

卸载现有类型依赖并重新安装匹配版本：

npm uninstall @types/react @types/react-dom
npm install -D @types/react@latest @types/react-dom@latest

3. 重启VSCode TypeScript服务 #

按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入TypeScript: Restart TS Server并执行，让编辑器重新加载类型配置。

4. 更正项目创建命令（避免后续问题） #

正确的Vite创建React TypeScript项目步骤应为：

npm create vite@latest my-project-name -- --template react-ts
cd my-project-name
npm install

react-ts模板已内置正确的类型依赖，无需额外手动安装@types/react-dom。

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