关于使用vite创建react+typescript模板时，使用vscode爆红的配置修改

出现问题

环境: vite@4.3.9, react@18.2.9, typescript@5.0.2

在使用vite@4.3.9构建react+typescript模板, 并且使用vscode运行项目时, vscode会报错:Property 'div' does not exist on type 'JSX.IntrinsicElements'.等原生元素引入错误.
引入React、ReactDOM等会报错Module '"e:/vite-temp/node_modules/@types/react-dom/client"' has no default export.
在tsconfig.json中, 会报错Option '--resolveJsonModule' cannot be specified without 'node' module resolution strategy.

还可能会出现Unknown compiler option 'allowImportingTsExtensions'.这样的报错.

解决方法

将 tsconfig.json 中的 moduleResolution 的值改为 "node" (注意 tsconfig.node.json 中的相同键也改为一致的值). 该配置修改可以解决原生元素引入问题.

将 tsconfig.json 中的 compilerOptions 内部加上 "esModuleInterop": true 这一个配置. 这样就可以解决引入React,ReactDOM时报错的问题.

将tsconfig.json中的 "allowImportingTsExtensions": true配置放到与compilerOptions配置的同级位置.

原因

待续