Hama Blog

概要

VSCodeで、カーソル行の変更に紐づくPull Requestをブラウザで開く拡張機能※ があったのだが、しばらく前にアーカイブされて新規には使えなくなっていそうだったので、同様のこと(= カーソル行のcommit hashから該当PRを検索してブラウザで開くこと)ができるコマンドを自分で作り、ショートカットに設定してみた。

※ vscode-tosa という拡張機能、数年前に前職の先輩エンジニアに教えてもらった。

概要
前提
成果物
解説
作ろうと思った経緯
課題
さいごに

前提

GitHub CLIのインストール&認証ができていること。

成果物

keybinging.jsonに以下を設定するだけ。
key は好きなものを設定。

{
  "key": "cmd+k cmd+p",
  "command": "workbench.action.terminal.sendSequence",
  "args": {
    "text": "for pr in $(gh pr list -s all -S $(git blame -L ${lineNumber},${lineNumber} ${relativeFile} | awk '{print $1}') | awk '{print $1}'); do gh pr view -w \"$pr\"; done\n"
  }
}

※ GitHub Flowのような開発フローだとcommit hashに紐づくPRは1つになることが多いと思うが、git-flowのような開発フローだと複数紐づくと思うので、それに対応できるようにしている。

GitHub CLIを使ってcommit hashに紐づくPRを探すやり方は、こちらの記事が大変参考になりました！ありがとうございます！

zenn.dev

解説

まず、VSCodeのkeybinging.jsonでは "command": "workbench.action.terminal.sendSequence" を使えば、任意のコマンドをターミナルに送ることができる。

今回は以下のようなコマンドをargsとして送ることにした。

for pr in $(gh pr list -s all -S $(git blame -L ${lineNumber},${lineNumber} ${relativeFile} | awk '{print $1}') | awk '{print $1}'); do gh pr view -w \"$pr\"; done\n

このコマンドを分解すると、以下のことをしている。

git blame -L ${lineNumber},${lineNumber} ${relativeFile} | awk '{print $1}'
- ${lineNumber}, ${relativeFile} のようなVSCodeの変数をもとにgit blameでカーソル行の最新commit情報を取得。
  
  code.visualstudio.com
- 出力結果は以下のように出力されるので、awkコマンドを使って1列目の結果(commit hash)を取得する。
```
$git blame -L 20,20 test/hoge.rb
4d165163 test/hoge.rb (user_name 2024-12-22 14:32:41 +0900 20)   if hoge
```

gh pr list -s all -S $(...) | awk '{print $1}'

GitHub CLIの機能で、-S(--search <query>)を使うことで、引数($(...)の部分)で渡したquery(今回はcommit hash)をもとにPRを検索することができる。

cli.github.com

検索結果は以下のように出力されるので、awkコマンドを使って1列目の結果(以下の例だと14, 15, 16)を取得する。

$gh pr list -s all -S 4d165163

Showing 3 of 3 pull request in user_name/repository_name that matches your search

ID   TITLE                                    BRANCH                      CREATED AT       
#14  Test PR For Feature Branch  test_branch  about 1 month ago
#15  Test PR For Develop Branch  test_branch  about 1 month ago
#16  Test PR For Release Branch  test_branch  about 1 month ago

for pr in $(...); do gh pr view -w \"$pr\"; done\n
- 上記の gh pr list ~ で取得したPRのの数だけ、for文で gh pr view -w \"$pr\" を実行する。
- gh pr view -w は、ブラウザでPRを開くことができる。
  
  cli.github.com
```
gh pr view [<number> | <url> | <branch>] [flags]
```
- 末尾の \n (改行)は地味に重要。
  - これがないと単にターミナルにコマンドが送られるだけになり、実行するには自分でターミナル上でEnterを押す必要がある。

つまりまとめると、 git blameでカーソル行のcommit hashを取得 → commit hashからPRの一覧を検索 → 検索結果の全てのPRをブラウザで開く ということをしている。

作ろうと思った経緯

開発作業や調査をしていたりすると、コードの背景などを知るために、その変更が行われたPull Requestを見に行くことがあると思う。(自分はある)

そのときに、いくつか方法はあるとは思うが、自分は前述の拡張機能を使っていた。

しかし最近、自分の環境が新しくなり、前述の拡張機能を再インストールしようと思ったらできなくなっていそうだった。

なので、代わりに gitlens.openCommitOnRemote などで該当行のコミットをブラウザで開いて、紐づいているPRのリンクを辿ったりするようにしていた。

それでも大きく手間ではないのだが、直接PRを開くことができる方法がないか探していたところ、完全に代替できそうなものが見つけられなかった。
(ちゃんと探せば本当はあるかもしれない)

そんな中で、ふとVSCodeのkeybindingでカスタムコマンドを設定できたことを思い出し、今回の内容を設定してみた。

課題

とりあえず今回作った内容でおおむね満足はしているが、以下の2点の課題があると思っている。

現在アクティブなVSCode上のターミナルで実行される。
- つまり、VSCode上のターミナルでDockerコンテナに入っていたりして、それがアクティブになっていると、今回のコマンドがDockerコンテナ上で実行され、エラーになる。
- 回避するには、新しいターミナルを開き、そちらをアクティブ状態にしておく必要がある。
git-flowのような開発をしていると複数のPRが紐づくことがあり、その場合は全てのPRがブラウザで開かれるが、Feature BrachのPRだけがいい。
- ブランチ名などに命名規則があると思うので、それを条件に入れてあげればよさそう。

さいごに

GitHub CLIは個人的にはあまり使ったことがなく、GUIで十分だと思っていたけど、こういうときにすごく役立つことがわかってよかった。

上記に書いたような課題はあるので、作れそうなら拡張機能にしてみたないとも思った。

Hama Blog

主にtech関連の記録

VSCodeでカーソル行の変更に紐づくPull Requestを開くショートカットを設定する

概要

前提

成果物

解説

作ろうと思った経緯

課題

さいごに