vscode 项目中路径别名跳转配置文件

介绍

我们经常在项目开发的时候会在webpack里面使用别名alias配置 例如：

    alias: {
      "@globalCss": path.join(__dirname, "/src/assets/style/common"),
      "@util": path.join(__dirname, "/src/utils"),
      "@assets": path.join(__dirname, "/src/assets"),
      "@": path.join(__dirname, "/src")
    }

而我们在项目里面引用就省去了很多麻烦 我们可以这样引用：

import styles from "@/assets/style/BulletinManage/index.less";
import Footer from "@/components/footer";

但是，在开发的时候是爽了，但是对查找文件来说就很悲剧了，我使用的是vscode, vscode对相对路径的引用有很友好的操作，例如这样：

import { moduleAccessRecord } from '../../../redux/actions/commonData'

可以通过 Ctrl键 再加鼠标点击直接跳转到对应的文件，但是是别名引用，vscode就显得无能为力了。 之前这个问题也一直困扰我太久 ，不过最经总算是解决了。 我们可以在项目的根目录想新建jsconfig.json文件 来设置一些配置，达到与点击相对路径同样的效果。 注意我是使用js开发的，所以新建文件为jsconfig.json使用ts开发 新建文件为tsconfig.json

{
  "compilerOptions": {
    "experimentalDecorators": true, 
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "@util/*": ["src/utils/*"],
      "@assets/*": ["src/assets/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

jsconfig.json文件做如上配置 就基本可达到与点击相对路径同样的效果。

---

说一下 上面的experimentalDecorators配置 我是react开发 在使用es7的装饰器时 会有提示性的错误，所以我配置了这个属性 就不会有报错的情况了， 对于在设置中配置过"javascript.implicitProjectConfig.experimentalDecorators": true 时，jsconfig.json会覆盖设置里的这个配置，所以需要在jsconfig.json里加上。

---

可以看到在重启之后 鼠标放置到文件引用上就会有弹窗提示了。

成功完成设置

---

记得重启编辑器 就可以了