vscode 代码跳转

使用 VS Code 进行代码定义跳转

在日常的开发工作中，我们经常需要跳转到方法或变量的定义处，以便更好地理解和修改代码。对于一些集成开发环境（IDE）来说，这种功能是非常常见且方便的。比如，在 WebStorm 中，你可以直接点击方法调用，就能够跳转到定义的文件中。

然而，如果你使用的是 Visual Studio Code（简称 VS Code），你可能会发现默认情况下并不能实现这个功能。有人认为 TypeScript 支持这个功能，而 JavaScript 不支持，但实际上 JavaScript 也是可以做到的。问题在于，你可能没有建立相关文件之间的联系。

下面是解决这个问题的步骤：

第一步：创建 jsconfig.json 文件

在项目根目录下新建一个名为 jsconfig.json 的文件。这个文件用来配置 JavaScript 的编译选项和路径映射等信息。

第二步：配置 jsconfig.json

打开 jsconfig.json 文件，并输入以下内容：

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"]
        }
    },
    "exclude": [
        "node_modules"
    ]
}

这里的配置项包括了两个重要部分：

1. baseUrl：设置项目的基础路径，即项目根目录。
2. paths：设置模块名到文件夹的映射。这里我们使用了 @/* 作为模块名的前缀，并将其映射到 src/* 文件夹。你可以根据你的项目具体配置来设置别名。

第三步：享受代码定义跳转的便利

完成以上两个步骤后，你就可以在 JavaScript 文件中进行定义的跳转了。当你点击一个方法或变量的调用处时，VS Code 将会自动跳转到相应的定义处。

如果你需要进行 .vue 文件的跳转，还需要安装一个名为 Vue Peek 的插件。这个插件能够帮助你在 .vue 文件中实现代码定义跳转。

通过简单地配置 jsconfig.json 文件和安装必要的插件，你就能够在 Visual Studio Code 中实现代码定义跳转的功能了。这个功能不仅能够提高开发效率，还能够让你更方便地阅读和理解代码。