The Diff Viewer gives you a clear picture of every change in your working directory or between branches. Use it to inspect what an AI agent has written, compare your feature branch against main, or review staged changes before committing — all with syntax highlighting and a navigable file list.
Opening the Diff Viewer
From Source Control
Open the Source Control Navigator
Click the Source Control icon in the sidebar or press Cmd+3.
Click a modified file
Select any file from the changed files list. Its diff opens in the editor area.
From the Command Palette
Open the Command Palette
Press Cmd+Shift+P.
Type diff or compare
Filter results to find the comparison you want.
Select a comparison
Press Enter to open it.
View modes
Toggle between the two display modes using the button in the toolbar.
Unified view
A single-column layout similar to GitHub’s diff display. Both the old and new versions of a file appear in one scrollable column:
- Added lines have a green background.
- Removed lines have a red background.
- Unchanged context lines appear without a background.
- Line numbers from both the old and new file are shown side by side.
Best for: quick reviews, smaller changesets, and reading changes linearly.
Side-by-side view
A two-column layout showing the original and modified versions simultaneously:
- Left column — the original file.
- Right column — the modified file.
- Corresponding changes are aligned horizontally so you can compare them directly.
Best for: large refactors, moved code, and situations where you need to compare the before and after in detail.
Color coding
| Color | Meaning |
|---|
| Green background | Line was added |
| Red background | Line was removed |
| No highlight | Unchanged context line |
Navigating diffs
File list
The left panel lists all changed files. Each entry shows:
- The file path
- A change summary (
+additions / -deletions)
- A status icon indicating the type of change
| Icon | Status | Meaning |
|---|
| M | Modified | File has changes |
| A | Added | New file |
| D | Deleted | File was removed |
| R | Renamed | File was moved or renamed |
| Action | How |
|---|
| Navigate between files | Up / Down arrow keys |
| Open a file in the editor | Enter |
| Show or hide the file list | Click the sidebar toggle |
Within a single diff
- Scroll to move through the diff.
- Changes are grouped into hunks, separated by context dividers.
- Click a line number to jump directly to that line in the editor.
Comparing branches
When you open a branch comparison, the Diff Viewer shows:
- Base branch — the target (e.g.,
main).
- Head branch — your feature branch.
- All commits between the two branches.
- The complete unified diff across all changed files.
The title bar displays the comparison: for example, feature-x vs main.
Integration with Code Review
The Diff Viewer and Code Review work together:
Review your changes visually
Open the Diff Viewer to confirm the diff is what you expect.
Click Code Review
Press the Code Review button in the toolbar. The AI agents analyze the same diff you’re viewing.
Read the feedback
Agent output appears in terminal tabs. Address the suggestions, then re-check the diff.
Keyboard shortcuts
| Action | Shortcut |
|---|
| Navigate files | Up / Down |
| Open file in editor | Enter |
| Toggle file list | Click sidebar toggle |
Use the side-by-side view when reviewing refactored code. It makes it easy to spot relocated blocks and verify that logic was preserved.
The file list summary gives you additions and deletions at a glance, so you can prioritize which files to review first.