必裝 6 款超神的 GitHub 插件

有太多加強 GitHub 功能的插件了，就 Chrome 商店就有上千款。本文章不會列舉全部的插件，只會列舉六個你們確定用的到且接地氣的插件，其餘花裏胡哨的或者我沒用過的插件就不推薦了。

圖1：Chrome 商店內的相關插件

因爲網絡的問題，國內下載 Chrome 插件可能不太方便。老逛都幫大家下載好了，在文末獲取下載方式就好了。

1. Octotree 

在開發一個項目的時候，會建立不少包使代碼結構井井有條。

拿 Java 項目來講，通常會建立 src 目錄用來存放項目源碼，test 目錄存放一些用來測試的腳本。在 src 目錄下，還會有 resource 資源和一些業務邏輯代碼（好比遵循 MVC 開發模式的Controller、Service、Dao ）

其餘項目亦然，咱們發現一個完整項目，代碼是井井有條的，可是若是使用 GitHub 看一個項目源碼時體驗會很是差，查看不一樣的目錄操做是這樣的：

圖2：GitHub 目錄操做

毫無疑問，這樣的體驗是很是糟糕的。而 Chrome 插件 Octotree 就能解決這個問題， 當你安裝了這個插件，打開 GitHub 倉庫時會在左邊有一個按鈕，點擊按鈕就會有這個項目的完整目錄樹了，體驗方式和在 IDE 中差很少。

圖3：目錄樹展現

 Chrome 插件 Octotree 有 30W + 用戶，評分 5.0 。

圖4：插件下載示意圖

2. Sourcegraph

若是老逛推薦了一個還不錯的 GitHub 項目，你想學習一下它的代碼邏輯，你會怎麼作 ？我猜應該是先 Download ，導入 IDE 把報錯都解決了，而後 Run 起來，緊接着讀它的源碼。

咱們習慣使用 IDE 讀源碼，緣由多是大部分人都習慣使用 Ctrl + 鼠標左鍵 快速定位代碼的功能。

可是有的人就懶得下載源碼，若是直接在 GitHub 上看源碼是這樣的：

圖5：GitHub 頁面瀏覽源碼示意圖

這樣看源碼既沒有代碼層級結構，也沒辦法跳轉定位。有沒有一款插件可以解決這一痛點？

答案是有的。這個插件的名字叫 Sourcegraph。該插件在 Chrome 商店評分 4.8，100000+ 的用戶，超級受歡迎，功能豐富，宛若一個功能強大的 IDE。

圖6：插件下載示意圖

若是本身沒辦法登陸谷歌商店下載，老逛也提供了其餘的下載方式，老規矩文末獲取。

安裝插件完畢，打開 GitHub ，下圖所示這個炫酷的圖標就會出現，點擊它你就會發現新世界。

圖7：紅圈爲插件功能啓動按鈕

點擊這個圖標，界面會變成下圖這樣的。每一個區域的功能都標註了出來，我以爲在瀏覽代碼層面上能夠媲美編輯器，接下來介紹三個比較經常使用的功能。

圖8：插件功能界面

1. 文件樹瀏覽

這款插件也支持文件樹，並且還配備了更多更強大的功能，若是安裝了這款插件徹底能夠拋棄剛剛提到的 Octotree 插件。

圖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 目錄名 就能夠下載了。

圖10 ：下載部分代碼演示

老逛認爲裝這三個插件就足夠了，下面我會簡單介紹幾個之前用過可是最近不怎麼經常使用的插件，不想往下看的朋友能夠點個贊而後退出了。

Notifier for Github

該插件能夠幫助顯示 GitHub 未讀消息數，一樣也支持桌面通知，讓你第一時間能夠知道 GitHub 上有沒有新消息。

Octohint

GitHub 只提供基本的語法高亮，你想找到某個變量須要 Ctrl + F 去找。若是是一個大的文件，這種傳統查找方式比較繁瑣，效率低下。

安裝了 Octohint 這款插件，在使用 GitHub 瀏覽代碼時，默認會加入參數屬性提示、變量名高亮等功能，讓瀏覽代碼更加方便。

圖11 ：插件功能演示

Github Hovercard

這是一款簡潔的 GitHub 懸浮卡片 Chrome 插件, 可方便的查看 GitHub 上的 user/repo/issue 等信息，加強了 GitHub 的交互體驗。

4. 下載方式

我把這六款插件下載了下來，本公衆號「逛逛GitHub」後臺輸入命令「GitHub插件」就能獲取下 載連接了。

安裝也很簡單：點擊Chrome菜單  →  更多工具  →  擴展程序，進入擴展程序頁面。

圖12：擴展頁面入口

拖拽下載好的 .crx 擴展進去就完成了安裝

圖13：拖拽安裝插件

5. 瞎扯

好了，若是你用過其餘不錯的插件能夠後臺給我留言，我都會看。還有那個搶茅臺的事情也回覆一下你們，後臺不少人問我有沒有搶到，個人積分比較低，因此搶了兩次就放棄了，若是你的小白分低於 100 就不要陪跑了。

最後，喜歡本文章的能夠轉發、在看。 如下平臺都有老逛的身影，歡迎你們關注我在其餘平臺的同名帳號。

           

推薦閱讀

1.  一我的居然擼了一個抖音 App

2.  IntelliJ IDEA 從入門到上癮

3.  GitHub 暗黑模式終於來了！

天天推薦一個有趣、好玩且可能你會用到的 GitHub 項目。

△掃碼關注我△

本文分享自微信公衆號 - 逛逛GitHub（ggGithub）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。