← Back to Git Course | Chapter 10: Tools & Internals | Lesson 2 of 8

Git VS Code Integration

VS Code's Git panel is like a to-do sidebar in your writing app that lists every file you touched and lets you save and share with a click.

In this page:

  1. Built-in Source Control
  2. Staging and Committing in VS Code
  3. Branch Management
  4. Syncing with Remotes
  5. GitLens Annotations

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

bash 
# Source Control panel lists modified/added/deleted files; gutter shows green (added) and blue (modified) markers

Staging 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

bash 
# Click + next to a file to stage it, type a message, press Ctrl+Enter to commit

Branch 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

bash 
# Click the branch name in the status bar to open a searchable list of local and remote branches

Syncing 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

bash 
# Click 'Sync Changes' to pull then push in one click

GitLens 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

bash 
# Install the GitLens extension, hover a line to see its author and commit
Related Topics

Git IntelliJ Integration · Git Docker Integration · Git Code Review · GitHub Edit Code

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Clicking + to stage a file and assuming it is committed, when you still need to enter a message and commit.
  2. Not noticing the current branch in the status bar before committing, so the commit lands on the wrong branch.
  3. Opening a parent folder in VS Code instead of the repository folder, so the Source Control panel shows no repository.
🔒

Chapter Quiz — Complete all 8 topics to unlock

0/8 topics done

Complete these topics first:

← Previous Lesson Git GUI Tools (GitKraken, SourceTree) Next Lesson → Git IntelliJ Integration

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.