VSCode插件:简单增强 VSCode 的 Control + R

近期接手的需求比较多,各个需求之间又不是线性关系(一个完事儿再开始另一个),往往经常出现一个还没完全结束,另一个就开始了...

在这种场景下,我通常会采用 "空间换时间" 的方法,即对于项目A,我会拉取3 ~ 4份在本地,每一份对应一个分支,这样可以比较快速的切换项目并调试

当然,这只是个人的一种习惯,不是所有人都习惯这样,你若是喜欢在一个项目里频繁的切换分支,倒也何尝不是一种方法,但我不觉得这是一种好的方法。

慢慢的,我经常不确定自己应该要打开哪个项目了,比如对于项目A,我本地有3 ~ 4份,切换时,我会使用 Control + R,调出顶部弹窗,在这里进行切换,就像下面这样:

此时,我可以看到项目名称+项目路径,但是我看不到每个项目对应的分支名,这个对我来说无疑是一个巨大的痛点,我需要去到我的目标分支对应的项目中,但是很遗憾,我不能每次都可以很幸运的选到我想要的项目,经常会打开好几个我不需要的项目,这让我很头疼,每次切换前都祈祷这一次一定对!哈哈哈。

所以,我的诉求就来了,我希望在查看这个目录的时候,能够多一项就是【分支名】,这样我可以很好的分辨出我要去哪个项目

所以,我大概花了2-3个小时完成了这件事,这件事已经在我脑海里1年多了,也尝试思考不同的解法,终于在这次找到了最优雅的解决方案~

下面是增强后的效果:

可以清楚的看到,在保留了原始功能的基础上,很得体的展现了项目对应的分支名!你可以一目了然的看到所有分支,当然,这些数据在你每次呼出侧边栏的时候,都是最新的

OK!你可以从这个链接进去安装这个插件,安装好之后,它会替代你原来的Control + R这个快捷键,你就不会再看到顶部的弹窗了,取而代之的是右侧这个还算美观的小侧边栏

插件商店链接:marketplace.visualstudio.com/items?itemN...

下面是一些实现思路,如果你不感兴趣的话,看到这里就可以了

重点思路

插件实现的其中最重要的一环是:"获取vscode弹窗里的项目列表"

注意!这个列表不是固定死的,而是会将我们最新打开的项目放在最前面。这个列表是我非常需要的,因为不从这里获取的话,我很难统计到用户使用的是哪些工程,如果这些工程让用户手动录入,简直是太蠢了,但如果是我自己去扫描,也不是一个好方法,所以,这个列表是我最最重要的资源

那么如何获取这个列表的数据呢?

简洁明了,直接去看vscode的源码吧,肯定能找着hahaha!

但是,如何入手去看呢?那么老多代码,不好下手... 对!通过关键字去搜索!

可以看到,弹窗内容里有这个关键字:

咱们就从这里开始,直接从vscode源码里搜"选中以打开(按 Cmd 键",会发现搜不到,这也正常,因为vscode源码里本来就没把中文内置进去,中文的表现是插件实现的,我们找到中文插件

然后顺利的得到了仓库地址,打开仓库就看到了源码,在源码里全局搜索,我们得到了一个关键的信息:openRecentPlaceholderMac

这里大家都可以理解,这是做了国际化,真正在vscode源码里的应该是 openRecentPlaceholderMac ,所以我们去vscode源码里搜 openRecentPlaceholderMac 试一试

耶,果然搜到了!

按下面数字的顺序,我们可以反推出,数据来自于:workspacesService.getRecentlyOpened()

现在我就担心一点,如果这个方法只是vscode内部使用的,没有对外部插件暴露的话,那就比较麻烦了,如果对外暴露了,我直接调用就可以拿到一样的数据了。

最后经过不断的搜索查询调用链(这是一个漫长的过程),最终找到了这里:

看语义是注册了一个命令,命令的功能就是调用最近打开过的文件,并返回

所以,看到这里,仿佛就看到了曙光,我迫不及待的搭建了一个插件工程调用,成功!

至此,几乎就成功了一大半了,还有些细节就是获取对应目录的git分支,我问了下ChatGPT,得到了一个还不错的方法

OK!剩下的就是页面的搭建和消息传递,就不多做赘述了,大部分在谷歌上都可以搜到。

以上,就是这次开发小插件的心得,试用了一天感觉还是不错的,有同样痛点的同学可以使用试试哈

相关推荐
__不想说话__11 分钟前
面试官问我React组件和state的关系,我指了指路口的红绿灯…
前端·javascript·react.js
番茄比较犟15 分钟前
Combine知识点switchToLatest
前端
北京_宏哥16 分钟前
🔥《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(15)-Charles如何配置反向代理
前端·面试·charles
Process19 分钟前
前端图片技术深度解析:格式选择、渲染原理与性能优化
前端·面试·性能优化
大松鼠君20 分钟前
轿车3D展示
前端·webgl·three.js
却尘20 分钟前
URL参数传递的两种方式:查询参数与路径参数详解
前端
下辈子再也不写代码了22 分钟前
分片下载、断点续传与实时速度显示的实现方法
前端·后端·github
婷婷婷婷23 分钟前
AntV X6 常用方法
前端
LucianaiB32 分钟前
拿到Offer,租房怎么办?看我用高德MCP+腾讯云MCP,帮你分分钟搞定!
前端·后端·cursor
用户175923421502838 分钟前
D3.js - 基本用法
前端·d3.js