Git VS Code Integration
In this page:
Built-in Source Control
The Source Control panel lists every modified, added, and deleted file in your working directory, and the editor gutter marks changed lines in green (added) or blue (modified) directly next to your code — so you can see what changed without leaving the file you're editing.
Example: Built-in Source Control
# Source Control panel lists modified/added/deleted files; gutter shows green (added) and blue (modified) markersStaging and Committing in VS Code
Clicking the + next to a file moves it to the Staged Changes group, exactly like git add; typing a message in the box above and pressing Commit (or Ctrl/Cmd+Enter) creates the commit — the whole add-commit flow without opening a terminal.
Example: Staging and Committing in VS Code
# Click + next to a file to stage it, type a message, press Ctrl+Enter to commitBranch Management
The current branch name sits in the status bar at all times — clicking it opens a searchable list of every local and remote branch, letting you check one out or create a new one from that same menu without typing a single git checkout command.
Example: Branch Management
# Click the branch name in the status bar to open a searchable list of local and remote branchesSyncing with Remotes
The Sync Changes button combines a pull and a push into one click, which is convenient for the common case but worth knowing about: if the pull creates a conflict, VS Code stops and asks you to resolve it before the push half proceeds.
Example: Syncing with Remotes
# Click 'Sync Changes' to pull then push in one clickGitLens Annotations
Installing the GitLens extension adds line-by-line author annotations directly inside your editor window. Hovering over a line reveals who wrote the code and which commit it belongs to.
Example: GitLens Annotations
# Install the GitLens extension, hover a line to see its author and commitChapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: