Octohint：瀏覽 GitHub 代碼的利器

大部分開源項目都託管在 GitHub 上，瀏覽 GitHub 多是許多程序員成爲天天必作的事情之一。有些時候咱們想要了解一些具體的實現細節，看 README 或 API 文檔是不夠的：這種狀況就須要直接看代碼。

在 GitHub 上瀏覽代碼是有一些痛點的：它只提供基本的語法高亮。好比想找到某個變量出現或者聲明的位置，通常只能經過瀏覽器自帶的查找工具（Command + F 或 Ctrl + F）去找。若是是一個大的文件，好比有幾千行，要找的變量多是在幾百行前聲明的，中途還有一系列修改。這種查找方式比較繁瑣，會形成一些心智負擔。

Octohint 是一個瀏覽器擴展，目標是儘可能減小這種心智負擔，讓瀏覽代碼更加方便。效果圖：

這個示例是一個 TypeScript 文件，能夠看到 Octohint 提供了幾種功能：

• 鼠標 hover 變量名，會顯示變量的類型
• 鼠標左鍵點擊變量名，會顯示這個變量出現的全部位置
• 按住 Command + 鼠標左鍵點擊變量名，會跳轉到這個變量定義的位置（在 Windows 和 Linux 下使用 Ctrl）

安裝

Octohint 的源代碼託管在 GitHub 上：github.com/pd4d10/octo…

支持 Chrome，Safari，Firefox 和 Opera。具體安裝步驟能夠看 README，這裏再也不贅述。目前 Chrome 和 Safari 用戶能夠直接在官方的應用商店直接安裝，Firefox 和 Opera 用戶暫時能夠參照 README 中的步驟安裝

支持的編程語言

Octohint 支持全部的編程語言，會根據實際狀況採起不一樣的策略。支持 IntelliSense 的語言有：TypeScript，JavaScript，CSS，LESS 和 SCSS。其餘語言會降級到 token 匹配，在點擊時匹配到全部相同的 token 並高亮展現。

這是由於 Octohint 的代碼分析是在客戶端作的，而客戶端（瀏覽器）只能運行 JavaScript。IntelliSense 功能須要有 JavaScript 實現的解析器才能集成進來。

支持的平臺

支持 GitHub 和 GitLab。支持私有的 GitLab，須要提供對應站點的權限，具體操做方式能夠查看 README 中的對應章節。

優點與劣勢

業界也有一些提供相似功能的產品，它們有一個共同的特色：代碼分析是在服務端作的。這樣會有一些侷限性：

• 在服務端作分析，意味着須要把代碼發給第三方服務。對於開源項目沒有問題，對於私有的項目好比公司內部的代碼，就沒法使用了，使用者確定不但願把這些代碼泄露給第三方。
• 每次提示都須要與服務端通訊。因此從理論上來講，服務的提供商能夠記錄你的任何行爲。對於注重隱私的用戶來講會有一些隱患。

Octohint 是一個純客戶端的工具，全部的代碼分析都在瀏覽器完成。能夠放心地用在私有代碼倉庫上，也不會發送記錄任何到第三方服務。惟一的網絡通訊是會去 GitHub 上下載代碼，以及去 NPM 和 DefinitelyTyped 上下載對應的類型文件，來提供更豐富的類型提示。

固然，在客戶端作也有侷限性：正如以前所說，由於瀏覽器只能運行 JavaScript，目前 IntelliSense 只能覆蓋到指定的幾種語言，其餘都會降級到 token 匹配。不過 WebAssembly 提供了一種新的可能性：能夠把其餘語言寫的分析器編譯成 WebAssembly 再引入。這是一個將來能夠嘗試的方向。

使用反饋

能夠在 GitHub 上建立 issue。

原文連接：github.com/pd4d10/blog…