Using Git source control in VS Code

Visual Studio Code has integrated source control management (SCM) and includesGit support out-of-the-box. Many other source control providers are available through extensions on theVisual Studio Marketplace.

With GitHub Copilot in VS Code, you can get suggestions for commit messages, pull requests, and review code changes before committing them. Learn more aboutGitHub Copilot in VS Code.

Working in a Git repository

VS Code recognizes when you open a folder that is a Git repository. The Source Control view enables you to perform most of the Git operations without using the command line.

You can access the Source Control view from the by selecting theSource Control icon in the Activity Bar or by using the⌃⇧G (Windows, LinuxCtrl+Shift+G) keyboard shortcut. If you have changes, the Source Control icon indicateshow many changes you currently have in your repository.

The Source Control view shows the details of your current repository changes:CHANGES,STAGED CHANGES andMERGE CHANGES. You can also view thesource control graph to see how your changes relate to the repository's history.

When you select a file in the Source Control view, you will see the changes that you have made to that file in a diff editor.

You can also find indicators of thestatus of your repository in the bottom-left of the VS Code Status Bar: thecurrent branch,dirty indicators, and the number ofincoming and outgoing commits of the current branch. Tocheck out any branch in your repository, select the status indicator and select the Git reference from the list.

Cloning a repository

If you haven't opened a folder yet, the Source Control view will give you the options toOpen Folder from your local machine orClone Repository.

If you selectClone Repository, you will be asked for the URL of the remote repository (for example onGitHub) and the parent directory under which to put the local repository.

For a GitHub repository, you would find the URL from the GitHubCode dialog.

You would then paste that URL into theGit: Clone prompt.

You'll also see the option toClone from GitHub. Once you authenticate with your GitHub account in VS Code, you'll be able to search through repositories by name, and select any repo to clone it. You can also start the flow to clone a Git repository with theGit: Clone command in theCommand Palette (⇧⌘P (Windows, LinuxCtrl+Shift+P)). To see a step-by-step walkthrough, check out ourClone repos from VS Code video.

Initialize a repository

If your workspace is on your local machine, you can enable Git source control by creating a Git repository with theInitialize Repository command. When VS Code doesn't detect an existing Git repository, the Source Control view will give you the options toInitialize Repository orPublish to GitHub.

You can also run theGit: Initialize Repository andPublish to GitHub commands from theCommand Palette (⇧⌘P (Windows, LinuxCtrl+Shift+P)).

• Initialize Repository: creates the necessary Git repository metadata files and shows your workspace files as untracked changes ready to be staged.
• Publish to GitHub: directly publishes your workspace folder to a GitHub repository, allowing you to choose between private and public repositories. Check out ourpublishing repos video for more information about publishing to GitHub.

Commit

Staging (git add) andunstaging (git reset) can be done via contextual actions in the files or by drag-and-drop.

You can type a commit message above the changes and pressCtrl+Enter (macOS:⌘+Enter) to commit them. If there are any staged changes, only those changes will be committed. Otherwise, you'll get a prompt asking you to select what changes you'd like to commit and get the option to change your commit settings.

We've found this to be a great workflow. For example, in the earlier screenshot, only the staged changes tooverview.png will be included in the commit. Later staging and commit actions could include the changes toversioncontrol.md and the two other.png images as a separate commit.

More specificCommit actions can be found in theViews and More Actions... menu on the top of the Source Control view.

Generate a commit message with AI

GitHub Copilot in VS Code can generate a commit message for you, based on the code changes you've made. In the Source Control view, select theGenerate Commit Message with Copilot button () in the commit message input box.

If you have specific requirements for your commit message for your organization or project, you can use Copilot custom instructions for generating commit messages. For example,commit messages have a maximum length of 60 chars and should start with a verb in the present tense. Get more details aboutCopilot custom instructions for generating commit messages.

Author commit messages using an editor

If you don't enter a commit message when committing changes, VS Code opens an editor for theCOMMIT_EDITMSG file where you can author the commit message in the editor. After you provide a commit message, either close the editor tab, or select theAccept Commit Message button in the editor toolbar to commit the changes.

To cancel the commit operation, you can either clear the contents of the text editor and close the editor tab, or select theDiscard Commit Message button in the editor toolbar.

You can disable this functionality by toggling thegit.useEditorAsCommitInput setting. After the setting is changed, you have to restart VS Code for the change to take effect.

To use the same flow for git commit commands executed in the integrated terminal, enable thegit.terminalGitEditor setting.

Git blame information

VS Code can show git blame information inline in the editor and in the Status Bar. Hover over the Status Bar item or inline hint to view detailed git blame information.

To enable or disable git blame information, use theGit: Toggle Git Blame Editor Decoration andGit: Toggle Git Blame Status Bar Item commands, or configure these settings:

• git.blame.statusBarItem.enabled (enabled by default)
• git.blame.editorDecoration.enabled

You can customize the format of the message that is shown in the editor and in the Status Bar with thegit.blame.editorDecoration.template andgit.blame.statusBarItem.template settings. You can use variables for the most common information.

For example, the following template shows the subject of the commit, the author's name, and the author's date relative to now:

{  "git.blame.editorDecoration.template":"${subject}, ${authorName} (${authorDateAgo})"}

To adjust the color of the editor decoration, use thegit.blame.editorDecorationForeground theme color.

Review uncommitted code changes with AI

GitHub Copilot in VS Code can help you review your uncommitted code changes.

1. In the Source Control view, select theCopilot Code Review button to start a code review of the uncommitted changes

   

2. Copilot generates code review comments and suggestions as overlays in the editor

   

   You can also view a list of all code review comments in theComments panel.

3. You apply or discard suggestions by using the corresponding buttons, or context menu actions in the Comments panel

Get more details aboutreviewing code changes with Copilot in the GitHub documentation.

Branches and Tags

You can create and checkout branches directly within VS Code through theGit: Create Branch andGit: Checkout to commands in theCommand Palette (⇧⌘P (Windows, LinuxCtrl+Shift+P)).

If you runGit: Checkout to, you will see a dropdown list containing all of the branches or tags in the current repository. It will also give you the option to create a new branch if you decide that's a better option, or checkout a branch in detached mode.

TheGit: Create Branch command lets you quickly create a new branch. Just provide the name of your new branch and VS Code will create the branch and switch to it. If you choose toCreate new branch from..., you'll get an extra prompt that allows you to specify which commit the new branch should be pointing to.

Remotes

Given that your repository is connected to some remote and that your checked out branch has anupstream link to a branch in that remote, VS Code offers you useful actions topush,pull, andsync that branch (the latter will run apull command followed by apush command). You can find these actions in theViews and More Actions... menu, along with the option toadd or remove a remote.

VS Code is able to periodically fetch changes from your remotes. This enables VS Code to show how many changes your local repository is ahead or behind the remote. This feature is disabled by default and you can use thegit.autofetchsetting to enable it.

Source control graph

When you have a remote repository configured, you can see how many commits you are ahead or behind the remote. TheGraph view in the Source Control view shows a graphical representation of the commits that are incoming and outgoing.

The graph contains the current branch, the current branch's upstream branch, and an optional base branch. The root of the graph is the common ancestor of these branches.

The graph provides the following functionality:

• Select an entry to see the files that are changed in that commit. Select theOpen Changes action to see the diff of the commit in the editor.
• Right-click on a commit to perform actions such as checkout, cherry-pick, and more. Use the Copilot actions to summarize a commit or attach it as context to your chat prompt.
• Select a file to see the diff of that file in the editor.

Use the actions in the Graph view tool bar to select the branch, fetch, pull, push, and sync changes.

Git Status Bar actions

There is aSynchronize Changes action in the Status Bar, next to the branch indicator, when the current checked out branch has an upstream branch configured.Synchronize Changes will pull remote changes down to your local repository and then push local commits to the upstream branch.

If there is no upstream branch configured and the Git repository has remotes set up, thePublish action is enabled. This will let you publish the current branch to a remote.

If your workspace contains multiple Git repositories, the Status Bar will show the current repository. When you select the Status Bar item, you can choose the behavior of which repository should be active.

Gutter indicators

If you open a folder that is a Git repository and begin making changes, VS Code will add useful annotations to the gutter and to the overview ruler.

• A red triangle indicates where lines have been deleted
• A green bar indicates new added lines
• A blue bar indicates modified lines

Merge conflicts

Merge conflicts are recognized by VS Code. Differences are highlighted and there are inline actions to accept either one or both changes. Once the conflicts are resolved, stage the conflicting file so you can commit those changes.

3-way merge editor

To help you resolve merge conflicts, VS Code provides a 3-way merge editor where you can interactively accept incoming and current changes and view and edit the resulting merged file. The 3-way merge editor is opened by selecting theResolve in Merge Editor button in the bottom right corner of a file with Git merge conflicts.

The 3-way merge editor displays separate views forIncoming changes (on the left),Current changes (on the right), and theResult of the merge (at the bottom). Conflicts are highlighted and can be resolved by using the CodeLens buttons.

Resolving conflicts

The 3-way merge editor allows you to resolve conflicts by accepting either one or both changes. You can also manually edit the result of the merge.

For some conflicts, the merge editor shows anAccept Combination button. Accepting the combination resolves the current conflict by smartly merging both changes. This is especially useful for changes in the same line that don't touch the same characters.

Use theIgnore buttons to accept neither the incoming nor current change, but mark the conflict as resolved. This resets the conflicting area to the state before any changes were made.

Completing the merge

You can use the conflict counter in the right of the result editor to keep track of how many unresolved conflicts are remaining. Clicking on the counter jumps to the next unresolved conflict. Once all conflicts are resolved, you can complete the merge by selectingComplete Merge in the bottom right corner. This stages the file and closes the merge editor.

Alternative layouts and more

Selecting the three dots (···) in the top right corner of the merge editor opens a context menu with additional options. You can switch to a vertical layout and display the base view, which shows the state of the file before any changes were made.

The three dots next toIncoming,Current, andResult offer options for each view, such as showing a side-by-side diff against base, accepting all changes, or resetting the result.

Understanding conflicts

If you want to learn more about the details of how 3-way merge editors work, we can recommend the following video:

Viewing diffs

Our Git tooling supports viewing of diffs within VS Code.

The Diff editor has a separate gutter in the middle, which enables you toStage orRevert changes code blocks. If you select a block of text, you can revert or stage the changes that are included in the selection.

Accessible Diff Viewer

There is an Accessible Diff Viewer in the Diff editor that presents changes in a unified patch format. You can navigate between changes withGo to Next Difference (F7) andGo to Previous Difference (⇧F7 (Windows, LinuxShift+F7)). Lines can be navigated with arrow keys and pressingEnter will jump back in the Diff editor and the selected line.

Timeline view

The Timeline view, accessible at the bottom of the File Explorer by default, is a unified view for visualizing time-series events (for example, Git commits) for a file.

VS Code's built-in Git support provides the Git commit history of the specified file. Selecting a commit will open a diff view of the changes introduced by that commit. When you right-click on a commit, you'll get options toCopy Commit ID andCopy Commit Message.

Visual Studio Code supports more Git history workflows throughextensions available on the VS Code Marketplace.

Git output window

You can always peek under the hood to see the Git commands we are using. This is helpful if something strange is happening or if you are just curious. :)

To open the Git output window, runView >Output and selectLog (Git) from the dropdown list.

VS Code as Git editor

When you launch VS Code from the command line, you can pass the--wait argument to make the launch command wait until you have closed the new VS Code instance. This can be useful when you configure VS Code as your Git external editor so Git will wait until you close the launched VS Code instance.

Here are the steps to do so:

1. Make sure you can runcode --help from the command line and you get help.
   • if you do not see help, please follow these steps:
     • macOS: SelectShell Command: Install 'Code' command in path from theCommand Palette.
     • Windows: Make sure you selectedAdd to PATH during the installation.
     • Linux: Make sure you installed Code via our new.deb or.rpm packages.
2. From the command line, rungit config --global core.editor "code --wait"

Now you can rungit config --global -e and use VS Code as editor for configuring Git.

VS Code as Git difftool and mergetool

You can use VS Code's diff and merge capabilities even when using Git from command-line. Add the following to your Git configurations to use VS Code as the diff and merge tool:

[diff]    tool = default-difftool[difftool "default-difftool"]    cmd = code --wait --diff $LOCAL $REMOTE[merge]    tool = code[mergetool "code"]    cmd = code --wait --merge $REMOTE $LOCAL $BASE $MERGED

This uses the--diff option that can be passed to VS Code to compare two files side by side. The merge tool will be used the next time Git discovers a merge conflict.

To summarize, here are some examples of where you can use VS Code as the editor:

• git rebase HEAD~3 -i do interactive rebase using VS Code
• git commit use VS Code for the commit message
• git add -p followed bye for interactive add
• git difftool <commit>^ <commit> use VS Code as the diff editor for changes

Working with GitHub Pull Requests and Issues

Visual Studio Code can also bring in GitHub's pull requests and issues. Create your PRs in VS Code, review with comments, and approve them without switching context. Learn more aboutGitHub PRs and Issues in VS Code.

SCM Providers

VS Code has support for handling multiple Source Control providers simultaneously. For example, you can open multiple Git repositories alongside your Azure DevOps Server local workspace and seamlessly work across your projects. To turn on theSource Control Providers view, select the overflow menu in theSource Control view (⌃⇧G (Windows, LinuxCtrl+Shift+G)), hover overViews, and make sure thatSource Control Repositories is marked with a check. TheSource Control Providers view shows the detected providers and repositories, and you can scope the display of your changes by selecting a specific provider.

SCM Provider extensions

If you would like to install another SCM provider, you can search on thescm providers extension category in theExtensions view (⇧⌘X (Windows, LinuxCtrl+Shift+X)). Start typing '@ca' and you will see suggestions for extension categories like debuggers and linters. Select@category:"scm providers" to see available SCM providers.

Next steps

• Intro Video - Git Version Control - An introductory video providing an overview of VS Code Git support.

• Intro to collaborating on GitHub - Learn how to use GitHub with VS Code.

• Learn more aboutCopilot VS Code - Learn about Copilot in VS Code.

• Source Control API - If you want to integrate another Source Control provider into VS Code, see our Source Control API.