Skip to main content

How to View Code Changes in Claude Code VS Code Extension

Claude Code uses VS Code's native diff system to display code changes through subtle visual indicators. Colored gutter bubbles appear next to modified lines, but they're easy to miss if you don't know where to look.

Where to Look​

When Claude modifies your code, colored indicators automatically appear in the editor gutter along the left margin:

  • Green - Lines that were added to the file
  • Red - Lines that were removed from the file
  • Blue - Lines that were modified or changed

These colored bubbles display a count showing how many lines were affected in that section. Click any bubble to open the diff viewer and see exactly what changed.

Three Ways to View Changes​

  • Click Gutter Bubbles - Click any colored indicator in the left margin next to your code. VS Code will display an inline diff view showing the old code above and the new code below, making it easy to compare the changes line by line.

  • Source Control Panel - Open the Source Control sidebar using the branch icon in the left activity bar, then click any modified file in the list. This opens a side-by-side diff view with the old version on the left and the new version on the right, ideal for reviewing larger changes across the entire file.

  • Git Terminal - Run git diff in your terminal to view all changes across all modified files, or run git diff --staged to review only the changes you've staged before committing them to your repository.

Git Safety

Commit before starting Claude Code sessions. Use git diff to review all changes before accepting them.

See Also: VS Code Integration Guide|Plan Mode|Getting Started|Configuration

Last updated on