📑

VS Code と GitHub を連携させて楽々コードレビュー

1 min read

概要

みなさん Visual Studio Code (VS Code) は使ってますか?僕は使ってます。日々新しい機能が追加されていって、どんどん便利になっていくので僕は好きです。
実は VS Code から GitHub を操作することができます。
この記事では VS Code と GitHub を連携させると、コードレビューにかかる手間を減らすことができるよという話をします。

GitHub の設定

VS Code から GitHub を使うためには、

  • GitHub 拡張を VS Code にインストール
  • GitHub アカウントで VS Code にログイン

をする必要があります。
手順は VS Code公式ドキュメント に記載されているので、詳細手順はこちらを参考にしてみてください。

で、実際何が便利なのか?

みなさんコードレビューはしてますか?職業として組織でプログラマをしていると、コードレビューをする・してもらうことは多いんじゃないかと思います。
ある程度の規模のチームで開発している人であれば、コードレビューをするのは日課になっていて、毎朝最初の仕事はコードレビュー、ということもあるのではないのでしょうか。

僕はモバイルのアプリ開発(React Native)をメインの業務としているのですが、僕がGitHubを使ってレビューする時のワークフローはこんな感じです。

  1. (GitHub上)Pull Request の Description を読んで概要を把握
  2. (VS Code上)レビューする PR のブランチをチェックアウト
  3. (GitHub上)Diff を見る
  4. (VS Code上)気になるところはコードを書き換えたり、実機で動かしたりしながら検証
  5. (GitHub上)レビューコメントを記載
  6. すべての Diff をレビューし終わるまで step 3-5を繰り返す
  7. Approve👍 or Change Request❌

見てわかる通り、GitHubとVS Codeを行ったり来たりしています。ウィンドウ切り替え操作の1回は数秒で終わる操作だとしても、何十回と繰り返したらまぁまぁな時間になりそうです。
コードレビューは毎日行う作業であるなら、尚更楽チンにこなしたいですよね。

VS Code と GitHub を連携させるとワークフローはこんな感じに変わります。

  1. (VS Code上)レビューする PR のブランチをチェックアウト
  2. (VS Code上)Pull Request の Description を読んで概要を把握
  3. (VS Code上)Diff を見る
  4. (VS Code上)気になるところはコードを書き換えたり、実機で動かしたりしながら検証
  5. (VS Code上)レビューコメントを記載
  6. すべての Diff をレビューし終わるまで step 3-5を繰り返す
  7. Approve👍 or Change Request❌

見ての通り、最初から最後まですべての工程をVS Code上で行うことができます。
ウィンドウ切り替えが不要な分だけ手早くレビューを終えることができました。

結論

最初に紹介した VS Code公式ドキュメント にはVS Code のスクリーンキャプチャが載っているので、操作感のイメージを付けるにはそちらも見てみてください。

現代のソフトウェア開発では一般的になったコードレビューですが、VS Code を使うと余計なステップに気を取られず、コードを読んで理解するという本質に集中することができます。
ぜひ一度試してみてください!