大部分开源项目都托管在 GitHub 上,浏览 GitHub 可能是许多程序员成为每天必做的事情之一。有些时候我们想要了解一些具体的实现细节,看 README 或 API 文档是不够的:这种情况就需要直接看代码。
在 GitHub 上浏览代码是有一些痛点的:它只提供基本的语法高亮。比如想找到某个变量出现或者声明的位置,一般只能通过浏览器自带的查找工具(Command + F 或 Ctrl + F)去找。如果是一个大的文件,比如有几千行,要找的变量可能是在几百行前声明的,中途还有一系列修改。这种查找方式比较繁琐,会造成一些心智负担。
Octohint 是一个浏览器扩展,目标是尽量减少这种心智负担,让浏览代码更加方便。效果图:
这个示例是一个 TypeScript 文件,可以看到 Octohint 提供了几种功能:
安装
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 中的对应章节。
优势与劣势
业界也有一些提供类似功能的产品,它们有一个共同的特点:代码分析是在服务端做的。这样会有一些局限性:
Octohint 是一个纯客户端的工具,所有的代码分析都在浏览器完成。可以放心地用在私有代码仓库上,也不会发送记录任何到第三方服务。唯一的网络通信是会去 GitHub 上下载代码,以及去 NPM 和 DefinitelyTyped 上下载对应的类型文件,来提供更丰富的类型提示。
当然,在客户端做也有局限性:正如之前所说,因为浏览器只能运行 JavaScript,目前 IntelliSense 只能覆盖到指定的几种语言,其他都会降级到 token 匹配。不过 WebAssembly 提供了一种新的可能性:可以把其他语言写的分析器编译成 WASM 再引入。这是一个未来可以尝试的方向。
使用反馈
可以在 GitHub 上创建 issue。