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

时间:2024-03-14 19:26:14

话不多说,直接步入正题

使用项目工程的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插件,并在vscodesetting.json文件中配置
  1. 别名路径跳转(setting.json配置看插件细节说明)在这里插入图片描述
  2. path-alias(setting.json配置看插件细节说明)
    在这里插入图片描述
    例如配置:
    setting.json
"pathAlias.aliasMap": {
    "@": "${cwd}/src"
},
  • 使用这两个插件的任意一个都可以,使用插件的话是ctrl+点击from后面的路径,不能点击import后面的变量名,然后跳转到文件,并不是快速跳转到对应变量声明的位置。
  • 使用插件的方式更加偏向于用户使用的自定义安装插件,并不适合于团队协作,毕竟设置的setting.json文件是存在用户电脑的vscode里面的,并没有在代码项目工程上。