一款 VS Code 扩展, 用于在小程序项目中快速跳转到组件定义。
支持在 wxml 和 json 文件中，通过 跳转到定义 (Go to Definition) 功能，快速定位并打开小程序组件的源文件。自动解析路径别名和组件引用。
在 VS Code 扩展市场搜索 MP Component Jumper 或通过以下链接安装：
- 安装插件后即可零配置使用。
- 打开
wxml或json文件, 将光标放在组件标签或路径上。 - 使用 VS Code 的 跳转到定义 (Go to Definition) 功能 (如
F12或Cmd/Ctrl + 点击)。
- 文件类型: 默认仅查找
.js和.ts后缀的组件逻辑文件 - 路径别名: 自动识别项目
tsconfig.json中定义的路径别名
如果默认行为不满足需求, 可以在项目根目录创建 mp-component-jumper.config.js 文件来覆盖或扩展默认配置。
// mp-component-jumper.config.js
const path = require('path');
module.exports = {
// 默认值是 ['.js', '.ts']
// 如果希望跳转时也能找到视图文件, 可以像下面这样添加:
ext: ['.js', '.ts', '.wxml', '.wxss', '.json'],
// 插件会自动读取 tsconfig.json 的 paths 配置。
// 此处的配置项会优先使用, 并覆盖 tsconfig.json 中的同名配置。
// 方式 1: 使用固定路径数组
alias: [
{
name: '@/',
path: path.resolve(__dirname, 'src/'),
},
{
name: '@components/',
path: path.resolve(__dirname, 'src/components/'),
},
],
// 方式 2: 使用函数动态计算路径（适用于复杂项目结构）
// fileDir 是当前编辑文件所在的目录
// alias: (fileDir) => [
// {
// name: '@/',
// path: path.resolve(fileDir, '../../src/'),
// },
// ],
};本插件修改自 mp-component-navigator, 在其基础上进行了优化和调整以适应个人需求。感谢原作者的贡献。