需求背景
在平常项目开发中,操作某个页面的时候,经常会需要查看当前页面所在的远程仓库的代码情况,也就是比对线上的代码和本地的代码,或者有的时候需要拷贝线上的代码,最笨的方式是这样一种流程:
打开浏览器 → 输入代码仓库地址→找到对应项目→选择本地项目所在的代码分支→一层一层的进入项目目录→找到代码所在的行
可以看到这一套流程非常的长,至少要耗时几十秒,有大量的点击操作,进行视线定位,而我们的目的只是看远程代码,却要执行如此繁琐的且不必要的流程。
而我观之我身边的同事大部分都是这样做的,都是这样不紧不慢的慢慢的去寻找本地项目所在的远程地址,所以我就在思索一个最短路径,只执行一个操作就能够直击本质,达到我想要的目的,从而节省大量的时间。
下面就谈下我的解决方案
解决方案
首先在 vscode 中是没有内置的功能可以直接打开页面所在的远程仓库的,git 也没有相关的命令,最接近的也只是一个git remote -v的命令来查看项目所在的远程仓库地址,但并不能实现查看页面所在的地址。
实现这一功能,必须借助扩展GitLens,这个 vscode 中大名鼎鼎的源代码管理工具不仅提供了 git 的历史管理,同样也提供了大量的内置的命令来实现对 git 文件的一些操作,其中就有打开文件所在的远程仓库命令。
使用 GitLens 查看文件所在远程仓库地址
首先我们通过cmd + shift + p唤出命令窗口,输入openfile就可以看到搜索的匹配项出来:
其中第二个命令Open File on Remote就是GitLens提供的打开文件的远程地址,点击后就会自动打开浏览器访问此页面所在的远程仓库地址。
但是问题要是这么容易的就解决了,也不值当来写一篇文章,其中存在的问题就是,因为仓库地址是公司私有部署的gitlab,是http的地址,而不是https的,而GitLens默认打开的是 https的项目所在地址,这就导致了虽然打开了我想要的地址,但是我还必须要把浏览器地址栏里的 s删掉,才能正确访问。
所以我希望的是GitLens的open file on remote可以指定打开的是http的地址。好在Gitlens提供了相关的配置,我们只需要增加vscode的配置文件即可。
配置 GitLens 实现 HTTP 跳转
通过cmd + shift + p唤出命令窗口,输入open user打开 用户设置 JSON 模式
添加如下配置到 settings.json 中:
"gitlens.remotes": [
{
"domain": "gitlab.domain.com",
"type": "GitLab",
"protocol": "http",
"url": "http://gitlab.domain.com"
}
]
这个配置告诉 GitLens:
- 这是一个
GitLab实例; - 协议要用
http; - 所有关于
gitlab.domain.com的跳转链接都使用http://来拼接。
通过这样的配置,就实现了针对公司私有仓库的项目,执行open file on remote可以跳转http。执行此命令后成功的以http的形式打开了文件所在的远程仓库地址。
更进一步优化
事情到此还没有完,虽然已经能够通过命令的形式快速打开文件所在的远程仓库地址,但在操作上仍旧略显繁琐,需要调出命令窗口,输入命令,选中命令,要经过三次操作,仍旧需要数秒的操作才能实现此需求。
也就是说仍旧存在优化的空间,最理想的情况应该是秒开,这样的速度才是最快的,也是最爽的,而实现秒开的方式则是——通过快捷键的形式来执行这一操作。
使用快捷键绑定命令
vscode 中我最喜欢的一个功能,就是强大的自定义快捷键功能,既然GitLens提供了大量的内置命令,那么同样的这些命令都可以在vscode内实现快捷键的绑定。操作步骤如下:
通过cmd + shift + p唤出命令窗口,输入key关键字,选择open keyboard shortcuts打开键盘快捷方式配置:
接着在输入框内键入 gitlens.open file on remote,获取到匹配的搜索列表,可以看到第一个就是我们想要的命令,配置键绑定⌘ + ⌥ + r。
之所以设置这个键绑定,是因为我在之前的文章vscode中快速打开项目的远程仓库里对打开远程仓库地址设置了⌘ + ⌃ + r,而两者的命令是相似的,一个是打开仓库地址,一个是打开文件地址,所以就用了临近的修饰符⌥作为打开文件的快捷键,r自然代表的就是remote这一关键字。
完成这一配置后,在文件聚焦的情况下,键入快捷键⌥ + r直接就打开了此文件所在的远程仓库地址,而且最关键的是:文件光标在哪行,打开的远程仓库文件就对应跳转到哪一行。
经过这一操作,大大的减少了实现文件跳转远程仓库这一需求所需的时间,其所耗费时间达到了最短,也是我所认为的最佳解决方案。
完成这一配置后,在文件聚焦的情况下,键入快捷键⌘ + ⌥ + r直接就打开了此文件所在的远程仓库地址,而且最关键的是:文件光标在哪行,打开的远程仓库文件就对应跳转到哪一行。
经过这一操作,大大的减少了实现文件跳转远程仓库这一需求所需的时间,其所耗费时间达到了最短,也是我所认为的最佳解决方案。
额外的补充
我在之前文章vscode中快速打开项目的远程仓库里实现打开本项目所在的远程仓库里,所用的方式是通过写自定义脚本结合vscode的快捷键插件来实现的,其解决方案并不优雅,较为繁琐,在探索本次需求的时候,也同样得到了对于打开本地项目所在远程仓库的最优解,因为GitLens也提供了打开项目远程仓库地址的命令,具体实现步骤如下:
打开键盘快捷方式配置,输入gitlens.open repos,匹配到第一条结果就是我们想要的,将之前方式的快捷键⌘ + ⌃ + r绑定给此命令:
至此我们就实现了一次效率革命,通过两个快捷键来实现项目开发中两个常用的查看远程仓库地址和对应的功能。
一点感悟
技术的革命本质都是效率的革命,工具则是技术的具体载体,善用工具,利用工具,减少掉繁琐的不必要流程,更快的达到目的,实现需求,从而节省出更多的时间,去做更多更有益的事情。
这是人类之所以进步的原因,也是我始终追求效率的原因。