vscode 之 vue项目如何使用ctrl+鼠标左键跳转对应文件

话不多说，直接步入正题

使用项目工程的jsconfig.json

• 直接在项目中使用jsconfig.json/tsconfig.json文件配置（项目中没有相应的文件的添加文件，有文件的添加"paths": {"@/*": ["./src/*"]}配置即可）

{"compilerOptions":{"target":"ES6","module":"commonjs","paths":{"@/*":["./src/*"]}},"include":["src/**/*"],"exclude":["node_modules"]}

这种直接在项目中使用

jsconfig.json

/

tsconfig.json

文件配置的方法，更加适用于团队协作开发

用户自定义安装插件

• 使用vscode插件，并在vscode的setting.json文件中配置

1. 别名路径跳转（setting.json配置看插件细节说明）
2. path-alias（setting.json配置看插件细节说明） 例如配置：setting.json

"pathAlias.aliasMap":{"@":"${cwd}/src"},

1. Vue Jumper（不需要额外的在settings.json中配置什么，用插件默认的配置也可以） 这个插件文档说明使用中文说明文档，友好阅读，不使用插件自带的配置，可以自行按照文档说明进行相关的插件配置。

• 使用这三个插件的任意一个都可以，使用前两个插件的话是要ctrl+点击from后面的路径，不能点击import后面的变量名，Vue jumper可以直接点击template 的自定义的组件名称以及import 后面的变量名然后跳转到文件，并不是快速跳转到对应变量声明的位置。
• 使用插件的方式更加偏向于用户使用的自定义安装插件，并不适合于团队协作，毕竟设置的setting.json文件是存在用户电脑的vscode里面的，并没有在代码项目工程上。