VSCode Git連携 完全ガイド - ソース管理パネルとGitLensで効率化する実践テクニック

VSCode Git連携でバージョン管理を効率化する

Visual Studio Code（VSCode）は、Git統合機能を標準搭載しており、ターミナルを使わずにGUI操作でバージョン管理を行えます。VSCode Git連携を活用することで、ステージング、コミット、ブランチ操作、コンフリクト解決、履歴参照といった日常的なGit操作を直感的に実行できます。

本記事では、VSCodeのソース管理パネルの基本操作から、GitLens拡張機能による高度な機能、3-wayマージエディタによるコンフリクト解決まで、実務で即活用できるVSCode Git連携のテクニックを網羅的に解説します。

この記事で得られること

• VSCodeソース管理パネルの基本操作と各機能の使い方
• GitLens拡張機能による履歴参照・Blame表示の活用法
• 差分ビュー（Diffエディタ）の効果的な使い方
• ブランチ操作とマージの実践テクニック
• 3-wayマージエディタによるコンフリクト解決手順
• VSCode Git連携を最大限活用するための設定

前提条件と実行環境

VSCode Git連携を利用するには、以下の環境が必要です。

Gitの初期設定

VSCodeでGit機能を使用する前に、ユーザー名とメールアドレスを設定します。

1
2

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

設定が完了すると、VSCodeは自動的にGitリポジトリを検出し、ソース管理機能を有効化します。

VSCodeソース管理パネルの基本操作

VSCode Git連携の中心となるのがソース管理パネルです。サイドバーのアイコンまたはショートカットキーCtrl+Shift+G（Mac: Cmd+Shift+G）で開きます。

ソース管理パネルの構成

ソース管理パネルは以下の要素で構成されています。

リポジトリの初期化とクローン

新しいプロジェクトでGitを開始する方法は2つあります。

リポジトリの初期化

1. ソース管理パネルを開く（Ctrl+Shift+G）
2. 「Initialize Repository」ボタンをクリック

リポジトリのクローン

1. ソース管理パネルで「Clone Repository」を選択
2. リポジトリURLを入力、またはGitHubから選択
3. 保存先フォルダを選択
4. クローン完了後、ワークスペースとして開く

コマンドパレット（Ctrl+Shift+P）からGit: Cloneを実行する方法もあります。

VSCode Git連携によるステージングとコミット

日常的なGit操作で最も頻繁に行うのが、ステージングとコミットです。VSCode Git連携では、これらの操作をマウスクリックだけで完了できます。

ファイルのステージング

変更をコミットする前に、対象ファイルをステージングエリアに追加します。

ステージングを取り消すには、Staged Changesセクションのファイル横にある-アイコンをクリックします。

コミットの実行

ステージング後、コミットメッセージを入力してコミットを実行します。

1. ソース管理パネル上部のテキストボックスにコミットメッセージを入力
2. Commitボタンをクリック、またはCtrl+Enterを押下

GitHub Copilotを利用している場合、コミットメッセージ入力欄のスパークルアイコンをクリックすると、変更内容に基づいたコミットメッセージをAIが自動生成します。

変更の破棄

誤った変更を元に戻したい場合は、以下の操作で破棄できます。

差分ビュー（Diffエディタ）の活用

VSCode Git連携では、ファイルの変更内容を視覚的に確認できる差分ビューを提供しています。

差分ビューの開き方

ソース管理パネルで変更ファイルをクリックすると、自動的に差分ビューが開きます。

右上のアイコンで表示モードを切り替えられます。

差分ビューの機能

差分ビューでは以下の操作が可能です。

• 変更箇所へのジャンプ: 上下矢印アイコンで前後の変更箇所に移動
• 行単位のステージング: 特定の行だけを選択してステージング
• 変更の取り消し: 特定の変更を右クリックから破棄

エディタガターインジケーター

VSCode Git連携では、エディタの左側ガターに変更状態を示すインジケーターが表示されます。

ガターインジケーターをクリックすると、その箇所の変更内容をポップアップで確認できます。

VSCode Git連携によるブランチ操作

ブランチ操作は、機能開発やバグ修正を独立して進めるために不可欠です。VSCode Git連携では、ブランチの作成・切り替え・マージをGUIで簡単に実行できます。

現在のブランチ確認

現在のブランチは以下の場所で確認できます。

• ステータスバー左下: ブランチ名が表示され、クリックで切り替え可能
• ソースコントロールグラフ: ブランチの分岐と履歴を視覚的に表示

ブランチの作成

新しいブランチを作成する手順は以下のとおりです。

1. ステータスバーのブランチ名をクリック
2. 「Create new branch…」を選択
3. ブランチ名を入力（例: feature/user-authentication）
4. Enterキーで作成完了

作成後、自動的に新しいブランチに切り替わります。

ブランチの切り替え（チェックアウト）

1. ステータスバーのブランチ名をクリック
2. 切り替え先のブランチを選択

または、コマンドパレットからGit: Checkout to...を実行します。

ブランチのマージ

機能開発が完了したら、メインブランチにマージします。

1. マージ先のブランチ（例: main）に切り替え
2. コマンドパレットからGit: Merge Branch...を実行
3. マージするブランチを選択

マージ結果はソース管理パネルに表示されます。コンフリクトが発生した場合は、後述のコンフリクト解決手順で対応します。

ブランチの削除

不要になったブランチは以下の手順で削除します。

1. 削除対象以外のブランチに切り替え
2. コマンドパレットからGit: Delete Branch...を実行
3. 削除するブランチを選択

リモートブランチを削除する場合はGit: Delete Remote Branch...を使用します。

リモートリポジトリとの同期

VSCode Git連携では、リモートリポジトリとの同期操作もGUIで実行できます。

プッシュとプル

ステータスバーには、未プッシュのコミット数と未プルのコミット数が表示されます。

リモートリポジトリへの公開

ローカルで作成したリポジトリをGitHubに公開する場合は、「Publish to GitHub」ボタンを使用します。

1. ソース管理パネルの「Publish to GitHub」をクリック
2. リポジトリ名を入力
3. パブリック/プライベートを選択
4. 公開実行

コンフリクト解決の実践テクニック

マージやリベース時にコンフリクトが発生した場合、VSCode Git連携には強力な解決ツールが用意されています。

コンフリクトの認識

コンフリクトが発生すると、以下の表示で通知されます。

• ソース管理パネルに「Merge Changes」セクションが出現
• 該当ファイルにコンフリクトマーカーが表示

コンフリクトマーカーの構造は以下のとおりです。

1
2
3
4
5

<<<<<<< HEAD
現在のブランチの内容
=======
マージ元ブランチの内容
>>>>>>> feature-branch

インラインアクションによる解決

VSCodeでは、コンフリクトマーカーの上にCodeLensアクションが表示されます。

シンプルなコンフリクトは、これらのワンクリック操作で解決できます。

3-wayマージエディタの活用

複雑なコンフリクトには、3-wayマージエディタを使用します。

マージエディタの開き方

1. コンフリクトファイルを右クリック
2. 「Open in Merge Editor」を選択

または、エディタ上部の「Resolve in Merge Editor」ボタンをクリックします。

マージエディタの構成

graph TB
    subgraph "3-way マージエディタ"
        A[Incoming<br>マージ元の変更] --> C[Result<br>マージ結果]
        B[Current<br>現在の変更] --> C
    end

マージエディタでの解決手順

1. IncomingとCurrentパネルで変更内容を確認
2. 各コンフリクトのチェックボックスで採用する変更を選択
3. 必要に応じてResultパネルを直接編集
4. 全コンフリクト解決後、「Complete Merge」をクリック

AIによるコンフリクト解決（実験的機能）

GitHub Copilotを利用している場合、AIによるコンフリクト解決機能を試すことができます。

1. コンフリクトファイルを開く
2. 「Resolve Merge Conflict with AI」ボタンをクリック
3. AIが提案する解決案を確認
4. 必要に応じて調整して採用

AIは両方の変更の意図を分析し、最適な解決案を提案します。

GitLens拡張機能によるVSCode Git連携の強化

GitLensは、VSCode Git連携を大幅に強化する拡張機能です。インストール数4,600万以上を誇り、コード履歴の可視化に欠かせないツールとなっています。

GitLensのインストール

1

code --install-extension eamodio.gitlens

または、拡張機能パネルで「GitLens」を検索してインストールします。

Blame情報の表示

GitLensの最も基本的な機能が、各行の変更履歴（Blame情報）の表示です。

GitLensの推奨設定

settings.jsonに以下を追加すると、GitLensの機能を最大限活用できます。

1
2
3
4
5
6
7

{
  "gitlens.currentLine.enabled": true,
  "gitlens.codeLens.enabled": true,
  "gitlens.hovers.currentLine.over": "line",
  "gitlens.views.fileHistory.enabled": true,
  "gitlens.statusBar.enabled": true
}

ファイルアノテーション

GitLensは、ファイル全体の変更履歴を可視化する3種類のアノテーションを提供します。

コマンドパレットから各Toggleコマンドを実行して切り替えます。

GitLensサイドバービュー

GitLensは複数のサイドバービューを追加します。

リビジョンナビゲーション

GitLensのリビジョンナビゲーション機能を使うと、ファイルの過去バージョンを簡単に閲覧できます。

1. エディタ右上の</>アイコンをクリック
2. ファイルの過去/未来のリビジョンに移動
3. 任意のバージョンの内容を確認

特定のコミット時点のコードを確認したい場合に便利です。

Commit Graph（Pro機能）

GitLens Proでは、コミット履歴をビジュアルグラフで表示するCommit Graphが利用できます。

• ブランチの分岐・マージを視覚的に把握
• コミットの検索・フィルタリング
• グラフ上から直接リベース・マージ操作

無料版でもパブリックリポジトリでは利用可能です。

ソースコントロールグラフの活用

VSCode標準機能のソースコントロールグラフでも、コミット履歴を視覚的に確認できます。

ソースコントロールグラフの開き方

ソース管理パネル下部の「Source Control Graph」セクションを展開します。

グラフの読み方

gitGraph
    commit id: "Initial commit"
    branch feature
    commit id: "Add feature"
    commit id: "Fix bug"
    checkout main
    merge feature id: "Merge feature"
    commit id: "Release"

• 各ノードがコミットを表現
• 線の分岐がブランチの作成を示す
• 線の合流がマージを示す

グラフからの操作

ソースコントロールグラフでは、コミットを右クリックして以下の操作が可能です。

• コミット詳細の表示
• チェリーピック
• リバート
• ブランチの作成

タイムラインビューによる履歴参照

エクスプローラーパネルのタイムラインビューを使うと、ファイル単位の変更履歴を確認できます。

タイムラインビューの開き方

1. エクスプローラーパネルを開く
2. 下部の「TIMELINE」セクションを展開
3. 対象ファイルを選択

タイムラインビューの機能

• ファイルのコミット履歴を時系列で表示
• 各コミットをクリックして差分を確認
• ローカルの保存履歴（Local History）も表示可能

フィルターアイコンでGitコミットのみ、ローカル履歴のみの表示切り替えができます。

Stash（スタッシュ）管理

作業中の変更を一時的に退避するStash機能も、VSCode Git連携でGUIから操作できます。

スタッシュの作成

1. コマンドパレットからGit: Stashを実行
2. スタッシュメッセージを入力
3. 変更が退避され、作業ディレクトリがクリーンになる

スタッシュの適用

1. コマンドパレットからGit: Apply Stash...を実行
2. 適用するスタッシュを選択

Git: Pop Stash...を使用すると、適用と同時にスタッシュを削除します。

GitLensでのスタッシュ管理

GitLensのStashesビューでは、スタッシュの一覧表示と以下の操作が可能です。

• スタッシュの内容プレビュー
• 適用（Apply）
• ポップ（Pop）
• 削除（Drop）
• 差分表示

VSCodeをGitのデフォルトツールに設定

VSCodeをGitの標準エディタおよびマージツールとして設定すると、コマンドラインからの操作時にもVSCodeが起動します。

デフォルトエディタの設定

1

git config --global core.editor "code --wait"

マージツールの設定

1
2

git config --global merge.tool vscode
git config --global mergetool.vscode.cmd 'code --wait $MERGED'

Diffツールの設定

1
2

git config --global diff.tool vscode
git config --global difftool.vscode.cmd 'code --wait --diff $LOCAL $REMOTE'

VSCode Git連携のキーボードショートカット

頻繁に使用するGit操作のショートカットを覚えると、作業効率が向上します。

その他の操作は、コマンドパレット（Ctrl+Shift+P）からGit:で検索して実行できます。

VSCode Git連携の推奨設定まとめ

効率的なVSCode Git連携のためのsettings.json設定をまとめます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

{
  // Git基本設定
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "git.autofetch": true,
  "git.autofetchPeriod": 180,

  // 差分エディタ設定
  "diffEditor.ignoreTrimWhitespace": false,
  "diffEditor.renderSideBySide": true,

  // GitLens設定
  "gitlens.currentLine.enabled": true,
  "gitlens.codeLens.enabled": true,
  "gitlens.hovers.currentLine.over": "line",
  "gitlens.views.fileHistory.enabled": true,
  "gitlens.statusBar.enabled": true
}

まとめ

VSCode Git連携を活用することで、Gitの操作をターミナルコマンドを覚えることなくGUIで直感的に実行できます。本記事で紹介した機能を活用すれば、日常的なバージョン管理作業を大幅に効率化できます。

VSCode Git連携の主要ポイント

まずはソース管理パネルでの基本操作を習得し、徐々にGitLensの機能を取り入れていくことをおすすめします。GUIでの操作に慣れたら、コマンドラインとの併用でさらに効率的なワークフローを構築できます。

参考リンク

• VS Code Source Control Overview
• VS Code Source Control Quickstart
• VS Code Branches and Worktrees
• VS Code Merge Conflicts
• GitLens - Visual Studio Marketplace
• GitLens 公式サイト
• Git 公式ドキュメント