React + TypeScript+ Vite 配置路径别名和vscode智能路径提示

配置路径别名

在根目录下的 vite.config.ts 文件中配置如下代码,就可以使用路径别名了。

ts 复制代码
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  }
})

此时可以正常启动项目,并正确使用路由了。

但是还是会报警告,所以我们还需要配置 vscode 的智能路径提示配置。

修改 Vscode 智能路径提示

在根目录下的 tsconfig.json 文件中配置如下代码。

json 复制代码
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

测试警告也消失了。

相关推荐
csdn_aspnet4 小时前
如何从自定义或本地仓库安装 VsCode 扩展
ide·vscode
患得患失9494 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
CN-Dust4 小时前
【VSCode】复制到下一行快捷键
ide·vscode·编辑器
SoveTingღ11 小时前
【开发环境配置】VScode里面配置cmake遇到的问题
c语言·vscode·cmake·嵌入式软件·开发环境配置
vsropy11 小时前
VScode输出中文乱码问题解决
ide·vscode·编辑器
风清云淡_A12 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界12 小时前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架
DIY全栈开发13 小时前
ESP32S3 Ubuntu vscode如何使用USB-JTAG调试
linux·vscode·ubuntu
GDAL13 小时前
SWC 深入全面讲解
typescript·swc
NicolasCage14 小时前
react-typescript学习笔记
javascript·react.js