これはなに？
昨年から使っているVisual Studio Codeの拡張機能の簡単な紹介になります。プログラミングに関するものではなく、ツールについてのお話です。
今回は、Git関連の拡張機能を取り上げます。
Git Graph
エディタ上でGitのリポジトリのグラフ（リポジトリツリー）を可視化してくれる拡張機能です。
また、同じ画面上から、履歴を参照したりマージをしたり、チェリーピックを作成したりと、様々なアクションができるようになっています！
- Marketplace: Git Graph
- GitHub Repository
あって嬉しい！
わたしはVisual Studio Code (以下VSCode)以前は、GitのツールとしてはSourceTreeを良く使っていました。
エディタとは別になってしまっていても、リポジトリグラフが見やすかったことや、画像の対比が出来たことが大きな理由です。
ただ、わたしの環境だけかもしれませんが、安定稼働に難点があり、最近は使わなくなってしまいました。
その後はコマンドラインでの操作が中心になりましたが、やはり時々リポジトグラフが見たくなります。
このため、tig というコマンドラインのインタフェースを使っていました。
さて、そんなおり、ふと拡張機能で何かいいものが無いかしら...と探してみたら、Git Graphというバッチリのものが！
早速入れてみたら、とっても良い感じでした。
こんなところがよかった！
- とにかく動作が軽快な気がします！
- ローカルのリポジトリだけでなく、リモートリポジトリも切り替えて表示可能
- 絞り込みができる
- 色やタグが見やすい
また、グラフだけじゃなく、なにげなく右クリックやアイコンをクリックすると、期待を裏切らず色々な操作が出来るようになっています。
- Cherry pickする
- 差分を見る
- マージする
などなど。
かなり軽いのですが、これだけの情報、さらにリモートリポジトリの表示切り替えやpush / pullももちろん出来るので、どんな通信が発生しているのかとても気になるところ。
ソースを読んで理解するレベルには全然追いつけていませんが、Wiresharkで通信を見てみると、確かにGitHub側のAPIとのやりとりが発生しているのが分かります。
（実際の通信は暗号化されるので、ここではTLSのハンドシェイクで確認したもので代用）
APIを使って情報を集約し、これだけの画面が作れるなんて、凄いですね！
いつかソースからビルドしてデバッグしながら通信を眺めてみたいです。
GitLens
2つめはGitLensです。
ソースコード上の各行に対して、誰がいつコードを変更したかを表示してくれます。（邪魔にならないように！）
- Marketplace: GitLens
- GitHub Repository
こんなところがよかった！
- これも操作が軽いです！
- 個人リポジトリではなく、仕事でみんなで作業しているリポジトリでとても助かります！
- 過去の誰かが作ってくれたコードを修正する時
- アラートのお当番で例外が発生したコードがいつごろ変更されたのかを確認する時
カーソルを合わせた行の右側にうっすらとAuthorや修正日が表示されます。
すばらくするとポップアップが出て、そこから差分を確認したり、ブランチを切り替えたりといったことが出来ます。
特に、コードの調査から始めるときにとても便利です！
GitHub Pull Requests
こちらはMicrosoftが提供している、VSCode上でプルリクエストを参照したり更新できる拡張機能です。
- Marketplace: GitHub Pull Requests
- GitHub Repository
こんなところがよかった！
- プルリクエストの一覧が左側に表示されます
- 通知では見落としていたプルリクエストにも気づいたり...
- ブラウザを開かずにVSCodeからプルリクエストを作成したり、更新したりできること
この拡張機能に関しては、わたしのTweetを載せておきます。
ふと「#VSCode から直にプルリク作成できるんだっけ？」と思って試してみた
— たかのあきこ@freeCodeCamp攻略中 (@akiko_pusu) December 7, 2019
ローカルの作業ブランチ展開→GitHub拡張から+ボタンを押す。
マージしたいブランチを指定し、プルリクのタイトルとしてコミットログかブランチ名、もしくはタグを選択。
Enterするとプルリクが出来たよ😃 pic.twitter.com/xN35O1mNrf
#VSCode から直に作成したプルリクも、もちろん同じ画面で見ることができます。
— たかのあきこ@freeCodeCamp攻略中 (@akiko_pusu) December 7, 2019
ついでに、エディタ内のプレビュー画面からMarkdownでプルリクの本文を書き換えてみたら、ちゃんと更新反映された！
さすがElectronのフレームワーク使ってるって感じがする。 pic.twitter.com/OByb5b8IoW
#VSCode 続き。ちょうど簡単な修正があったのでプルリク作成から詳細追記、マージ、ブランチ削除までエディタ内でやってみました！
— たかのあきこ@freeCodeCamp攻略中 (@akiko_pusu) December 7, 2019
ブランチ削除のボタンを押すと、画面上にローカル＆リモートブランチを合わせて消せるダイアログが出てきた。助かるー！ pic.twitter.com/qhrJRQ3eiM
まとめ
Visual Studio Codeの拡張機能は本当にたくさんで、楽しいものが多いですね！わたし自身は作れはしないので、ひたすらこういったものを作れる方を尊敬してしまいます。
もちろんソースコードは公開されているので、少しずつ覚えていけたらなあと感じています。
また、良い拡張機能に会ったら、ぜひ星やコメントを添えてあげていただけると嬉しいです！