【效率提升】vscode 中 js 无法点击 @ 资源跳转定义处

jwensh2023-12-30 19:22

jwensh@2023.12.29

问题

这几天在帮前端项目写单元测试，调试 vscode 环境的时候，发现import formatNumber from '@/utils/tool'; 在 mac 上 command + 鼠标左击 无法跳转到 formatNumber 方法定义的地方

解决

相同的 vscode 插件环境，之前在 typescript 项目下可以成功跳转，当前项目是 javascript 项目，却不可以，应该是没有让 vscode 知道路径的映射关系

确保安装了 JavaScript 语言插件
确保安装了 TypeScript 和 JavaScript 的定义插件，如 JavaScript (ES6) code snippets 和 TypeScript Importer

在项目根目录下运行 tsc --init 或 vim jsconfig.json 来创建一个 tsconfig.json 配置文件或 jsconfig.json 配置文件

因为我们是 javascript 项目，直接创建一个 jsconfig.json 文件即可, 这个文件用来配置 JavaScript 的编译选项和路径映射等信息

json 复制代码

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

baseUrl : 设置项目的基础路径，即项目根目录
paths: 设置模块名到文件夹的映射。如果使用 @/* 作为模块名的前缀，将其映射到 src/* 文件夹

这样就可以在 JavaScript 文件中进行定义的跳转了（command + 鼠标左击 一个方法或变量的调用处时，VSCode 将会自动跳转到相应的定义处）