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/*"]
    }
  }
}

测试警告也消失了。

相关推荐
tan180°1 小时前
MySQL表的操作(3)
linux·数据库·c++·vscode·后端·mysql
伍哥的传说2 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
浪裡遊2 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
我在看世界7 小时前
家里vscode连公司内网vscede
vscode·ssh
前端小盆友8 小时前
从零实现一个GPT 【React + Express】--- 【3】解析markdown,处理模型记忆
gpt·react.js
codehub9 小时前
TypeScript 高频面试题与核心知识总结
typescript
Cacciatore->9 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~9 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
贵沫末9 小时前
React——基础
前端·react.js·前端框架
张志鹏PHP全栈10 小时前
TypeScript 第一天,认识TypeScript
typescript