Episode 10 of 14

Git Features in VS Code

Learn about Git Features in VS Code

While Git is a command-line tool, VS Code has excellent built-in Git integration that makes many operations visual and intuitive. This episode covers how to use Git directly inside VS Code — from staging and committing to resolving merge conflicts.

Source Control Panel

Open the Source Control panel with Ctrl + Shift + G (or Cmd + Shift + G on Mac). This is your visual Git dashboard. It shows:

  • Changes — Modified files not yet staged
  • Staged Changes — Files ready to commit
  • Merge Changes — Files with conflicts during a merge

Staging and Committing

  1. Modified files appear under Changes
  2. Click the + icon next to a file to stage it (same as git add)
  3. Click the + icon at the "Changes" header to stage all files
  4. Type your commit message in the text box at the top
  5. Click the checkmark button or press Ctrl + Enter to commit

To unstage a file, click the - icon next to it under "Staged Changes."

Viewing Diffs

Click any modified file in the Source Control panel to see a side-by-side diff. Red lines are deletions, green lines are additions. This is much easier to review than git diff in the terminal.

Inline Change Indicators

While editing, VS Code shows change indicators in the gutter (left margin):

  • Green bar — New lines added
  • Blue bar — Modified lines
  • Red triangle — Deleted lines

Click these indicators to see the original content and optionally revert changes.

Branch Management

The current branch is shown in the bottom-left status bar. Click it to:

  • Switch to another branch
  • Create a new branch
  • See all local and remote branches

Resolving Merge Conflicts

VS Code makes conflict resolution visual. When a conflict occurs, you'll see the conflict markers with clickable buttons above:

  • Accept Current Change — Keep your version
  • Accept Incoming Change — Keep the other branch's version
  • Accept Both Changes — Keep both
  • Compare Changes — See a side-by-side diff

Recommended Extensions

Git Graph

Install the Git Graph extension for a visual commit history. It shows branches, merges, and commits as a beautiful interactive graph — much better than git log --graph.

GitLens

Install GitLens for supercharged Git features:

  • Inline blame — See who last modified each line, right in the editor
  • File history — Browse all commits that touched a file
  • Line history — See the complete history of a specific line
  • Compare branches — Visual diff between branches

Terminal in VS Code

For anything not available in the GUI, use VS Code's built-in terminal. Press Ctrl + ` to open it. You get the best of both worlds — visual tools for common operations, command line for advanced Git commands.

What's Next

You can now use Git both from the command line and VS Code's GUI. In the next episode, we'll dive into the most powerful feature of Git — branching.