VSCode 解决 @别名无法跳转问题 | Vue/React 通用最简单方案

📖 前言

我们在开发 Vue / React 项目时，为了避免冗长的相对路径，经常使用 @/ 别名导入文件：

import { sseRequest } from '@/utils/sseRequest'

但是默认情况下 VSCode 无法识别 @ 符号，导致两个严重痛点：

• ❌ Ctrl + 鼠标左键 无法跳转文件
• ❌ 没有路径智能提示

本文给出最简单、通用、零坑的解决方案，前端所有脚手架通用（Vite / Webpack / VueCLI / CreateReactApp）。

---

💡 原理说明

VSCode 本身不读取 Vite、Webpack 的别名配置。

想要编辑器识别别名，必须手动给 VSCode 一份路径映射说明，也就是：

• JS项目：jsconfig.json
• TS项目：tsconfig.json

---

🛠️ 配置教程（直接复制即用）

1、JS 项目（无TS）

项目根目录新建 jsconfig.json，粘贴以下代码：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

2、TS 项目

打开根目录已有 tsconfig.json，在 compilerOptions 中添加两行：

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

---

✅ 配置生效步骤（必看）

写完配置不要重启VSCode，用官方命令更快：

1. 快捷键 Ctrl + Shift + P
2. 输入命令：TypeScript: Restart TS Server
3. 回车，等待2秒生效

---

🔧 配套：构建工具同步别名（项目不报错）

编辑器识别只是第一步，必须保证项目打包也认识别名，这里附上最常用配置。

Vite 配置（Vue3 / React）

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

Webpack / VueCLI 配置

const path = require('path')
module.exports = {
  resolve: {
    alias: {
      '@': path.join(__dirname, 'src')
    }
  }
}

---

🎁 可选：增强路径提示插件

想要输入 @/ 自动弹出文件夹，推荐安装插件：

• Path Intellisense（轻量稳定、强烈推荐）

可在VSCode设置中追加映射：

{
  "path-intellisense.mappings": {
    "@": "${workspaceFolder}/src"
  }
}

---

❓常见问题排查

1. 配置完不生效？ 执行：重启 TS Server，或重启VSCode。
2. 文件明明存在却报红色波浪线？ 检查 jsconfig.json 是否放在 项目根目录，不是src里面。
3. 项目运行报错找不到模块？ Vite/Webpack 的别名必须和配置文件保持一致。

---

📝 总结

想要 VSCode 支持 @别名跳转，只需要记住一句话：

构建工具管项目运行，jsconfig/tsconfig 管VSCode识别，两者别名保持一致，永久解决别名跳转问题。

本文适配所有 Vue、React 前端项目。