使用vite搭建react+typescript及解决vscode各种红线报错

安装vite 并选择react+typescript

这一部分没有什么问题，按照流程即可
首先 npm create vite 配置相关的项目信息

然后按照如下的流程依次安装即可，此时项目启动成功

配置@别名

在vite.config.ts中加入resolve，添加别名

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": "/src",
    },
  },
})

接着在tsconfig.json的"compilerOptions"中添加baseUrl和paths

 "baseUrl": ".",
 "paths": {
      "@/*": ["src/*"]
    },

vscode各种报错

1. HTML标签报错：比如：类型“JSX.IntrinsicElements”上不存在属性“p”。ts

在

"moduleResolution": "bundler",//改为node
"resolveJsonModule": true, //这行删除

在tsconfig.node.json文件中也改为node

"moduleResolution": "node",

2.报错如下


在tsconfig.json中加入如下代码，表示可以使用 ES 模块语法导入 CommonJS 模块。

"esModuleInterop": true,

3. 报错如下：
   
   在vite-env.d.ts文件中加入如下代码

declare module "*.tsx"

4. 未知的编译器选项“allowImportingTsExtensions”
   从 TypeScript 3.8 开始，这个选项已经被废弃了，直接删掉即可