10
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

All About(株式会社オールアバウト)Advent Calendar 2023

Day 18

VSCodeだけでPull Requestを操作してみた

Last updated at Posted at 2023-12-17

はじめに

この記事は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」をインストールします。

スクリーンショット 2023-12-16 11.16.08.png

インストールが終わるとVSCodeのアクティビティバーにGitHubのアイコンが表示されます。

スクリーンショット 2023-12-16 11.17.42.png

これで設定は完了です。

Pull Requestの作成

アクティビティバーの以下ボタンをクリックすると

スクリーンショット 2023-12-16 21.00.45.png

このようにフォーム等が表示されるため、ここからPull Request作成ができます。

スクリーンショット 2023-12-16 21.01.25.png

コードレビュー

さきほど表示された中からレビューしたいPull Requestの説明をクリックすると以下のようにVSCode上で参照することができます。

スクリーンショット 2023-12-16 17.25.29.png

コードの変更差分を見たいときはファイル名をクリックすれば以下のようにdiffを確認できます。

スクリーンショット 2023-12-16 17.26.03.png

またこのままコメントしたり

スクリーンショット 2023-12-16 17.26.55.png

他にもレビュアー追加や

スクリーンショット 2023-12-16 20.41.45.png

Pull Requestの承認等も含めてすべてVSCode上で操作できるようになっています。

スクリーンショット 2023-12-16 20.29.06.png

ただこの機能、ローカル環境にcloneしているリポジトリのみVSCode上でPull Requestが閲覧できるようになっているため、cloneしていないリポジトリについては閲覧することができません。

GitHub Repositories

セットアップ

そこで、この問題を解決できるものがないか調べたところ「GitHub Repositories」という拡張機能を見つけました。

こちらも同じくVSCodeにインストールするだけで使うことができます。

スクリーンショット 2023-12-16 15.47.13.png

GitHubのリポジトリを検索

shift + command + Pで「remote open」など入力すると以下が表示されます。
※GitHubの認証が終わっていなければ、このタイミングで必要になります。

スクリーンショット 2023-12-16 16.15.21.png

クリックすると次は以下のように表示されるので

スクリーンショット 2023-12-16 16.17.00.png

そのまま開きたいリポジトリ名を入力してEnter

スクリーンショット 2023-12-16 23.38.57.png

これだけで任意のGitHubリポジトリをVSCodeで開くことができます。

スクリーンショット 2023-12-16 23.39.43.png

この拡張機能はさきほど紹介した「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の一連の操作が可能というのはかなり使い勝手が良い印象でした。

現在、私の所属しているチームは「開発生産性の向上」を目標に置いているため、これからも技術力向上はもちろんのこと、さまざまな視点から開発生産性の向上に貢献できるよう取り組んでいきたいと思います。

10
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?