Octo.nvimとgh-dash、たまにdiffview.nvimを使ってNeovim上でコードレビューする

March 9, 2024Updated on April 14, 2024

はじめに

コードレビューを行うとき、ブラウザでGitHubを開き差分を見つつ、エディターで周辺コードを見るというやり方で行っていました。自分はNeovimを使っているのですが、VSCodeを使っている人はほとんどの人が差分の確認からレビューコメントまでVSCodeで完結させているらしいということにある時気づきました。ブラウザとエディタを交互に見るスタイルに特に不満はなかったのですが、コードレビューをエディタ内で完結できる手段を持っておくに越したことはないと思い、Neovimでコードレビューを行う方法を探してみることにしました。

Octo.nvimというプラグインの存在は知っていて、多くの機能があるため使いこなすのが難しそうに感じていましたが、重い腰を上げてOcto.nvimを使ってみることにしました。また、試行錯誤を重ねているうちに、gh-dashとdiffview.nvimというプラグインも見つけました。Octo.nvimだけでなくこれらのプラグインも合わせることである程度快適にコードレビューを行うことができるようになったので、その方法を紹介します。

Octo.nvimとは

GitHub - pwntester/octo.nvim: Edit and review GitHub issues and pull requests from the comfort of your favorite editor

Edit and review GitHub issues and pull requests from the comfort of your favorite editor - pwntester/octo.nvim

GitHub

Octo.nvimはGithubのCLIツールであるghを使って、Neovim上でGitHubの操作を行うことができるプラグインです。NeovimのUIを使ってインタラクティブにPRの作成やレビューを行うことができます。ghコマンドで可能なことは大体できるのかなと想像していますが、READMEにあるコマンド一覧を参照すると、どのような操作ができるかがわかると思います。

gh-dashとは

GitHub - dlvhdr/gh-dash: A beautiful CLI dashboard for GitHub 🚀

A beautiful CLI dashboard for GitHub 🚀 . Contribute to dlvhdr/gh-dash development by creating an account on GitHub.

GitHub

gh-dashはGithub上のdashboard（PRやissueの一覧）を表示することができるプラグインです。公式が提供しているCLIツールであるghのextensionとして公開されています。

diffview.nvimとは

GitHub - sindrets/diffview.nvim: Single tabpage interface for easily cycling through diffs for all modified files for any git rev.

Single tabpage interface for easily cycling through diffs for all modified files for any git rev. - sindrets/diffview.nvim

GitHub

diffview.nvimは差分を見るためのNeovimプラグインです。 1つのtabpageを使って、指定したdiffに含まれるすべてのファイルの差分を見ることができます。Octo.nvimのレビュー画面と似た機能を提供しています。「まさにこのツールの使い所だ！」という場面にまだ遭遇できておらず模索中ですが、差分をサクッと見たいときに便利だと思います。

レビューの流れ

gh-dashでアサインされているPRを見る

まずはgh-dashで自分がレビューワーに指定されているPRを見ます。gh-dashの設定に以下のようなkeymapを定義し、diffの確認あるいはレビューをスムーズに開始できるようにしています。

keybindings:
  prs:
    - key: d
      command: |-
        tmux new-window -c {{.RepoPath}} '
          tmux rename-window {{.RepoName}}#{{.PrNumber}} &&
          gh pr checkout {{.PrNumber}} &&
          nvim -c ":DiffviewOpen origin/$(gh pr status --json baseRefName -q '.currentBranch.baseRefName')...{{.HeadRefName}}"
        '
    - key: C
      command: |-
        tmux new-window -c {{.RepoPath}} '
          tmux rename-window {{.RepoName}}#{{.PrNumber}} &&
          gh pr checkout {{.PrNumber}} &&
          nvim -c ":Octo pr edit {{.PrNumber}}"
        '

diffの確認はd、Octo.nvimで該当のPRを開くためのコマンドはCに割り当てています。tmux new-window で新しいウィンドウを開き、その中で gh pr checkout でPRをチェックアウトし、diffview.nvimやOcto.nvimを開いた状態のNeovimを開いています。tmux new-window の引数に一連のコマンドを渡すことで、diffの確認やレビューを終えてNeovimを閉じるとtmuxのウィンドウも閉じるようになるため、スムーズにgh-dashの画面に戻ることができます。

diffview.nvimで差分を見る

diffの確認をする場合はgh pr checkoutで該当のPRにチェックアウトし、BASEとHEADを指定してdiffview.nvimを開いています。gh-dash ではHEADは {{.HeadRefName}} という変数を展開することで取得できますが、BASEは取得できないため、別途ghコマンドで取得しています。diffview.nvimを開くと、PRの差分が表示されます。ファイルツリーと差分の領域に分かれています。

Octo.nvimでレビューする

コードレビューをする場合はgh pr checkoutで該当のPRにチェックアウトし、Octo.nvimを開いた状態のNeovimを開いています。Octo.nvimを開くと、PRの情報が表示されます。PRのDescriptionやすでに作成されているコメントはここで確認できます。コメントに対する返信やリアクションもここで行うことができます。

:Octo review startでレビューを開始します。レビューコメントの追加ができます。差分はコミットごとにも確認できます。:Octo review startを実行した時点で、レビューがPendingの状態になります。バッファを閉じるとレビューを中断することができます。中断したレビューは:Octo review resumeで再開することができます。レビューが一通り終わったら、:Octo review submitでレビューを提出します。Approve, Request changes, Commentを出し分けることもできます。

Octo.nvimではPRのマージも行うことができます。:Octo pr merge [method]でマージを行うことができ、squashやrebaseなどのマージ方法を指定することができます。

この記事では紹介していませんが Octo.nvim は他にも多くの機能があります。気になった方はぜひREADMEを参照してみてください。

大体の操作はコマンドで提供されており補完の設定もしてるので操作には困らないのですが、ほぼすべての操作に対してデフォルトでキーバインドが割り当てられているため効率化を図りたいと思います。legendary.nvimなどと組み合わせて、操作補助とチートシートを兼ねたものを作成してみようと思いました。（VSCodeでいうコマンドパレットのようなイメージです。）

おわりに

gh-dashとOcto.nvim（とdiffview.nvim）を使うことで、Neovimだけでコードレビューを行う環境を整えることができました。ブラウザとエディタを行き来する手間が省けるため、コードレビューの効率を上げていきたいですね。まだ探り探りの状態ですが、これからもっと使いこなしていきたいと思います。