likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 13

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

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

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

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

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

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

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

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

下面是增强后的效果:

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

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

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

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

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

重点思路

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

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

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

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

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

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

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

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

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

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

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

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

耶,果然搜到了!

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

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

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

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

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

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

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

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

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

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

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

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

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

Git仓库地址:github.com/xicunyang/s…

转载自:https://juejin.cn/post/7276260308515274792
评论
请登录