使用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各种报错
- HTML标签报错:比如:类型“JSX.IntrinsicElements”上不存在属性“p”。ts
在
"moduleResolution": "bundler",//改为node
"resolveJsonModule": true, //这行删除
在tsconfig.node.json文件中也改为node
"moduleResolution": "node",
2.报错如下


在tsconfig.json中加入如下代码,表示可以使用 ES 模块语法导入 CommonJS 模块。
"esModuleInterop": true,
- 报错如下:

在vite-env.d.ts文件中加入如下代码
declare module "*.tsx"
- 未知的编译器选项“allowImportingTsExtensions”
从 TypeScript 3.8 开始,这个选项已经被废弃了,直接删掉即可
更多推荐
所有评论(0)