VSCodeでGitソース管理時におすすめのプラグイン3選!

gitGit

VSCodeでGitを使うときにおすすめのプラグインを3個紹介しています。
それぞれのプラグインのインストール方法と、よく使っている機能について書いています。

この記事で紹介しているプラグインは下記になります。

・Git History
・Git Graph
・Git Lens

とりあえず全部入れて使ってみることをオススメします!

PR

Git History

Git Historyは、VSCodeでコミット履歴の表示や検索などを行うためのプラグインです。
VSCodeの拡張機能紹介ページはこちらになります。
拡張機能のGitHubはこちらです。

Git Historyをインストールする

拡張機能のタブから「git history」で検索して導入します。
下記のアイコンの拡張機能です。
VSCodeの「Git History」プラグインインストール

コミット履歴を確認する

コミット履歴を確認するには、コマンドパレットから「Git: View History」を選択します。
GitHistoryプラグインでコミット履歴表示選択

そうすると、このようにコミット履歴が表示されます。
GitHistoryプラグインでコミット履歴を表示

履歴の行を選択すると、前のコミットとの比較や、現在作業中のソースコードとの比較をすることができます。
下記では、選択したコミット履歴のBoardController.phpファイルを前のコミットと比べてみました!
GitHistoryプラグインでファイルの差分を確認

コミットのファイル単位に、差分が確認できるので便利ですね。

コミット履歴を検索する

コミット履歴をコミットメッセージから検索することができます。
先ほどと同じように、コマンドパレットから「Git: View History」でコミットログを表示します。

表示されたコミット履歴の上の方に、テキスト入力して検索できる箇所があります。
下記のように、コミットメッセージの一部を入れると、コミット履歴から検索されて表示されます。
GitHistoryプラグインでコミットメッセージ検索

ファイル単位の履歴が確認できる

Gitで管理しているファイルの上で右クリックします。
そして「Git: View File History」を選択します。
GitHistoryプラグインでファイル単位に履歴確認

そうすると、そのファイルのコミット履歴が表示されます。
「いつ追加した処理だったか?」など、ファイル単位に履歴が確認できて良いですね。
GitHistoryプラグインでファイル単位に履歴表示

行単位の履歴が確認できる

ファイル単位に確認しましたが、行単位でも履歴を確認することができます。
行単位で確認する場合は「Git: View Line History」を選択します。
GitHistoryプラグインで行単位に履歴確認

そうすると同じように、右側に行を編集してコミットした時の履歴が表示されます。

PR

Git Graph

Git Graphは、VSCodeでコミット履歴を綺麗に表示してくれるプラグインです。
VSCodeの拡張機能紹介ページはこちらになります。
拡張機能のGitHubはこちらです。

Git Graphをインストールする

拡張機能のタブから「git graph」で検索して導入します。
下記のアイコンの拡張機能です。
VSCodeの「Git Graph」プラグインインストール

コミット履歴を表示する

Git Graphでコミット履歴を表示すると、Git Historyで見るよりもわかりやすい形でコミット履歴を表示してくれます。
コミット履歴を表示するには、Gitタブ(ソース管理タブ)の下記のボタンをクリックするか
Git Graphのアイコンから履歴確認

コマンドパレットから「Git Graph: View Git Graph(git log)」を探して選択します。
Git Graphをコマンドパレットから起動

そうすると、下記のように表示されます。
Git Graphの履歴表示

現在使っているブランチや、リモートリポジトリの他のブランチなどが見やすい形になっています。
コミットログから検索する時は、上部の虫眼鏡アイコンから検索文字を入れて検索します。
Git Graphの履歴で検索

行を選択すると、コミットしたファイルが表示されます。
ファイルを選択すると、前回のコミット状況との差分が確認できます。
Git Graphで差分確認

Git Lens

Git Lensは、VSCodeでGitを使うときに色々とサポートしてくれる拡張機能です。
VSCodeの拡張機能紹介ページはこちらになります。
拡張機能のGitHubはこちらです。

Git Lensをインストールする

拡張機能のタブから「gitlens」で検索して導入します。
下記のアイコンの拡張機能です。
VSCodeの「Git Lens」プラグインインストール

その行がいつ変更されたか

ソースコードにカーソルを合わせると、その行がいつ・誰が変更してコミットしたかを、うっすらと表示してくれます。
コミットした人の名前と、いつなのかとコミットメッセージが表示されています。
Git Lensでソースコード行の確認

表示している箇所に、マウスホバーすると詳細を確認することができます。
そして、そこに表示されているアイコンから、その時の差分を確認することが可能です。
Git Lensでソースコード行から差分表示

サイドバーから履歴確認

Gitタブ(ソース管理タブ)のサイドバーに色々と一覧が追加されます。
Git Lensでサイドバーに追加

よく使うのがCOMMITSで、コミット履歴をサイドバーから確認できて、ファイルの差分をみることもできます。
Git LensでサイドバーのCOMMITSを確認

その他の一覧は、下記の機能になります。

・REPOSITORIES
包括的にリポジトリの内容を確認できます。

・FILE HISTORY
選択したファイルのコミット履歴を確認できます。

・BRANCHES
ローカルに存在するブランチ・コミット履歴を確認できます。

・REMOTES
リモートに存在するブランチ・コミット履歴を確認できます。

・STASHES
スタッシュに保存した内容を確認することが可能です。
右クリックした後にメニューからスタッシュの内容を適用することもできます。

・TAGS
作成したタグの内容を確認することができます。

・WORKTREES
作成したワークツリーを確認できるようです。

まとめ

今回はGitでソース管理している際に、VSCodeに入れておくと便利なプラグインを3つ紹介しました。
VSCodeの使い始めから、3つともVSCodeに入れて使用していますが、特に競合なども起きずに問題なく使えています。

それぞれ導入して使うと、他のGUIツールを開くこともなく、ソース管理が捗るのでオススメです。

コメント

タイトルとURLをコピーしました