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…