装了这 6 款 GitHub 插件,起飞了!

2年前 (2022) 程序员胖胖胖虎阿
147 0 0

有太多增强 GitHub 功能的插件了,就 Chrome 商店就有上千款。本文章不会列举所有的插件,只会列举六个大家肯定用的到且接地气的插件,其他花里胡哨的或者我没用过的插件就不推荐了。

装了这 6 款 GitHub 插件,起飞了!

图1:Chrome 商店内的相关插件

由于网络的问题,国内下载 Chrome 插件可能不太方便。我都帮你们下载好了,在文末获取下载方式就行了。

1. Octotree 

在开发一个项目的时候,会创建很多包使代码结构层次分明。

拿 Java 项目来说,一般会创建 src 目录用来存放项目源码,test 目录存放一些用来测试的脚本。在 src 目录下,还会有 resource 资源和一些业务逻辑代码(比如遵循 MVC 开发模式的Controller、Service、Dao )

其他项目亦然,我们发现一个完整项目,代码是层次分明的,但是如果使用 GitHub 看一个项目源码时体验会非常差,查看不同的目录操作是这样的:

装了这 6 款 GitHub 插件,起飞了!

图2:GitHub 目录操作

毫无疑问,这样的体验是非常糟糕的。而 Chrome 插件 Octotree 就能解决这个问题, 当你安装了这个插件,打开 GitHub 仓库时会在左边有一个按钮,点击按钮就会有这个项目的完整目录树了,体验方式和在 IDE 中差不多。

装了这 6 款 GitHub 插件,起飞了!

图3:目录树展示

 Chrome 插件 Octotree 有 30W + 用户,评分 5.0 。

装了这 6 款 GitHub 插件,起飞了!

图4:插件下载示意图

2. Sourcegraph

如果我推荐了一个还不错的 GitHub 项目,你想学习一下它的代码逻辑,你会怎么做 ?我猜应该是先 Download ,导入 IDE 把报错都解决了,然后 Run 起来,紧接着读它的源码。

我们习惯使用 IDE 读源码,原因可能是大部分人都习惯使用 Ctrl + 鼠标左键 快速定位代码的功能。

但是有的人就懒得下载源码,如果直接在 GitHub 上看源码是这样的

装了这 6 款 GitHub 插件,起飞了!

图5:GitHub 页面浏览源码示意图

这样看源码既没有代码层级结构,也没办法跳转定位。有没有一款插件能够解决这一痛点?

答案是有的。这个插件的名字叫 Sourcegraph。该插件在 Chrome 商店评分 4.8,100000+ 的用户,超级受欢迎,功能丰富,宛若一个功能强大的 IDE。

装了这 6 款 GitHub 插件,起飞了!

图6:插件下载示意图

如果自己没办法登录谷歌商店下载,我也提供了其他的下载方式,老规矩文末获取。

安装插件完毕,打开 GitHub ,下图所示这个炫酷的图标就会出现,点击它你就会发现新世界。

装了这 6 款 GitHub 插件,起飞了!

图7:红圈为插件功能启动按钮
点击这个图标,界面会变成下图这样的。每个区域的功能都标注了出来,我觉得在浏览代码层面上可以媲美编辑器,接下来介绍三个比较常用的功能。
装了这 6 款 GitHub 插件,起飞了!
图8:插件功能界面
1. 文件树浏览

这款插件也支持文件树,而且还配备了更多更强大的功能,如果安装了这款插件完全可以抛弃刚刚提到的 Octotree 插件。
装了这 6 款 GitHub 插件,起飞了!
图9:目录树
2. 代码定位
如果当前文件中有一个实例化的对象,我们想查看该对象对应的类源码,在 IDEA 中,我们可以 Ctrl + 鼠标左键进行定位,装了这个插件可以点击「Go to definition」即可跳转
其实一个叫 OctoLinker 的插也能实现这个功能,但是装了 Sourcegraph 插件就足够了。

视频1:代码定位功能演示
3. 搜索增强
当你刚刚学习了一个技术,想找一个 Demo 学习。这时候你不需要在打开 GitHub 搜索了,配备了这款插件的 Chrome 浏览器即可完成这一操作,没错,直接在浏览器搜索栏搜索代码而不是在 GitHub 平台上的搜索,同时支持持跨仓库搜索。
你只需要在浏览器的地址栏中键入 src 然后空格,即可在 Sourcegraph 上搜索查询 Demo 了。

视频2:
搜索增强功能演示
Sourcegraph 基本可以满足我们在浏览器端浏览源码的需求,但是还有很多需求它无法满足,比如:只想下载一个项目中的某个文件。使用 git clone 命令克隆的是整个仓库,如何轻松地获取一个仓库中的部分代码?

3. GitZip 

该插件就能帮助你轻松下载一个仓库中的部分代码,使用起来也很简单。安装插件后,找到你想下载的目录,在空白处点击鼠标右键,点击 Download 目录名 就可以下载了。


装了这 6 款 GitHub 插件,起飞了!
图10:下载部分代码演示

我认为装这三个插件就足够了,下面我会简单介绍几个以前用过但是最近不怎么常用的插件,不想往下看的朋友可以点个赞然后退出了。

Notifier for Github

该插件可以帮助显示 GitHub 未读消息数,同样也支持桌面通知,让你第一时间可以知道 GitHub 上有没有新消息。

Octohint

GitHub 只提供基本的语法高亮,你想找到某个变量需要 Ctrl + F 去找。如果是一个大的文件,这种传统查找方式比较繁琐,效率低下。

安装了 Octohint 这款插件,在使用 GitHub 浏览代码时,默认会加入参数属性提示、变量名高亮等功能,让浏览代码更加方便。

装了这 6 款 GitHub 插件,起飞了!
图11:插件功能演示
Github Hovercard
这是一款简洁的 GitHub 悬浮卡片 Chrome 插件, 可方便的查看 GitHub 上的 user/repo/issue 等信息,增强了 GitHub 的交互体验。
4. 下载方式
我把这六款插件下载了下来,扫描下方二维码,关注公众号「逛逛GitHub」后台输入命令「GitHub插件」就能获取下载链接了。
1. 扫描二维码关注下方这个公众号
2. 回复命令「GitHub插件」
装了这 6 款 GitHub 插件,起飞了!
安装也很简单:点击Chrome菜单 → 更多工具 → 扩展程序,进入扩展程序页面。
装了这 6 款 GitHub 插件,起飞了!

图12:扩展页面入口

拖拽下载好的 .crx 扩展进去就完成了安装

装了这 6 款 GitHub 插件,起飞了!

图13:拖拽安装插件


本文分享自微信公众号 - Java后端(web_resource)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

版权声明:程序员胖胖胖虎阿 发表于 2022年10月6日 下午5:16。
转载请注明:装了这 6 款 GitHub 插件,起飞了! | 胖虎的工具箱-编程导航

相关文章

暂无评论

暂无评论...