🚀 Vue Template Jump

作者 yyl · 联系方式：850156593@qq.com（欢迎反馈问题与建议）

这是什么？

一个 VS Code 插件，让你在写 Vue 代码时按住 Ctrl 点击模板中的变量或方法名，直接跳到它在 <script> 里的定义位置。支持 Vue 2 和 Vue 3。

简单说：再也不用滚屏去找某个变量在哪定义的了。

能干什么？

1. 模板中 Ctrl+点击 → 跳到 script 定义

<template>
  <p>{{ userName }}</p>             <!-- Ctrl+点 userName → 跳到下面的 data -->
  <button @click="handleSubmit">    <!-- Ctrl+点 handleSubmit → 跳到下面的 methods -->
    提交
  </button>
</template>

<script>
export default {
  data() {
    return {
      userName: '张三',             // ← 直接跳到这里
    }
  },
  methods: {
    handleSubmit() {                 // ← 直接跳到这里
      // ...
    },
  },
}
</script>

2. <script setup> 也一样支持

不管用的是 Vue 2.7 的 setup 模式，还是 Vue 3 的 Composition API，都能跳：

<template>
  <span>{{ pageTitle }}</span>
  <button @click="onSave">保存</button>
</template>

<script setup>
import { ref } from 'vue'

const pageTitle = ref('首页')       // ← Ctrl+点 pageTitle 跳到这里

function onSave() {                  // ← Ctrl+点 onSave 跳到这里
  console.log('保存成功')
}
</script>

3. 代码里 this.xxx 也能定位

不只是模板，在 <script> 代码中写 this.userName，Ctrl+点击 userName 一样能跳到它的定义处。.vue 文件和 .js 文件都支持。

// 比如一个公共的 mixin 工具文件
export default {
  data() {
    return {
      loading: false,               // ← 定义在这
    }
  },
  methods: {
    fetchData() {
      this.loading = true            // Ctrl+点 loading → 跳到上面 data
    },
  },
}

4. import 导入也能跳

以前 import { xxx } from '@/api/user' 里看到 xxx，想知道它从哪来的，只能手动翻目录。现在 Ctrl+点击 xxx 直接打开对应的文件：

import { getUserInfo } from '@/api/user'   // Ctrl+点 getUserInfo → 打开 @/api/user.js
import { formatDate } from '@/utils/date'  // Ctrl+点 formatDate → 打开 @/utils/date.js
import myMixin from './mixins/table'       // Ctrl+点 myMixin → 打开 ./mixins/table.js

5. 变量来自 mixin？自动跳到 mixin 文件里

<template>
  <div>{{ tableData }}</div>        <!-- 这个变量不在当前文件里？ -->
</template>

<script>
import tableMixin from './mixins/table'
export default {
  mixins: [tableMixin],             // 原来在 mixin 里
}
</script>

Ctrl+点击 tableData → 自动解析 import 路径 → 打开 mixin 文件 → 跳转到 tableData 的定义行。

支持局部 mixin、嵌套 mixin（mixin 里又引了 mixin）、以及全局 Vue.mixin() 注册的变量，递归深度可配。

为什么可靠？

⚙️ 配置

VS Code 设置中搜索 vueTemplateJump：

📦 安装

要求： VS Code 版本 ≥ 1.85.0

VS Code → Ctrl+Shift+P → Extensions: Install from VSIX... → 选择 vue-template-jump-0.2.2.vsix

如果想从源码构建：

npm install
npm run package

Made with ❤️ by yyl · MIT License