GitHubをより快適に使うため、Google Chrome Extensionをいくつか追加してみました。

Table of Contents

背景

エンジニアリングをしているとGitHubでREADMEやソースコードを見る機会は少なくないと思います。
しかし、WebページのGitHubだけでは不便に感じることがありました。

  • READMEのTOCが無い / 見にくい
  • ファイルツリーの構成が分かりにくい
  • 定義や宣言に移動したり、参照箇所の確認ができない

これらの課題を解決するため、いくつかのExtensionを取り入れてみました。

Smart TOC

ページの見出しを解析して、TOCを生成するExtensionです。

GitHubに限らず見出しが整理されたサイトであればどこでも使えるという特徴があります。

VSCodeリポジトリのREADMEを使った例

GitHubのREADMEをこんな感じに閲覧できます。
私の環境ではCtrl+EをTOC表示/非表示に割り当てています。

このExtensionの素晴らしい点は以下2点に尽きます。

  • 参照側でTOCを作成できる (ドキュメント作成者は見出しさえちゃんと定義できていればよい)
  • 自動追尾型のTOC
No article/headings are detected.

このエラーが出てTOCを生成出来ない場合があります。
原因は不明ですが、以下を観測しています。

  • h2ヘッダ以降が存在しないとき (h1ヘッダのみの場合も含む)
  • iframeを利用したページが含まれているとき

Octotree

GitHubのファイルツリーを表示してくれるExtensionです。

VSCodeリポジトリでの表示例

ファイルツリーは現在表示中のファイル位置と同期します。
私の環境ではCtrl+Shift+Sをツリーの表示/非表示に割り当てています。

Sourcegraph

Sourcegraphというサービスと連携するプラグインです。
GitHub上のコードに対して『定義や宣言に移動』『参照箇所へ移動』といったIDEのような機能を提供します。

今のところ対応言語は以下のみとなっているようです。

  • Go
  • Java
  • TypeScript
  • Python

私の三大言語は『Go』『TypeScript』『Python』なのでノープロブレムです😙

Gowlリポジトリでの利用例

私がGoで開発しているGowlリポジトリでの利用例です。

GitHub上のソースコードから定義や宣言に移動できます。
少しindex作成などの時間が取られますが、ローカルへCloneしたりpackageのインストールナシでジャンプできるのは素晴らしいですね😄

参照箇所への移動をする際は呼び出し元が2つ以上の場合、Sourcegraph本体に移動します。

コードを参照したり検索する用途に限って言えば、本家GitHubより優れていると思いました。
そもそもSourcegraphが無ければこのExtensionも存在しませんし。

ファイルツリーが現在のファイル以降しか見られなかったり、ショートカットキーでファイル検索できなかったりというところもありますが…

Gowlについて

せっかくなので宣伝です😄

GowlはGitリポジトリ管理便利ツールです。
Windows/Linux問わず、ターミナルから効率性を重視した現実的な機能を使えますので是非試してみてください。

作成時の記事は以下です。

総括

GitHubでのコードリーディング効率を上げるGoogle Chrome Extensionを紹介しました。

OSSプロダクトを利用して問題が起きたとき、手元で環境構築してから調査するのは大きな心理的ハードルです。
そのハードルを少しでも低くすることで、OSSの世界が一層活発になれば嬉しい限りです。