使用vite创建vue3项目，配置ts和tsx出错

[tgy3300]

问题描述

使用vite创建vue3项目，配置ts和tsx出错，主要是vscode编辑器不能识别jsx语法，但是可以正常启动

问题复现

一、初始化项目
npm create vite@latest
输入项目名、选择Vue、TypeScript

二、配置tsx
1、npm i -D @vitejs/plugin-vue-jsx
2、在vite.config.ts中加入tsx
import vueTsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
  plugins: [vue(),vueTsx()],
})

三、新建src/page.tsx，代码如下
import { defineComponent } from 'vue'
export default defineComponent({
	setup() {
		return () => (
			<div>入口</div>
		)
	},
})

四、启动测试
npm run dev

问题

第四步是能正常跑起来的，就是在vscode编辑器中，第三步的 <div>入口</div> 中的

和

报错：JSX 元素隐式具有类型 "any"，因为不存在接口 "JSX.IntrinsicElements"

系统信息

谷歌浏览器，node版本：20.11.1

[s3xysteak]

tsconfig.json ( jsconfig.json )

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "vue"
    // ...
  }
}

https://vuejs.org/guide/extras/render-function.html#jsx-type-inference