Studyplus Engineering Blog

スタディプラスの開発者が発信するブログ

Visual Studio Codeの拡張「GitHub Pull Requests」を使ってみた

こんにちは。7月に入社したStudyplus開発部の田口です。
先日Microsoft社が発表したVisual Studio Codeの拡張のGitHub Pull Requestsを試してみたのでその記事を書きます。

まずは弊社のエンジニア陣が普段なんのエディタを使っているのか、アプリチーム以外でアンケートを取ってみました。

  • RubyMine … 2人
  • IntelliJ IDEA … 1人
  • Atom … 1人
  • Visual Studio Code … 1人
  • Vim … 3人
  • Emacs … 1人

Vim強しですね。Visual Studio Codeは自分しか使っていないようでした。
また、アプリチームの方々もXcodeやAndroid Studio以外で、普段よく使うエディタを聞いてみたところ

  • Sublime Text … 1人
  • Atom … 1人
  • Visual Studio Code … 2人

でした。こちらはVisual Studio Codeを使ってるエンジニアが2人いました。嬉しいですね。

RubyやRailsを書くエディタとなるとまず思いつくのがJetBrains社のIDEであるRubyMineですが、前にReact/Reduxを書く際にVisual Studio Codeを使って以来すっかりお気に入りのエディタになったのでずっと使っています。
GitHub社がMicrosoft社に買収されてから、マイクロソフト製のプロダクトにGitHub関連の機能が追加されていくのかなと予想していたのですが、まさにそういったパッケージだと思います。
今回は、GitHub Pull Requestsを実際に使ってみた様子を記載していきます。

インストール

基本的には、Visual Studio Codeの拡張機能が検索できるVisual Studio Marketplaceで「GitHub Pull Requests」と検索すれば出てきます。
Image from Gyazo

使い方

サインイン

拡張を追加すると、画面右下にGitHubへのサインインを求めるダイアログが出るので、クリックしてGitHubにサインインします。

追加項目

GitHub Pull RequestsをインストールしてからVisual Studio Codeのソース管理タブを開くと、「GITHUB PULL REQUESTS」という項目が追加されています。デフォルトは閉じていて最下にあるのでちょっと見落としがちです。
GitHubで管理されているプロジェクトをルートとして開くと、自動的に「GITHUB PULL REQUESTS」に以下の項目が追加されます。
Image from Gyazo
ここではGitHub上にあるプルリクエストを項目別で見ることができます。自分が作成したプルリクエストのみ、自分がアサインされたプルリクエストのみといった項目があります。
例として、RailsのGitHubリポジトリに上がっているプルリクエストを見てみます。
Allを選択すると、今見ているGitHubリポジトリの全プルリクエストが表示されます。
Image from Gyazo
Railsには2018/09/25現在で700以上のプルリクエストが上がっていました。基本的には最新の20件までがデフォルトで表示されるみたいです。

Conversationを見る

確認したいプルリクエストをクリックして開き、さらにその下の「Description」をクリックすることで、GitHub上の「Conversation」タブで見れるページがエディタ部分に表示されます。
こちらも、Railsのリポジトリを例に見ていきます。
Image from Gyazo
ブラウザでGitHubを確認することなくここでプルリクエストの概要やレビューのやり取りを確認できます。Visual Studio Codeで設定したカラースキームでプルリクエストが確認できるのが個人的に嬉しいポイントです。
コミットハッシュのリンクをクリックするとブラウザでGitHubの当該コミットのページを開きます。
右上のCheckoutボタンで、当該ブランチをワンクリックでチェックアウトできたりもします。
また、コメントやレビュー、プルリクエストを閉じたりもVisual Studio Code上でできます。便利ですね。
Image from Gyazo
現状ではプルリクエストのマージはできないみたいですね。

差分を確認する

GitHub上の「File Changed」も簡単に見れます。「Description」以下がファイルごとの差分になっており、それをクリックするとエディタ部分に表示されます。
Image from Gyazo
アイコンは

  • A … Add
  • D … Delete
  • M … Modify

だと思われます。直感的ですね。
行番号の右にある+ボタンをクリックすることで、コメントをつけることもできます。
Image from Gyazo

今後改善してほしい点

非常に便利なこの拡張ですが、個人的に今後のバージョンアップで改善してほしい点としては

  • マルチルートワークスペースに対応してほしい
  • マージできるようにしてほしい
  • レビュアの設定などができるようになってほしい

という感じでしょうか。
GitHub上でできることがすべてVisual Studio Code上でできるようになってくれれば最高なんですが、さすがに高望みな気もしています。
個人的に特に気になる点はマルチルートワークスペース非対応なところです。複数のリポジトリを横断的に見るためにマルチルートワークスペースを利用しているのですが、現状はマルチルートワークスペースだとGITHUB PULL REQUESTSの項目が表示されないようになっています。
ここが改善されて対応してくれるようになるとさらに虜になると思うので、期待したいところです。

まとめ

GitHub Pull Requestsを触ってみて、自分はかなり便利だと感じました。
まだバージョンも0.1.6(2018/09/25現在)なので、今後のアップデートに期待したいと思います。