Zed 编辑器 Vue 项目 @ 路径别名跳转失效

问题现象

用 @vue/cli（Vue 2）创建的项目，vue.config.js 中配置了自定义路径别名：

config.resolve.alias
  .set("@", require("path").resolve(__dirname, "src"))
  .set("components", require("path").resolve(__dirname, "src/components"))
  .set("views", require("path").resolve(__dirname, "src/views"))
  .set("utils", require("path").resolve(__dirname, "src/utils"));

打开 .vue 或 .js 文件后，Cmd+点击 或 Cmd+] 无法跳转到方法定义或 import 源文件处。

import { getListApi } from "@/api/list";   // Cmd+点击无反应
import axios from 'utils/http'              // 同样跳不过去

原因

Zed 的 JS/TS 语言服务器（底层基于 TypeScript 语言服务）需要 jsconfig.json 才能理解项目中的路径映射。没有这个文件，语言服务器遇到 @/xxx 或 utils/xxx 时就无法解析，自然也就无法提供跳转。

这与 VSCode 的现象完全一致，解决方案也相同——在项目根目录创建 jsconfig.json。

解决方案

在项目根目录创建 jsconfig.json，内容与 vue.config.js 中的 webpack 别名一一对应：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "components/*": ["src/components/*"],
      "views/*": ["src/views/*"],
      "utils/*": ["src/utils/*"]
    },
    "target": "es6",
    "module": "esnext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "jsx": "preserve",
    "experimentalDecorators": true
  },
  "include": [
    "src/**/*.js",
    "src/**/*.vue",
    "src/**/*.json"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "dist-dev",
    "dist-test"
  ]
}

关键字段说明

字段	值	含义
`baseUrl`	`"."`	所有路径相对于项目根目录
`paths`	`@/* → src/*`	告诉语言服务器 `@/` 等价于 `src/`
`moduleResolution`	`bundler`	适合 webpack/Vite 等打包器，不要求文件扩展名
`include`	`src/*/.{js,vue,json}`	只扫描源码目录，提升性能

验证

保存 jsconfig.json
重新加载 Zed 窗口：Cmd+Shift+P → Zed: Reload Workspace
打开任意 .vue 或 .js 文件，在 import xxx from '@/...' 上 Cmd+点击

此时应能正常跳转到目标文件。

注意事项

别名更新后同步修改

以后在 vue.config.js 中新增或修改 webpack 别名时，记得同步更新 jsconfig.json 的 paths 字段。两者不一致会导致跳转目标与实际运行结果出现偏差。

不需要 .zed/settings.json

与 Java/Kotlin 等需要手动指定 LSP 二进制路径的场景不同，Vue/JS 项目的语言服务器 Zed 内置支持，jsconfig.json 配置好后即可正常工作，无需额外创建 .zed/settings.json。

与 VSCode 的关系

这个问题和解决方案在 VSCode 中完全一致——VSCode 也是靠 jsconfig.json 或 tsconfig.json 来解析路径别名的。如果你的团队同时使用两种编辑器，共享一份 jsconfig.json 即可。

文章目录