VS CodeのSource Controlとは
VS CodeにはGitのSource Control機能が組み込まれています。Git repositoryを開くと変更ファイルを検出し、diff確認、stage、commit、branch操作、pushやpullなどをeditor内から実行できます。
ただし、VS CodeがGitとは別の履歴管理をしているわけではありません。VS CodeはPCにinstallされたGitを利用し、GUIからGit操作を実行します。VS Codeでstageした変更はCLIからも確認でき、terminalで実行したGit操作もSource Controlへ反映されます。
この関係を理解すると、GUIとCLIを別々に暗記する必要がなくなります。
VS Code Source Control
↓ 操作
Git
↓
working tree / staging area / repository / remote
Source Controlを開く
Git repositoryのfolderをVS Codeで開くと、Source Control viewから現在の変更を確認できます。Windows/Linuxでは Ctrl+Shift+G が基本shortcutです。
まずCLIなら次の状態確認に相当します。
git status
Source Controlに表示される情報を見て分からなくなった場合も、最初に git status へ戻ると現在のbranch、staged/unstaged、untrackedの状態を整理できます。
Changesは何を表しているか
ファイルを編集して保存するとSource Controlの Changes に表示されます。これは基本的に、まだ次のcommitへstageされていない変更です。
CLIでは次の確認が対応します。
git status
git diff
VS CodeではChanges内のファイルを選択するとdiff editorが開き、変更前と変更後を比較できます。
commit前に重要なのは「変更した」ことではなく、何を変更したのかをdiffで確認することです。
Stageはgit addに対応する
Changesのファイル横にある + からStageすると、ファイルは Staged Changes へ移動します。
CLIでは次に相当します。
git add <file>
すべてをstageする操作は、対象範囲を確認したうえで git add を使う操作に対応します。
Gitではstageした内容だけが通常の git commit の対象になります。したがってVS Codeでも、ChangesとStaged Changesを区別して見ることが重要です。
stage後の内容はCLIでも確認できます。
git status
git diff --staged
git diff は主にworking treeとstaging areaの差、git diff --staged は次のcommitへ入るstaged内容を確認するために使えます。
Commitはローカルrepositoryへ記録する
Staged Changesを確認したらcommit messageを入力し、Commitを実行します。
CLIなら次に相当します。
git commit -m "Describe the change"
ここで重要なのは、commitしただけではGitHubへ送信されないことです。
commitはまずローカルrepositoryへ履歴を記録します。GitHubなどのremoteへ反映するにはpushが必要です。
commit後は次で確認できます。
git status
git log --oneline -5
Branch操作もGitのbranch操作
VS CodeではStatus Barのbranch表示などからbranchを作成・切り替えできます。
CLIで新しいbranchを作成して切り替えるなら、たとえば次の操作です。
git switch -c feature/example
既存branchへ切り替えるなら、
git switch main
branch一覧は、
git branch
で確認できます。
GUIでbranch名をクリックしたときも、Git repository内では同じbranch概念が動いています。GUIだけで覚えず「今どのbranchにいるか」を意識することが重要です。
PushとSync Changesは同じではない
ローカルcommitをremoteへ送る基本操作はpushです。
git push
初回pushなどでupstreamを設定する場合は、状況に応じて次のような形を使います。
git push -u origin <branch-name>
一方、VS Codeの Sync Changes は単純なpushボタンではありません。VS Code公式documentationでは、Sync Changesはremoteから変更をpullしたあと、ローカルcommitをpushする同期操作として説明されています。
そのため「GitHubへ送りたいだけ」と「remote側の変更も取り込んで同期したい」は区別して考えます。
GUIの表示が分かりにくい場合は、次のように個別commandで状態を確認できます。
git status
git fetch
git branch -vv
git push
GUIとCLIの対応表
| VS Code | Git/CLIで考えると | 意味 |
|---|---|---|
| Changes | git status / git diff | まだstageしていない変更を確認 |
| Diff editor | git diff | 変更内容を確認 |
| Stage Changes | git add <file> | 次のcommitへ入れる内容を選ぶ |
| Staged Changes | git status / git diff --staged | commit予定内容を確認 |
| Commit | git commit | ローカル履歴へ記録 |
| Branch作成・切替 | git switch -c / git switch | 作業branchを管理 |
| Push | git push | ローカルcommitをremoteへ送る |
| Pull | git pull | remote変更を取得して現在branchへ統合 |
| Sync Changes | pull → push | remoteとlocalを同期 |
| Source Control Graph | git log --graph --oneline --decorate --all に近い用途 | branch・commit履歴を可視化 |
GUIとCLIは完全に同じ表示ではありませんが、操作対象となるGitの状態は共通です。
GUIだけで問題が分からないとき
Source Controlで状態が分からなくなった場合は、闇雲にボタンを押さずintegrated terminalから確認します。
最小確認手順は次の通りです。
git status
git branch --show-current
git diff
git diff --staged
git log --oneline --decorate -5
remoteとの関係が問題なら、さらに次を確認します。
git remote -v
git branch -vv
これにより、現在branch、unstaged/staged変更、直近commit、upstreamの状態を分離して確認できます。
VS Codeの便利機能とGitの原理を分ける
VS CodeにはSource Control Graph、部分stage、merge conflict支援、Timelineなど便利な機能があります。しかし、学習初期は「どのボタンを押すか」より、その操作がGitのどの状態を変えるのかを理解するほうが重要です。
基本フローはGUIでもCLIでも変わりません。
ファイルを編集
↓
変更を確認
↓
stage
↓
commit
↓
push
この流れを理解していれば、VS CodeのUIが将来変わってもGitそのものの理解は残ります。
まとめ
VS CodeのSource ControlはGitをGUIから扱いやすくするinterfaceです。
Changesは未stageの変更、Stageは git add、Commitは git commit、Pushは git push と対応させると理解しやすくなります。Sync Changesはpushだけではなく、remoteとの同期操作として扱う点にも注意します。
VS CodeだけでGitを操作できるようになることが最終目的ではありません。GUIを使いながら、裏側でworking tree・staging area・local repository・remoteのどこが変化したかを説明できることが重要です。
GUIで迷ったときに git status、git diff、git diff --staged へ戻れるようになれば、VS CodeとCLIを状況に応じて使い分けられます。
