必裝 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 專案。

△掃碼關注我△