VS Code在开发Vue.js时F12转到定义快捷键失效的解决办法

问题描述

在使用VS Code开发时，如果想从HTML代码中快速跳转到对应的JavaScript方法，可以使用F12转到定义快捷键快速跳转，但是却失效了，大大降低了开发的效率

原因分析

在 Vue 项目中，使用 VS Code 进行代码开发时，有时按下快捷键 F12 无法跳转到函数的定义位置。这可能是因为你的引用路径中包含了 @ 符号，而 VS Code 默认的跳转定义功能在这种情况下失效了，并且在导入时也不会出现路径提示。

解决办法

在项目根目录下新建一个名为jsconfig.json的新文件，文件的内容如下所示，直接全部复制进去即可

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "baseUrl": ".",
        "paths": { // 支持Vue组件导入后，可以f12定位
            "@": [
                "./src/"
            ],
            "@/*": [
                "./src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "**/node_modules/*"
    ],
    "include": [
        "./src/**/*"
    ] // 用于智能导入
}