写一个vscode支持vue文件跳转到定义的插件,又可以愉快地摸鱼了

news2025/2/12 4:40:37

1. 背景

vscode自身是支持vue文件组件跳转到定义的,但是支持的力度是非常弱的。我们在vue-cli的配置的下,可以写很多灵活的用法,这样可以提升我们的生产效率。但是正是这些灵活的写法,导致了vscode自身提供的功能无法支持跳转到文件定义。为了兼容这些灵活的写法,提高工作效率,所以写了一个vscode支持vue文件跳转到定义的插件。

2. 插件

vscode支持vue文件跳转到定义的插件(vue jumper)已正式发布到vscode插件市场,可以到vscode插件市场直接下载体验。

在这里插入图片描述

3. 功能

该插件支持vue-cli提供给我们很多组件引用写法的跳转支持。

3.1 省略写法跳转支持

我们在引用组件的时候,如果组件的名称是index.vue或者index.js时,我们引入时可以省略index.vue或者index.js。如果我们使用了省略写法,vscode自身是无法支持跳转的,所以该插件需要支持省略写法跳转。

import MycoMponent from '../components/MyComponent' // '../components/MyComponent/index.vue'

3.2 alis别名路径跳转支持

在vue-cli(webpack)的配置下,我们可以配置alis别名,这样我们可以提升生产效率,但是vscode本身是不支持的,所以该插件需要支持alis别名路径跳转。

import MycoMponent from '@/components/MyComponent'

3.3 components注册别名跳转支持

vscode本身是支持components注册别名跳转的(如果引入时有省略写法和alis别名路径也是不支持的),所以该插件也需要支持components注册别名跳转。

<script>
import MycoMponent from '@/components/MyComponent'
export default {
    components: {
        MycoMponentReName: MycoMponent
    }
}
</script>

3.4 mixins中引入的组件跳转支持

在实际开发中,我们可以有很多复用的功能抽离到了mixins中,其中包含了组件的引入和注册,这个vscode本身是不支持跳转的,所以该插件支持mixins引入的情况。

<template>
    <MyComponent />
</template>
<script>
import myMixins from '@/mixins/myMixins'
export default {
    mixins: [myMixins]
}
</script>
// myMixins.js
import MycoMponent from '@/components/MyComponent'
export default {
    components: {
        MycoMponent
    }
}

3.5 全局组件引入跳转支持

在全局中注册的组件,vscode本身是不支持这种情况的跳转的。由于全局组件引入的情况比较复杂,该插件使用了模糊查找的方式来查找组件定义的地方,做到了全局组件引入的跳转支持。

<template>
    <MyComponent />
</template>
<script>
// main.js
import vue from 'vue'
import MycoMponent from './components/MyComponent'
vue.use(MycoMponent)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/645849.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MySQL数据库语言二:DML、DQL

&#x1f618;作者简介&#xff1a;正在努力的99年打工人。 &#x1f44a;宣言&#xff1a;人生就是B&#xff08;birth&#xff09;和D&#xff08;death&#xff09;之间的C&#xff08;choise&#xff09;&#xff0c;做好每一个选择。 &#x1f64f;创作不易&#xff0c;动…

Linux---网络传输命令(ping、wget、curl)

1. ping命令 执行 ping 指令会使用 ICMP 传输协议&#xff0c;发出要求回应的信息&#xff0c;若远端主机的网络功能没有问题&#xff0c; 就会回应该信息&#xff0c;因而得知该主机运作正常。 语法&#xff1a;ping [参数] IP名或主机名 参数包括&#xff1a; 注意&#…

Jmeter实现Dubbo接口测试

目录 前言&#xff1a; 一、准备 二、编写我们的测试工程 三、Jmeter来测试这个工程 前言&#xff1a; JMeter可以用来测试Dubbo接口的性能和负载。Dubbo是阿里巴巴的高性能RPC框架&#xff0c;常用于分布式服务的调用。为了测试Dubbo接口&#xff0c;需要使用JMeter提供的…

Android Chrome Custom Tabs

参考文档 API文档 链接 Chrome Custom Tabs 参考文档 https://developer.chrome.com/docs/android/custom-tabs/ Chrome Custom Tabs最佳实践_customtabs_Just_Sanpark的博客-CSDN博客 Chrome Custom Tabs最佳实践_chrome custom tabs集成_wxx614817的博客-CSDN博客 Chrome…

红黑树(RBTree)c++实现

目录 红黑树介绍 红黑树的性质&#xff1a; 红黑树的结点类 搜索(红黑)树的旋转 旋转分为4种(左旋&#xff0c;右旋&#xff0c;左右双旋&#xff0c;右左双旋)&#xff1a; 左旋(RotateL) 右旋(RotateR) 左右双旋(RotateLR) 右左双旋(RotateRL) 红黑树的插入 插入结…

计算机中丢失MSVCP140.dll无法启动此程序怎么办,可以使用这个方法修复

计算机中丢失MSVCP140.dll会导致很多软件跟游戏无法启动运行&#xff0c;这个问题相信困扰着不少小伙伴&#xff0c;遇到这个问题其实不用慌&#xff0c;也无需重装系统。需要先了解清楚MSVCP140.dll文件是什么&#xff0c;已经在我们电脑系统中的作用&#xff0c;了解清楚以后…

【技术干货】数字电路电平标准

信号的逻辑电平经历了从单端信号到差分信号、从低速信号到高速信号的发展过程。最基本的单端信号逻辑电平为CMOS、TTL&#xff0c;在此基础上随着电压摆幅的降低&#xff0c;出现LVCMOS、LVTTL等逻辑电平&#xff0c;随着信号速率的提升又出现ECL、PECL、LVPECL、LVDS、CML等差…

2.7V至25V宽输入电压15A 峰值电流

HT7179是一款高功率异步升压转换器&#xff0c;集成 20mΩ功率开关管&#xff0c;为便携式系统提供高效的 小尺寸解决方案。 HT7179具有2.7V至25V宽输入电压范围&#xff0c;可为 采用单节或两节锂电池&#xff0c;或12V铅酸电池的应 用提供支持。该器件具备15A开关电流能力&a…

【Java基础学习打卡05】命令提示符

目录 引言一、命令提示符是什么二、命令提示符常用命令1.打开命令提示符2.命令演示3.常用命令 总结 引言 知道命令提示符是什么&#xff0c;熟练打开命令提示符&#xff0c;熟练使用常用命令&#xff0c;并自行尝试其他命令。本文只是对命令提示符进行简单介绍和使用。 一、命…

绝版功能回归,Win11开始向Win7进化了

如果将 Win11 上架到 Steam 提供评论打分&#xff0c;那么 Win11 会和很多有争议的游戏一样&#xff1a;褒贬不一。 许多功能是吸引人的&#xff0c;但微软总会在什么时候突然给你一击。 前有 VBS 影响性能、谜之卡顿&#xff0c;后有各种广告、自动安装微软电脑管家。 以及我…

运营活动类项目测试方案设计

1、背景 随着业务的不断发展成熟&#xff0c;商业业务逐渐向重运营、重策略的模式发展&#xff0c;提出的需求中运营活动类需求数量也不断增多。而通过项目的积累、与其他业务的讨论共创&#xff0c;我们也积累了一批对运营活动类项目的测试点和对应的测试方案。下面我将从设计…

List容器(Java)

文章目录 1.容器介绍1.1 容器接口结构1.2 简单解析 2. List容器创建3. 访问操作(get, iterator, for)4. 修改操作(add, remove, set)5. 容量操作(clear, contains, isEmpty, size)6. 其他操作(toArray, )7. 泛型操作 1.容器介绍 1.1 容器接口结构 a. Java存储结构划分   Java…

通过使用动态ip解决网络连接问题

互联网的使用已经成为我们生活中不可或缺的一种生活方式。但是&#xff0c;有时候我们会遇到网络连接问题&#xff0c;如IP地址冲突、网络瘫痪等等。这种情况往往会影响我们的工作&#xff0c;现在我们一般使用动态ip地址来解决这些问题。 一、什么是动态ip地址 动态IP地址是由…

小白也可以做智慧大屏?我来帮你踩踩坑!【华为云Astro低代码体验季】

前提 进入华为云官网进行操作&#xff1a;https://www.huaweicloud.com/ Astro的便捷 其内部丰富的组件&#xff0c;简洁的操作&#xff0c;可支持独立空间管理&#xff0c;让人可以在短时间内就完成非常炫酷以及功能完善的页面 进入编辑页面后&#xff0c;可通过选择左侧的…

GPIO(嵌入式学习)

GPIO知识学习 1. GPIO的基本概念2. GPIO的实际应用3. 功能描述3.1 IO结构框图3.2 知识铺垫模拟/数字信号VDD、VSS、VCC施密特触发器片上外设 3.3 功能详述浮空输入上拉输入下拉输入模拟输入开漏输出推挽输出 4. GPIO相关寄存器4.1 寄存器4.2 功能 1. GPIO的基本概念 GPIO是英文…

java面经1

String, StringBuffer, StringBuilder区别 第一点是可变性。String不可变&#xff0c;String Buffer和StringBuider可变。这是因为String被final修饰&#xff0c;每次操作都生成新的对象。StringBuffer和StringBuilder的父类AbstractStringBuilder没有被final修饰。 第二点是…

视频点播系统

服务端功能模块划分 数据管理模块&#xff1a;负责针对客户端上传的视频信息进行管理。 网络通信模块&#xff1a;搭建网络通信服务器&#xff0c;实现与客户端通信。 业务处理模块&#xff1a;针对客户端的各个请求进行对应业务处理并响应结果。 前端界面模块&#xff1a;…

openEuler 开源汇智赢未来|2023开放原子全球开源峰会OpenAtom openEuler 论坛成功召开

6 月 12 日&#xff0c;2023 开放原子全球开源峰会 OpenAtom openEuler 分论坛在北京成功召开。分论坛以“openEuler 汇众智&#xff0c;奔涌向前赢未来”为主题&#xff0c;展示了 openEuler 社区的最新成果&#xff0c;阐述了 openEuler 开源开放的发展模式&#xff0c;介绍了…

jmeter模拟多用户并发

目录 前言&#xff1a; 一、100个真实的用户 二、100个用户同时登录 前言&#xff1a; JMeter可以轻松地模拟多用户并发&#xff0c;从而测试Web应用程序的性能和稳定性。 一、100个真实的用户 1、一个账号模拟100虚拟用户同时登录和100账号同时登录 区别 &#xff08;…

如何使用Github搭建个人博客

介绍 在本文中&#xff0c;我将介绍如何使用GitHub搭建个人博客&#xff08;免费&#xff09;。GitHub是一个功能强大的版本控制和协作平台&#xff0c;它也可以用来托管和发布静态网页。通过将你的个人博客托管在GitHub上&#xff0c;你可以享受到版本控制的好处&#xff0c;…