Visual Studio CodeのGit関連プラグイン

## これはなに？

昨年から使っているVisual Studio Codeの拡張機能の簡単な紹介になります。プログラミングに関するものではなく、ツールについてのお話です。

今回は、Git関連の拡張機能を取り上げます。

## Git Graph

エディタ上でGitのリポジトリのグラフ（リポジトリツリー）を可視化してくれる拡張機能です。
また、同じ画面上から、履歴を参照したりマージをしたり、チェリーピックを作成したりと、様々なアクションができるようになっています！

- Marketplace: [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
- [GitHub Repository](https://github.com/mhutchie/vscode-git-graph)

### あって嬉しい！

わたしはVisual Studio Code (以下VSCode)以前は、Gitのツールとしては[SourceTree](https://www.sourcetreeapp.com)を良く使っていました。
エディタとは別になってしまっていても、リポジトリグラフが見やすかったことや、画像の対比が出来たことが大きな理由です。

ただ、わたしの環境だけかもしれませんが、安定稼働に難点があり、最近は使わなくなってしまいました。

その後はコマンドラインでの操作が中心になりましたが、やはり時々リポジトグラフが見たくなります。
このため、[tig](https://github.com/jonas/tig) というコマンドラインのインタフェースを使っていました。

さて、そんなおり、ふと拡張機能で何かいいものが無いかしら...と探してみたら、**Git Graph**というバッチリのものが！
早速入れてみたら、とっても良い感じでした。

### こんなところがよかった！

- とにかく動作が軽快な気がします！
- ローカルのリポジトリだけでなく、リモートリポジトリも切り替えて表示可能
- 絞り込みができる
- 色やタグが見やすい

![git-graph.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27976/09b71d2a-0185-ac6b-11f0-c119a691d592.jpeg)

また、グラフだけじゃなく、なにげなく右クリックやアイコンをクリックすると、期待を裏切らず色々な操作が出来るようになっています。

- Cherry pickする
- 差分を見る
- マージする

などなど。

![git-graph-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27976/9f205a4e-ec46-ca97-2413-f4a843115f9b.jpeg)

かなり軽いのですが、これだけの情報、さらにリモートリポジトリの表示切り替えやpush / pullももちろん出来るので、どんな通信が発生しているのかとても気になるところ。

ソースを読んで理解するレベルには全然追いつけていませんが、Wiresharkで通信を見てみると、確かにGitHub側のAPIとのやりとりが発生しているのが分かります。
（実際の通信は暗号化されるので、ここではTLSのハンドシェイクで確認したもので代用）

![git-graph-dump.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27976/e86a9ba5-ef16-449e-7359-60f5cc672cba.jpeg)

APIを使って情報を集約し、これだけの画面が作れるなんて、凄いですね！
いつかソースからビルドしてデバッグしながら通信を眺めてみたいです。

## GitLens

2つめは**GitLens**です。
ソースコード上の各行に対して、誰がいつコードを変更したかを表示してくれます。（邪魔にならないように！）

- Marketplace: [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
- [GitHub Repository](https://github.com/eamodio/vscode-gitlens)

### こんなところがよかった！

- これも操作が軽いです！
- 個人リポジトリではなく、仕事でみんなで作業しているリポジトリでとても助かります！
 - 過去の誰かが作ってくれたコードを修正する時
 - アラートのお当番で例外が発生したコードがいつごろ変更されたのかを確認する時 

![git-lens.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27976/8fc933a6-980d-bc5e-fbdb-82828e5ff093.jpeg)

カーソルを合わせた行の右側にうっすらとAuthorや修正日が表示されます。
すばらくするとポップアップが出て、そこから差分を確認したり、ブランチを切り替えたりといったことが出来ます。

特に、コードの調査から始めるときにとても便利です！

## GitHub Pull Requests

こちらはMicrosoftが提供している、VSCode上でプルリクエストを参照したり更新できる拡張機能です。

- Marketplace: [GitHub Pull Requests](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github)
- [GitHub Repository](https://github.com/Microsoft/vscode-pull-request-github)

### こんなところがよかった！

- プルリクエストの一覧が左側に表示されます
  - 通知では見落としていたプルリクエストにも気づいたり...
- ブラウザを開かずにVSCodeからプルリクエストを作成したり、更新したりできること

この拡張機能に関しては、わたしのTweetを載せておきます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ふと「<a href="https://twitter.com/hashtag/VSCode?src=hash&amp;ref_src=twsrc%5Etfw">#VSCode</a> から直にプルリク作成できるんだっけ？」と思って試してみた<br>ローカルの作業ブランチ展開→GitHub拡張から+ボタンを押す。<br>マージしたいブランチを指定し、プルリクのタイトルとしてコミットログかブランチ名、もしくはタグを選択。<br>Enterするとプルリクが出来たよ😃 <a href="https://t.co/xN35O1mNrf">pic.twitter.com/xN35O1mNrf</a></p>&mdash; たかのあきこ@freeCodeCamp攻略中 (@akiko_pusu) <a href="https://twitter.com/akiko_pusu/status/1203203620243562498?ref_src=twsrc%5Etfw">December 7, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/VSCode?src=hash&amp;ref_src=twsrc%5Etfw">#VSCode</a> から直に作成したプルリクも、もちろん同じ画面で見ることができます。<br>ついでに、エディタ内のプレビュー画面からMarkdownでプルリクの本文を書き換えてみたら、ちゃんと更新反映された！<br>さすがElectronのフレームワーク使ってるって感じがする。 <a href="https://t.co/OByb5b8IoW">pic.twitter.com/OByb5b8IoW</a></p>&mdash; たかのあきこ@freeCodeCamp攻略中 (@akiko_pusu) <a href="https://twitter.com/akiko_pusu/status/1203208724338229249?ref_src=twsrc%5Etfw">December 7, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/VSCode?src=hash&amp;ref_src=twsrc%5Etfw">#VSCode</a> 続き。ちょうど簡単な修正があったのでプルリク作成から詳細追記、マージ、ブランチ削除までエディタ内でやってみました！<br>ブランチ削除のボタンを押すと、画面上にローカル＆リモートブランチを合わせて消せるダイアログが出てきた。助かるー！ <a href="https://t.co/qhrJRQ3eiM">pic.twitter.com/qhrJRQ3eiM</a></p>&mdash; たかのあきこ@freeCodeCamp攻略中 (@akiko_pusu) <a href="https://twitter.com/akiko_pusu/status/1203291283218763777?ref_src=twsrc%5Etfw">December 7, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## まとめ

Visual Studio Codeの拡張機能は本当にたくさんで、楽しいものが多いですね！わたし自身は作れはしないので、ひたすらこういったものを作れる方を尊敬してしまいます。
もちろんソースコードは公開されているので、少しずつ覚えていけたらなあと感じています。

また、良い拡張機能に会ったら、ぜひ星やコメントを添えてあげていただけると嬉しいです！