GitHub上でVisual Studio Codeを起動してコードレビューをする

はじめに

エキサイト株式会社 21卒 バックエンドエンジニアの山縣です。 少し前にGitHub上でVisual Studio Codeを起動してコードレビューをすることができるようになりました。 実際に試してみたので共有します!

Visual Studio Codeを起動する

プルリクエストのページから「.(ドット)」を押すことで、ブラウザ上でVisual Studio Codeを起動することができます。

f:id:excite-kazuki:20210824095702p:plain

下記画像のページが出てきて少し待ちます。

f:id:excite-kazuki:20210905222910p:plain

その後、エディタが開きました!

f:id:excite-kazuki:20210905222945p:plain

プルリクエストを確認する

左のタブ一覧から「GitHub Pull Request」をクリックします。

f:id:excite-kazuki:20210905224229p:plain

ファイルとファイルの差分を見ることができます。 f:id:excite-kazuki:20210905224354p:plain

実際にGitHub上で見る「File Changed」と同じことが確認できます。

f:id:excite-kazuki:20210905224516p:plain

URLを見ると、トップレベルドメインGitHub.comVisual Studio Code.devになっていることが確認できます。

コードレビューをする

行番号の横のプラスボタンをクリックするとコメントをすることができます。 ただし、複数行選択してコメントができないことや、斜体や太字、箇条書きなどのボタンが用意されていないため、 完全上位互換にはならないことに注意が必要です。

f:id:excite-kazuki:20210905231217p:plain

実際にプルリクエストのページを見ると、コメントされていることが確認できます。

f:id:excite-kazuki:20210905231227p:plain

ファイル単位で差分を確認できるため、GitHub上でのみコードレビューをしている人にとっては、新たな選択肢が増えたのかなと思います。

ローカル環境でコードレビューをする方法

ローカルのVisual Studio Codeであれば拡張機能GitHub Pull Requests and Issues」を導入することでプルリクエストの作成や、コードレビュー、Issueの作成をすることができます。

f:id:excite-kazuki:20210824092038p:plain

また、JetBrains IDEであればPull Requestsタブから同様のことができます。

f:id:excite-kazuki:20210824092354p:plain

おわりに

GitHub上でVisual Studio Codeを起動してコードレビューする方法についてかんたんにまとめてみました。 コードレビューの選択肢が増えたのはとても嬉しいです!