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 再引入。这是一个未来可以尝试的方向。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章