はじめに
この記事はAll About Group（株式会社オールアバウト） Advent Calendar 2023の18日目の投稿です。
背景
VSCodeのrelease noteを眺めていると「GitHub Pull Requests and Issues」 という拡張機能を発見。
何ができるのかを見てみると以下のように書いてあります。
This extension allows you to review and manage GitHub pull requests and issues in Visual Studio Code. The support includes:
- Authenticating and connecting VS Code to GitHub and GitHub Enterprise.
- Listing and browsing PRs from within VS Code.
- Reviewing PRs from within VS Code with in-editor commenting.
- Validating PRs from within VS Code with easy checkouts.
- Terminal integration that enables UI and CLIs to co-exist.
- Listing and browsing issues from within VS Code.
- Hover cards for "@" mentioned users and for issues.
- Completion suggestions for users and issues.
- A "Start working on issue" action which can create a branch for you.
- Code actions to create issues from "todo" comments.
日本語訳すると以下
この拡張機能を使用すると、GitHub のプル リクエストと問題を Visual Studio Code で確認および管理できます。サポートには次のものが含まれます。
- VS Code を認証して GitHub および GitHub Enterprise に接続します。
- VS Code 内から PR をリストおよび参照します。
- エディタ内のコメント機能を使用して VS Code 内から PR をレビューします。
- 簡単なチェックアウトにより、VS Code 内から PR を検証します。
- UI と CLI の共存を可能にするターミナル統合。
- VS Code 内からの問題のリストと参照。
- 「@」のホバーカード言及されたユーザーと問題について。
- ユーザーと問題に対する完了の提案。
- 「問題への取り組みを開始」ブランチを作成できるアクション。
- 「todo」から課題を作成するアクションをコード化します。コメント。
つまり、GitHubをブラウザで開かなくてもVSCode上でPull Requestのレビューや承認・マージができるみたいです。
これは便利だなと感じたため検証してみました。
GitHub Pull Requests and Issues
セットアップ
VSCodeの「拡張機能」で「GitHub Pull Requests and Issues」をインストールします。
インストールが終わるとVSCodeのアクティビティバーにGitHubのアイコンが表示されます。
これで設定は完了です。
Pull Requestの作成
アクティビティバーの以下ボタンをクリックすると
このようにフォーム等が表示されるため、ここからPull Request作成ができます。
コードレビュー
さきほど表示された中からレビューしたいPull Requestの説明をクリックすると以下のようにVSCode上で参照することができます。
コードの変更差分を見たいときはファイル名をクリックすれば以下のようにdiffを確認できます。
またこのままコメントしたり
他にもレビュアー追加や
Pull Requestの承認等も含めてすべてVSCode上で操作できるようになっています。
ただこの機能、ローカル環境にcloneしているリポジトリのみVSCode上でPull Requestが閲覧できるようになっているため、cloneしていないリポジトリについては閲覧することができません。
GitHub Repositories
セットアップ
そこで、この問題を解決できるものがないか調べたところ「GitHub Repositories」という拡張機能を見つけました。
こちらも同じくVSCodeにインストールするだけで使うことができます。
GitHubのリポジトリを検索
shift + command + Pで「remote open」など入力すると以下が表示されます。
※GitHubの認証が終わっていなければ、このタイミングで必要になります。
クリックすると次は以下のように表示されるので
そのまま開きたいリポジトリ名を入力してEnter
これだけで任意のGitHubリポジトリをVSCodeで開くことができます。
この拡張機能はさきほど紹介した「GitHub Pull Requests and Issues」と連携しているため、VSCodeで開いてしまえば、そのままレビュー等の操作も可能です。
検証した感想をまとめる
よかった点
- 拡張機能導入前は、GitHubとVSCodeを行ったり来たりの往復でレビューしたり、レビュー依頼を出していましたが、拡張機能を導入すれば、基本VSCode上だけで作業ができ、作業効率化に繋がる
- VSCode上でもGitHubとほとんど同じUIで操作できるため、導入のハードルが低い
- ソースコードのdiffもVSCode上で開くのでレビューしやすい
気になった点
- VSCodeではPull Requestのtitleのrenameのみ可能で、baseブランチは変更できなさそう
- カーソルがあたっている行をホバーしても過去のcommit履歴が見れないので、GITLENSなどの他の拡張と組み合わせるなどで対応する必要がありそう
- タイミング次第(?)だが、リポジトリ検索に5 ~ 10秒ほど時間が掛かることがある、有効化している拡張機能が多いと動作が遅いかも
- CloseしているPull Requestは参照できない
おわりに
いくつか気になる点はありますが、VSCodeだけでPull Requestの一連の操作が可能というのはかなり使い勝手が良い印象でした。
現在、私の所属しているチームは「開発生産性の向上」を目標に置いているため、これからも技術力向上はもちろんのこと、さまざまな視点から開発生産性の向上に貢献できるよう取り組んでいきたいと思います。