Octohint：浏览 GitHub 代码的利器

大部分开源项目都托管在 GitHub 上，浏览 GitHub 可能是许多程序员成为每天必做的事情之一。有些时候我们想要了解一些具体的实现细节，看 README 或 API 文档是不够的：这种情况就需要直接看代码。

在 GitHub 上浏览代码是有一些痛点的：它只提供基本的语法高亮。比如想找到某个变量出现或者声明的位置，一般只能通过浏览器自带的查找工具（Command + F 或 Ctrl + F）去找。如果是一个大的文件，比如有几千行，要找的变量可能是在几百行前声明的，中途还有一系列修改。这种查找方式比较繁琐，会造成一些心智负担。

Octohint 是一个浏览器扩展，目标是尽量减少这种心智负担，让浏览代码更加方便。效果图：

这个示例是一个 TypeScript 文件，可以看到 Octohint 提供了几种功能：

• 鼠标 hover 变量名，会显示变量的类型

• 鼠标左键点击变量名，会显示这个变量出现的所有位置

• 按住 Command + 鼠标左键点击变量名，会跳转到这个变量定义的位置（在 Windows 和 Linux 下使用 Ctrl）

安装

Octohint 的源代码托管在 GitHub 上：https://github.com/pd4d10/octohint。可以点击文章最后的“阅读原文”访问。

支持 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 中的对应章节。

优势与劣势

业界也有一些提供类似功能的产品，它们有一个共同的特点：代码分析是在服务端做的。这样会有一些局限性：

• 在服务端做分析，意味着需要把代码发给第三方服务。对于开源项目没有问题，对于私有的项目比如公司内部的代码，就无法使用了，使用者肯定不希望把这些代码泄露给第三方。