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文件中配置
- 别名路径跳转(
setting.json配置看插件细节说明)
- path-alias(
setting.json配置看插件细节说明)

例如配置:
setting.json
"pathAlias.aliasMap": {
"@": "${cwd}/src"
},
Vue Jumper(不需要额外的在settings.json中配置什么,用插件默认的配置也可以)

这个插件文档说明使用中文说明文档,友好阅读,不使用插件自带的配置,可以自行按照文档说明进行相关的插件配置。
- 使用这三个插件的任意一个都可以,使用前两个插件的话是要
ctrl+点击from后面的路径,不能点击import后面的变量名,Vue jumper可以直接点击template 的自定义的组件名称以及import 后面的变量名然后跳转到文件,并不是快速跳转到对应变量声明的位置。- 使用插件的方式更加偏向于用户使用的自定义安装插件,并不适合于团队协作,毕竟设置的
setting.json文件是存在用户电脑的vscode里面的,并没有在代码项目工程上。
更多推荐
所有评论(0)