アクトインディ開発者ブログ

子供とお出かけ情報「いこーよ」を運営する、アクトインディ株式会社の開発者ブログです

VSCodeにGithub純正のプルリクエスト拡張が来た!

morishitaです。

VSCode に Pull Request のコードレビューをサポートする拡張はいくつかありますが、ついに純正が出ました!
まだプレビュー版ですが、インストールして使えます。

VSCode のブログでも紹介されています。

code.visualstudio.com

できること

  • PR のリストの参照
  • PR 内の変更ファイルリストの参照
  • 変更ファイルの参照とコメント登録(markdown サポート)
  • ワンクリックでローカルにチェックアウトもできる。動作確認しやすい

インストール

通常の拡張の様にインストールできます。 次のページのボタンを押すのが手っ取り早いでしょう。

marketplace.visualstudio.com

ログイン

当然ですが、Github へのログインが必要です。

画面の右下に次のダイアログが出るので、sign inボタンをクリックします。

f:id:HeRo:20180911062526p:plain

するとブラウザが開いて、認証を求められます。 f:id:HeRo:20180911062552p:plain

ボタンをクリックして進むと次の表示に変わるので認可する権限を確認してボタンをクリックします。 f:id:HeRo:20180911062625p:plain

使ってみる

試しに Microsoft/vscode-pull-request-github自身のリポジトリを clone して見てみます。

VSCode の Source Controll を開くと、従来からあるローカルの変更リストの下に GITHUB PULL REQUESTS が追加されています。
開くと、いくつかの PR のリストが表示されます。

  • ローカルの PR のブランチ
  • レビューを求められている PR
  • アサインされている PR
  • 自分が作った PR
  • すべて

すべてから1つ選んで、開いてみます。

Description

ここからチェックアウトしたりコメントもできます。
コードレビューするのに特にローカルにチェックアウトする必要はありません。

変更ファイルの参照

GITHUB PULL REQUESTS のDescription の下には変更ファイルがリストアップされます。 オープンなコメントがあるファイルには印が付くようです。

リストからファイルを選択すると、Diff エディタが開いてコードの差分を確認できます。

f:id:HeRo:20180911062704p:plain

おー、コメントが見えます!

エディタ内では変更箇所の行頭をクリックすると入力欄が現れ、コメント可能です。 もちろん、他人のコメントにリプライすることも可能です。

とりあえず使ってみます

まだ、プレビュー版とのことで不具合等あるかもしれませんが、使い始めうようと思います。

大きめの PR のレビューではこれまでもローカルにチェックアウトして 使い慣れたエディタでコードを確認して、Web でコメントをしたりしていました。 また、変更箇所の外に影響範囲がありそうな場合もチェックアウトして確認したり、テストを実行したりしていました。

ちょっと面倒だったのですが、これを使えば手間が減ってプルリクエストのレビューが捗りそうです。

最後に

アクトインディではすべての PRをマージするにはレビューが必須でお互いにコードレビューしています。

その中でお互いに学び合ったり、教え合いながら開発を進めています。 そんな開発を一緒にできるエンジニアを募集しています。

actindi.net