在项目中经常遇到这种需求，点击某一个方法、api 或者某一个变量或组件，需要快速跳转到其定义的地方，然而在 vscode 中本身并不自带这种功能，需要自行配置。相比而言，webstorm 就强大得多。

以前一直都很头大，也不知道 vscode 其实通过配置也能实现，最近无意间发现原来是可以的。配置好后，开发起来也能得心应手了。特此记录下：

1、安装插件 Vue Peek，该插件扩展了 vue 代码编辑，支持转到定义，支持扩展名为.vue 的单文件组件和文件名，允许快速跳转到从模块或模块导入引用的文件。

2、在项目根目录下创建 jsconfig.json 或者 tsconfig.json（取决于你是否使用 ts 开发的），配置如下：

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

• baseUrl：设置项目的基础路径，即项目根目录。
• paths：设置模块名到文件夹的映射。这里我们使用了 @/* 作为模块名的前缀，并将其映射到 src/* 文件夹。你可以根据你的项目具体配置来设置别名。

至此，就可以愉快的玩耍了，在需要进行代码跳转地方，按下 control 或 option 键的同时，点击需要跳转的地方，即可进行代码跳转了，有的是可以直接跳转到新窗口，有的则是以弹窗的形式来展现，想跳转到新窗口则需要二次点击。