在vue项目中vscode如何跳转到定义 - 温建军的博客

俗话说，工欲善其事，必先利其器。

前言

vscode本身带有跳转到定义的功能：将鼠标指针放在某个函数名或者文件名上，然后按F12或者Ctrl + 鼠标左键就能跳转到某个函数的定义或者引用的某个文件，但这只适用于相对或绝对路径的引用。例如：

import utils from './utils'
import {} from './HelloWorld.vue'

vue文件需要带上后缀才能跳转，JS文件则可以省略

但是在vue项目中，你的引用路径上可能会出现@符号，因为你的webpack配置上设置了alias，这时候vscode自带的跳转定义功能就失效了，并且import的时候也不会出现路径提示。

我之前熟悉项目代码的时候就是因为这样，只能通过复制然后查找这样去找代码，效率简直不要太低。。。（捂脸哭

如何解决

在经过Google一番后，我找到了解决办法：在项目根目录新建一个jsconfig.json文件，然后写入以下内容：

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

重启vscode，就可以愉快的使用跳转定义功能了，并且import的时候也会出现路径提示了，大大的提高了开发效率呢。（知道真相的我眼泪流了下来

注意事项

这里有个问题需要注意一下：jsconfig.json文件一定要放在项目根目录下

如果你的src目录存在于根目录下，上述配置才会生效。即：

FE-Project
├── src
├── jsconfig.json
├── ...

但如果你的src存在于根目录的二级目录下，即类似如下目录结构：

FE-Project
├── otherDir
│    ├── src
├── jsconfig.json
├── ...

就需要改一下baseUrl，而不是把jsconfig.json放在src目录下

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

哦豁，差点忘了还需要先给vscode装上Vetur插件，不过一般写vue的都会装这个插件吧

Path Autocomplete插件

这个插件好像没什么意义。首先vscode已经自带了路径补全功能了；其次这个插件虽然能实现和jsconfig.json差不多的alias路径补全功能，但是貌似不能跳转到定义，并且如果多个项目的目录结构不一致，就需要重新修改插件配置。所以就没有继续使用该插件，当然也可能是我配置错了。

反正jsconfig.json已经满足我的需求了

参考链接

https://github.com/vuejs/vetur/issues/890#issuecomment-487358820

前言

如何解决

注意事项

Path Autocomplete插件

参考链接

FEATURED TAGS