Source Control - Visual Studio Code

Overview

Visual Studio Code has integrated source control management (SCM) with Git support built-in. The Source Control view provides a streamlined interface for common Git operations without leaving the editor.

Getting Started

Open Source Control View

Click the Source Control icon in the Activity Bar or press Ctrl+Shift+G (Windows/Linux) or Cmd+Shift+G (macOS)

Initialize Repository

Click “Initialize Repository” if you don’t have a Git repository yet

Stage Changes

Click the + icon next to changed files to stage them

Commit Changes

Enter a commit message and press Ctrl+Enter (Windows/Linux) or Cmd+Enter (macOS)

Source Control Architecture

VS Code’s SCM system is designed to support multiple providers:

// From VS Code source: src/vs/workbench/contrib/scm/common/scm.ts
export const VIEWLET_ID = 'workbench.view.scm';
export const VIEW_PANE_ID = 'workbench.scm';
export const REPOSITORIES_VIEW_PANE_ID = 'workbench.scm.repositories';
export const HISTORY_VIEW_PANE_ID = 'workbench.scm.history';

export interface ISCMProvider extends IDisposable {
  readonly id: string;
  readonly label: string;
  readonly rootUri?: URI;
  readonly groups: readonly ISCMResourceGroup[];
  readonly inputBoxTextModel: ITextModel;
  readonly count: IObservable<number | undefined>;
  readonly commitTemplate: IObservable<string>;
  readonly historyProvider: IObservable<ISCMHistoryProvider | undefined>;
}

View Modes

Switch between list and tree view for better organization:

export const enum ViewMode {
  List = 'list',
  Tree = 'tree'
}

{
  "scm.defaultViewMode": "list"
}

Resource Groups

Changes are organized into groups:

export interface ISCMResourceGroup {
  readonly id: string;
  readonly provider: ISCMProvider;
  readonly resources: readonly ISCMResource[];
  readonly label: string;
  readonly hideWhenEmpty: boolean;
}

export interface ISCMResource {
  readonly resourceGroup: ISCMResourceGroup;
  readonly sourceUri: URI;
  readonly decorations: ISCMResourceDecorations;
  open(preserveFocus: boolean): Promise<void>;
}

Common Resource Groups

Changes: Modified files not yet staged
Staged Changes: Files ready to commit
Merge Changes: Files with merge conflicts
Untracked: New files not yet added to Git

Common Operations

Staging and Unstaging

Stage Individual Files

Click the + icon next to a file in the Changes section

Stage All Changes

Click the + icon next to “Changes” header

Unstage Files

Click the - icon next to a file in the Staged Changes section

Stage Selected Lines

Select lines in the editor, right-click, and choose “Stage Selected Ranges”

Committing

Commit your staged changes with a message:

// The commit template is provided by the SCM provider
readonly commitTemplate: IObservable<string>;

Use Ctrl+Enter (Windows/Linux) or Cmd+Enter (macOS) to commit. The commit input box supports multi-line messages.

Keyboard Shortcuts

Action	Windows/Linux	macOS
Open Source Control	`Ctrl+Shift+G`	`Cmd+Shift+G`
Commit	`Ctrl+Enter`	`Cmd+Enter`
Refresh	`Ctrl+R`	`Cmd+R`
Stage changes	`Ctrl+K Ctrl+A`	`Cmd+K Cmd+A`
Undo last commit	`Ctrl+K Ctrl+U`	`Cmd+K Cmd+U`

Diff Editor

View changes in a side-by-side diff editor:

export interface ISCMResource {
  readonly multiDiffEditorOriginalUri: URI | undefined;
  readonly multiDiffEditorModifiedUri: URI | undefined;
}

Click on any changed file to open the diff editor showing the previous and current versions.

F7: Go to next change
Shift+F7: Go to previous change
Alt+F5: Go to next conflict
Shift+Alt+F5: Go to previous conflict

Branching and Merging

Branch Operations

Access branch operations from the Source Control menu or status bar:

View Current Branch

Check the branch name in the status bar (bottom left)

Switch Branch

Click the branch name and select a different branch

Create Branch

Click branch name, select “Create new branch”, and enter a name

Merge Branch

Use Git commands from the Command Palette (Ctrl+Shift+P)

Merge Conflict Resolution

When conflicts occur, VS Code provides inline tools:

<<<<<<< HEAD
const version = '1.0.0';
=======
const version = '1.1.0';
>>>>>>> feature-branch

Conflict Resolution Actions

Accept Current Change: Keep the HEAD version
Accept Incoming Change: Keep the merging branch version
Accept Both Changes: Keep both versions
Compare Changes: Open in diff editor

Git Commands

Access Git commands via the Command Palette:

Git: Clone
Git: Pull
Git: Push
Git: Fetch
Git: Checkout to...
Git: Create Branch...
Git: Delete Branch...
Git: Merge Branch...
Git: Rebase Branch...
Git: Stash
Git: Pop Stash
Git: View History

Configuration

Git Settings

{
  "git.enabled": true,
  "git.path": null,
  "git.autorefresh": true,
  "git.autofetch": true,
  "git.autofetchPeriod": 180,
  "git.confirmSync": true,
  "git.enableSmartCommit": false,
  "git.enableCommitSigning": false,
  "git.defaultCloneDirectory": null
}

SCM View Settings

{
  "scm.diffDecorations": "all",
  "scm.diffDecorationsGutterWidth": 3,
  "scm.alwaysShowRepositories": false,
  "scm.repositories.visible": 10
}

Decorations

Customize how changes are displayed in the editor:

{
  "git.decorations.enabled": true,
  "scm.diffDecorations": "all",
  "scm.diffDecorationsGutterVisibility": "always",
  "scm.diffDecorationsGutterAction": "diff"
}

export interface ISCMResourceDecorations {
  icon?: URI | ThemeIcon;
  iconDark?: URI | ThemeIcon;
  tooltip?: string;
  strikeThrough?: boolean;
  faded?: boolean;
}

History and Timeline

View file history and timeline:

readonly historyProvider: IObservable<ISCMHistoryProvider | undefined>;

View File History

Right-click a file and select “View File History”

Timeline View

Open the Timeline view in the Explorer sidebar to see file changes over time

Compare with Previous

Right-click a commit in the timeline to compare with current version

Advanced Features

Baseline Resources

Compare against different baselines:

export interface IBaselineResourceProvider {
  getBaselineResource(resource: URI): Promise<URI>;
}

Multi-Repository Support

Work with multiple Git repositories simultaneously:

{
  "scm.alwaysShowRepositories": true,
  "scm.repositories.visible": 5
}

VS Code automatically detects multiple Git repositories in your workspace and displays them separately in the Source Control view.

Action Buttons

Customize the source control action button:

readonly actionButton: IObservable<ISCMActionButtonDescriptor | undefined>;
readonly statusBarCommands: IObservable<readonly Command[] | undefined>;

Git Integration

.gitignore Support

VS Code respects .gitignore files and provides:

Syntax highlighting for .gitignore files
Auto-completion of patterns
Grayed-out ignored files in Explorer

Git Output

View detailed Git command output:

Open Output Panel

Press Ctrl+Shift+U (Windows/Linux) or Cmd+Shift+U (macOS)

Select Git

Choose “Git” from the dropdown menu

View Commands

See all Git commands executed by VS Code

Third-Party SCM Providers

Extend source control support beyond Git:

Popular SCM Extensions

GitHub Pull Requests and Issues: Manage PRs and issues
GitLens: Advanced Git features and visualization
SVN: Subversion support
Perforce: P4 integration

Best Practices

Use meaningful commit messages that describe what changed and why. The first line should be a brief summary (50 chars or less).

Avoid committing sensitive information like passwords, API keys, or personal data. Use environment variables and .gitignore instead.

Commit Message Format

Short summary (50 chars or less)

More detailed explanation if needed. Wrap at 72 characters.
Explain the problem this commit solves and why you made
the changes you did.

- Bullet points are okay too
- Use imperative mood: "Add feature" not "Added feature"

Troubleshooting

Changes not appearing
- Click the refresh icon in the Source Control view
- Check that Git is installed and in your PATH
- Verify you’re in a Git repository
Authentication issues
- Configure Git credentials: git config --global user.name "Your Name"
- Use SSH keys or credential manager
- Check Git extension settings
Performance with large repos
- Limit scope with git.scanRepositories
- Disable auto-fetch: "git.autofetch": false
- Use sparse checkout for monorepos

Get Started

Core Features

Extensions

Customization

Languages

​Overview

​Getting Started

​Source Control Architecture

​View Modes

​Resource Groups

Common Resource Groups

​Common Operations

​Staging and Unstaging

​Committing

​Keyboard Shortcuts

​Diff Editor

​Navigation in Diff View

​Branching and Merging

​Branch Operations

​Merge Conflict Resolution

Conflict Resolution Actions

​Git Commands

​Configuration

​Git Settings

​SCM View Settings

​Decorations

​History and Timeline

​Advanced Features

​Baseline Resources

​Multi-Repository Support

​Action Buttons

​Git Integration

​.gitignore Support

​Git Output

​Third-Party SCM Providers

Popular SCM Extensions

​Best Practices

​Commit Message Format

​Troubleshooting

Build docs developers (and LLMs) love

Overview

Getting Started

Source Control Architecture

View Modes

Resource Groups

Common Operations

Staging and Unstaging

Committing

Keyboard Shortcuts

Diff Editor

Navigation in Diff View

Branching and Merging

Branch Operations

Merge Conflict Resolution

Git Commands

Configuration

Git Settings

SCM View Settings

Decorations

History and Timeline

Advanced Features

Baseline Resources

Multi-Repository Support

Action Buttons

Git Integration

.gitignore Support

Git Output

Third-Party SCM Providers

Best Practices

Commit Message Format

Troubleshooting