Introduction to Git in Visual Studio Code (2024)

Want to easily manage your source code and collaborate with others? Git and GitHub are the tools you need! And with Visual Studio Code, you can set up and use them in a snap. Even if you're a beginner, VS Code's user-friendly interface guides you through common Git actions like pushing and pulling code, creating and merging branches, and committing code changes. And if you're a pro, you'll love the ability to perform Git actions directly within the editor, saving you time and effort compared to using the Git command line. Plus, the seamless workflow between VS Code and Git means you can stay in your editor and get more done.

Set up Git in VS Code

To use Git and GitHub in VS Code, first make sure you have Git installed on your computer. If Git is missing, the Source Control view shows instructions on how to install it. Make sure to restart VS Code afterwards.

Additionally you can sign into VS Code with your GitHub account in the Accounts menu in the lower right of the Activity bar to enable additional features like Settings Sync, but also cloning and publishing repositories from GitHub.

Introduction to Git in Visual Studio Code (1)

Open a Git repository

VS Code provides several ways to get started in a Git repository, from local to remote cloud-powered environments like GitHub Codespaces.

Clone a repository locally

To clone a repository, run the Git: Clone command in the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)), or select the Clone Repository button in the Source Control view.

If you clone from GitHub, VS Code prompts you to authenticate with GitHub. Then, select a repository from the list to clone to your machine. The list contains both public and private repositories.

Introduction to Git in Visual Studio Code (2)

For other Git providers, enter the repository URL, select Clone, and pick a folder on your local machine to clone the files into. VS Code opens the folder once the repository is cloned on your local machine.

Introduction to Git in Visual Studio Code (3)

Initialize a repository in a local folder

To initialize a new local Git repository:

  1. Pick an existing or new folder on your computer and open it in VS Code.

  2. In the Source Control view, select the Initialize Repository button.

    This creates a new Git repository in the current folder, allowing you to start tracking code changes.

    This action is equivalent to running git init on the command-line.

    Introduction to Git in Visual Studio Code (4)

Publish local repository to GitHub

You can also initialize and local repository and publish it directly to GitHub. This creates a new repository on your GitHub account, and pushes your local code changes to the remote repository. Having your source code on a remote repository is a great way to back up your code, collaborate with others, and automate your workflow with GitHub Actions.

Use the Publish to GitHub command button in the Source Control view. You can then choose a name and description for the repository, and whether to make it public or private.

Introduction to Git in Visual Studio Code (5)

Once the repository has been created, VS Code pushes your local code to the remote repository. Your code is now backed up on GitHub, and you can start collaborating with others with commits and pull requests.

Open a GitHub repository in a codespace

GitHub Codespaces lets you open a GitHub repository in a fully configured cloud-based development environment, enabling you to develop in a browser without having to install any software on your local computer. GitHub Codespaces allows free usage for individuals, which makes it easy to get started working on open source projects.

To create a codespace for your GitHub repository:

  1. Install the GitHub Codespaces extension in VS Code and sign in with your GitHub account.

  2. Run the Codespaces: Create New Codespace command.

  3. Select the repository and branch you want to open.

    VS Code opens a new window, which is connected to the codespace. The source code, terminal, and running and debugging are hosted in the remote cloud-based development environment.

    Notice that the File Explorer and Status Bar indicate that the workspace is opened in a codespace.

    Introduction to Git in Visual Studio Code (6)

Alternatively, you can also start from a codespace template on the GitHub Codespaces website.

If you already have a codespace open in your browser, run the Codespaces: Open in VS Code Desktop command in the browser to connect to the codespace from your local VS Code Desktop.

You can learn more about GitHub Codespaces, including customization such as forwarding ports, in the Developing in a codespace documentation.

Open a GitHub repository remotely

VS Code's remote repository support allows you to browse and edit a GitHub repository without cloning it to your local computer. This is useful for quickly making changes to a remote repository without having to clone the entire codebase to your machine.

  1. First install the GitHub Repositories extension.

  2. Run the command Remote Repositories: Open Remote Repository... or use the Open Remote Repository button the Explorer view.

  3. Search and select the GitHub repository that you want to open.

    Introduction to Git in Visual Studio Code (7)

Tip: If you need to execute code or run terminal commands, you can seamlessly switch from a remote repository to a codespace with the command Continue Working on.

Staging and committing code changes

Once you have a Git repository set up, you can start tracking code changes by staging and committing your newly created and edited code.

Tip: Commit your changes early and often. This makes it easier to revert back to previous versions of your code if needed.

You can access the Source Control view from the Activity Bar to list all changed files in your workspace. You can toggle between a tree view or list view by using the tree/list icon in the Source Control view header.

Introduction to Git in Visual Studio Code (8)

When you select a file in the Source Control view, the editor shows a diff view that highlights the file changes, compared to the previously committed file.

Introduction to Git in Visual Studio Code (9)

To stage a file, select the + (plus) icon next to the file in the Source Control view. This adds the file to the Staged Changes section, indicating that it will be included in the next commit.

Introduction to Git in Visual Studio Code (10)

You can also stage all pending changes at once by selecting the + (plus) icon next to Changes in the Source Control view.

Staged changes can also be discarded by selecting the (minus) icon next to the file. Similarly, you can discard all staged changes by selecting the (minus) icon next to Staged Changes in the Source Control view.

Introduction to Git in Visual Studio Code (11)

To commit your staged changes, type a commit message in the upper text box, and then select the Commit button. This saves your changes to the local Git repository, allowing you to revert to previous versions of your code if needed.

Tip: If you have a GitHub Copilot subscription, and installed the Github Copilot extension, you can use the sparkle icon to generate a commit message.

You can navigate through and review all local file changes and commits in the Timeline view available in the bottom of the Explorer view.

Introduction to Git in Visual Studio Code (12)

Pushing and pulling remote changes

Once you have made commits to your local Git repository, you can push them to the remote repository. The Sync Changes button indicates how many commits are going to be pushed and pulled. Selecting the Sync Changes button downloads (pull) any new remote commits and uploads (push) new local commits to the remote repository.

Introduction to Git in Visual Studio Code (13)

Tip: You can enable the Git: Autofetch setting to always get an up-to-date remote commit indicator.

Push and pull can also be performed individually by using their respective commands. You can access these commands from the Source Control menu.

Introduction to Git in Visual Studio Code (14)

Using branches

In Git, branches allow you to work on multiple versions of your codebase simultaneously. This is useful for experimenting with new features or making large code changes without affecting the main codebase.

The branch indicator in the Status bar shows the current branch and lets you switch to new and existing branches.

Introduction to Git in Visual Studio Code (15)

To create a new branch, select the branch indicator and choose to create it from the current branch or another local one. Type a name for the new branch, and confirm. VS Code creates a new branch and switches to it, allowing you to make changes to your code without affecting the main branch.

Introduction to Git in Visual Studio Code (16)

Tip: If you use the GitHub Pull Requests and Issues extension, you can create a branch directly from an issue, which gets you started working in a new local branch and automatically prefills the pull request for you.

After you create a local branch, you can push the branch to the remote repository by selecting Publish Branch in the Source Control view. This creates a new branch on the remote repository, allowing you to collaborate with others in that branch.

Creating and reviewing GitHub pull requests

In Git and GitHub, pull requests (PRs) are a way for collaborators to review and merge code changes from separate branches into the main branch. This enables teams to review and approve code changes before they are incorporated into the main codebase, ensuring that only high-quality changes are merged.

To use pull requests in VS Code, you need to install the GitHub Pull Requests and Issues extension. This extension adds PR and issue tracking functionality to VS Code, allowing you to create, review, and merge PRs from within the editor.

To create a PR, make sure you are on a separate branch from the main branch, and push your code changes to the remote repository. In the Source Control view, select the Create Pull Request button. This opens the PR creation form, where you can enter a title and description for the PR, and choose which branch to merge the changes into. Select Create to create the PR.

Introduction to Git in Visual Studio Code (17)

To review a PR, select the Review Pull Request button in the Source Control view, and select the PR you want to review. This opens the PR in a new editor window, where you can review the code changes and leave comments. Once you are satisfied with the code changes, you can select the Merge button to merge the PR into the targeted branch.

Learn more about pull requests in VS Code's GitHub documentation.

Using Git in the built-in terminal

As all Git state is kept in the local repository, you can easily switch between VS Code's UI, the built-in terminal, or external tools like GitHub Desktop. You can also set up VS Code as your default Git editor, allowing you to use VS Code to edit commit messages and other Git-related files.

Git Bash on Windows

Git Bash is a popular shell environment for Windows that provides a Unix-like command-line interface for working with Git and other command-line tools. Visual Studio Code's integrated terminal supports Git Bash as a shell, allowing you to seamlessly integrate Git Bash into your development workflow. Installing Git on your Windows machine also installs Git Bash, if it wasn't deselected during the installation steps.

Introduction to Git in Visual Studio Code (18)

Start by opening View > Terminal (⌃` (Windows, Linux Ctrl+`)). Select the dropdown arrow next to the + icon in the terminal panel to pick a new shell to open. If Git Bash is installed, it's shown in the list of terminals and shells. You can toggle between different terminals and shells in the Terminal sidebar. With Git Bash configured in Visual Studio Code, you can now use all of your favorite Git commands directly from the terminal in your code editor.

If you want to set Git Bash as your default shell, open the Terminal dropdown (next to the + icon) and select Select Default Profile. This opens a list of available shells, including Git Bash. Selecting Git Bash sets it as your default shell, and all future terminals will be opened with Git Bash. More advanced terminal tips are available in the terminal documentation.


Introduction to Git in Visual Studio Code (2024)


How to use Git in Visual Studio Code step by step? ›

Open a GitHub repository in a codespace
  1. Install the GitHub Codespaces extension in VS Code and sign in with your GitHub account.
  2. Run the Codespaces: Create New Codespace command.
  3. Select the repository and branch you want to open. VS Code opens a new window, which is connected to the codespace.

How to use Git step by step? ›

How Git works
  1. Create a "repository" (project) with a git hosting tool (like Bitbucket)
  2. Copy (or clone) the repository to your local machine.
  3. Add a file to your local repo and "commit" (save) the changes.
  4. "Push" your changes to your main branch.
  5. Make a change to your file with a git hosting tool and commit.

How do I know if Git is installed in VS Code? ›

Make sure you see a connected "Git" icon on the bottom left of the screen. This shows that VSCode has identified this as a Git repository. You can also check the Source Control tab on the left to double check you're in a Git repository.

How to integrate Git in Visual Studio? ›

There are three ways to start using Git with Visual Studio to be more productive:
  1. Create a new Git repository. If you already have code that's not associated with Git, you can start by creating a new Git repository.
  2. Clone an existing Git repository. ...
  3. Open an existing Git repository.
May 15, 2024

What is the difference between Git and GitHub? ›

The key difference between Git and GitHub is that Git is a free, open source version control tool that developers install locally on their personal computers, while GitHub is a pay-for-use online service built to run Git in the cloud. Git is a piece of software. GitHub is an online SaaS service.

How to pull code from git in Visual Studio? ›

  1. In the Git Changes window, choose Pull. You can also choose Pull from the Git menu.
  2. A confirmation message displays when the pull operation completes. If there are conflicts during the merge portion of the pull operation, Visual Studio will notify you.
Oct 24, 2022

What is Git for beginners? ›

Git is a distributed version control system, so here, every developer gets their local repository with full commit history. The commit history makes Git fast, as now a network connection is not needed to create commits or perform diffs between commits.

Is Git easy to learn? ›

Git itself is very simple to work with. Beginners are often surprised to find out there are only about 12 git commands developers use on a regular basis, including the following: git pull to get changes from the server. git push to update a remote repo.

What should be done before starting using Git? ›

Any important git and GitHub terms are in bold with links to the official git reference materials.
  1. Step 0: Install git and create a GitHub account. ...
  2. Step 1: Create a local git repository. ...
  3. Step 2: Add a new file to the repo. ...
  4. Step 3: Add a file to the staging environment. ...
  5. Step 4: Create a commit. ...
  6. Step 5: Create a new branch.

Does Visual Studio code come with Git? ›

Visual Studio Code has integrated source control management (SCM) and includes Git support out-of-the-box.

Does Git get installed with Visual Studio? ›

Visual Studio has Git tooling built directly into the IDE, starting with Visual Studio 2019 version 16.8.

How do I see Git commands in VS Code? ›

To view the Git output, select the (...) button in the Source Control view, and then select Show Git Output, use the Git: Show Git Output command, or use the Toggle Output command (Ctrl+K Ctrl+H) and then select Git from the dropdown.

Is Visual Studio better than Visual Studio Code? ›

Visual Studio might be the way to go if you prioritize Microsoft support and robust features for complex projects. On the other hand, if you seek versatility and a lightweight environment, Visual Studio Code could be your preferred choice.

How do I connect Visual Studio project to Git? ›

Publishing an existing project to GitHub
  1. Open a solution in Visual Studio.
  2. If solution is not already initialized as a Git repository, select Add to Source Control from the File menu.
  3. Open Team Explorer.
  4. In Team Explorer, click Sync.
  5. Click the Publish to GitHub button.
Jun 21, 2023

Is there an alternative to Git? ›

The best overall Git alternative is Azure DevOps Server. Other similar apps like Git are Helix Core, AWS CodeCommit, Subversion, and Rational ClearCase. Git alternatives can be found in Version Control Software but may also be in Configuration Management Tools or Continuous Integration Tools.

How do I run a GitHub code in Visual Studio code? ›

  1. In VS Code, in the Activity Bar, click the Remote Explorer icon. ...
  2. Select "GitHub Codespaces" from the dropdown at the top of the "Remote Explorer" side bar, if it is not already selected.
  3. Click Sign in to GitHub.
  4. If you are not currently signed in to GitHub you'll be prompted to do so.

How to push code to GitHub from Visual Studio step by step? ›

How to push code from Vs Code to GitHub?
  1. Step 1 − Download and install Git.
  2. Step 2 − Sign up for a GitHub account.
  3. Step 3 − Set up a New GitHub repository.
  4. Step 4 − Open the folder you wish to push in Visual Studio code.
Nov 1, 2023

How do I run a git code? ›

In order to run any code in a Github repository, you will need to either download it or clone it to your machine. Click the green "clone or download repository" button on the top right of the repository. In order to clone, you will need to have git installed on your computer.

Top Articles
Latest Posts
Article information

Author: Duncan Muller

Last Updated:

Views: 5983

Rating: 4.9 / 5 (59 voted)

Reviews: 90% of readers found this page helpful

Author information

Name: Duncan Muller

Birthday: 1997-01-13

Address: Apt. 505 914 Phillip Crossroad, O'Konborough, NV 62411

Phone: +8555305800947

Job: Construction Agent

Hobby: Shopping, Table tennis, Snowboarding, Rafting, Motor sports, Homebrewing, Taxidermy

Introduction: My name is Duncan Muller, I am a enchanting, good, gentle, modern, tasty, nice, elegant person who loves writing and wants to share my knowledge and understanding with you.