LoginSignup
103
76

More than 3 years have passed since last update.

Visual Studio CodeでGitの履歴を素敵に表示する

Last updated at Posted at 2019-07-12

この記事はcloudpack あら便利カレンダー 2019 の2日目です。

誕生秘話 はこちらです。
私は今年からの参戦になります。

この記事では、あら便利な拡張機能の紹介をしたいと思います。

Gitのコミット履歴が複雑になってしまった場合に、コミットグラフが絡み合ってしまい履歴が追いづらい状態になってしまうことありますよね?
そこまで酷くはないけれど、ぱっと見で履歴がちゃんと終えるかというと微妙かも...という時はまあ普通にあります

そこで、最近、Visual Studio CodeのGit Graph というあら便利な拡張機能を見つけまして、これがなかなか綺麗にgitgraphを出してくれるので紹介したいと思います

使い方

インストール

$ code --install-extension mhutchie.git-graph

あるいは、GUIからインストール

gitgraph_extension

起動

インストールが完了すると、VCSのパネルにボタンが追加されるので、これを押すだけです。

gitgraph_button

ボタン押下で新たなタブが立ち上がり、ギットグラフが表示されます。

以下、公式にあるキャプチャそのままです。この時点でオッとなり使ってみました。
まだ全然使いきれていないですが、なかなか良い感じです。
あと、起動はかなり軽いです。Git History なんかも使ったことはあるんですが、起動時のタメが気になって使わなくなりました。
この拡張はサクっと起動します。

複雑なグラフの表示

gitのコミットグラフはシンプルな例ならいいんですが、mergeが入り組むと途端に崩壊します。
ということで、複雑な状態のグラフでどうなるかをみてみました。

特に理由はないのですが、そこそこ大きいリポジトリ+自分のgithubのレコメンドに出てきたということでpipenv のリポジトリのグラフを表示してみました。

一番めんどくさそうなところを表示した例がこちらです。

pipenv_gitgraph

なかなか綺麗に表示できているんじゃないでしょうか

別のツールで表示した場合

他のツールでも表示してみました。

git cli

コマンドラインでのグラフ表示を試してみました。

$ git log -a --graph --oneline --decorate=full

pipenv_git_cli

ちょっと何言ってるかわかんないですね

tig

コマンドラインツールのTig の場合です

pipenv_tig

ちょっと何言ってるかわかんないですね

まあ、CLIツールのこの辺求めるのは難しいですね

Git DAG

GUIツールということで、Git Cola についてくるGit DAG というグラフで試してみました。
このグラフ表示が結構好きでメインで使っています。
このツールの場合は以下のようになりました

pipenv_git_dag

この表示の方が正しい気がするとも思ったんですが、パッと見だと頭がついていかない感じがありますね。
まあでもこれはこれでいい感じ!

まとめ

他のツールと比較しても、かなり見やすいツールじゃないでしょうか。
エディタと統合できるというのも嬉しいのでこれからも使っていこうかなと思います。

103
76
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
103
76