项目场景:
在项目开发中,为了便于理解js
代码逻辑和调试,通常会使用快捷键自动定位到变量原始定义的文件位置。mac中快捷键:command+鼠标点击
。
但在vue项目开发中,发现这一效果失灵了!!!
问题描述:
代码示例:
import ajax from '@/common/js/ajax'; -- 第一行 引入对象ajax
.....
ajax.postFormData()...; --- 第N行 使用对象ajax
想看看ajax.postFormData
方法是如何自定义的,期望直接跳转到'@/common/js/ajax'
文件。
发现用快捷键command+鼠标点击
第一行的ajax,只是跳转到第N行的ajax。再用快捷键点击’@/common/js/ajax’也没反应。
总之就是无法自动跳转到’@/common/js/ajax’路径文件!!
原因分析:
- vscode无法识别路径中带有
@
符合的路径,无法正确解析
解决方案:
- 在项目根目录中配置jsconfig.json文件,目的是告知如何解析JS文件中的
@
路径,
jsconfig.json文件的具体作用,可以查看vscode官网介绍:https://code.visualstudio.com/docs/languages/jsconfig
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"target": "ES6",
"allowSyntheticDefaultImports": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
这样就完美解决啦~又可以愉快地调试代码啦