How to Use Git in Visual Studio Code?

Git is a powerful version control system that allows developers to track changes in their code, collaborate with teammates, and maintain a history of project versions. Visual Studio Code (VS Code), one of the most popular code editors today, provides excellent support for Git integration right out of the box.

In this blog, we’ll walk through the essentials of using Git in Visual Studio Code, from basic setup to advanced features, to help you streamline your workflow and make the most of both tools.

1. Setting Up Git in Visual Studio Code

Before you can start using Git in Visual Studio Code, you need to ensure Git is installed on your machine. Here’s how to set it up:

Step 1: Install Git

If you don’t have Git installed, download it from Git’s official website. The installation is straightforward; just follow the default options for your operating system.

Step 2: Configure Git

Once installed, open a terminal and configure your Git settings, specifically your username and email, which are important for commits. Run the following commands:

git config --global user.name "Your Name"
git config --global user.email "[email protected]"

Step 3: Install Visual Studio Code

If you haven’t already, download and install Visual Studio Code. VS Code automatically detects Git if it is properly installed on your system.

Step 4: Verify Git in VS Code

To check if Git is integrated with Visual Studio Code, open the terminal within VS Code (View > Terminal or Ctrl +) and type:

git --version

If Git is installed and configured properly, this command will return the Git version.

2. Initializing a Git Repository

Once you have Git set up, the next step is to either initialize a new repository or clone an existing one.

Initialize a New Repository

If you’re starting a new project, you can initialize a Git repository directly from VS Code:

1. Open the folder or workspace where you want to start your project in VS Code.
2. Open the Source Control panel by clicking on the Source Control icon in the left sidebar, or use the shortcut Ctrl+Shift+G.
3. You’ll see an option that says “Initialize Repository”. Click it to initialize a Git repository in your project folder.

Alternatively, you can run the following command in the terminal:

git init

This will create a .git folder in your project, marking it as a Git repository.

Clone an Existing Repository

If you want to work on an existing project, you can clone a remote repository:

1. Open VS Code and go to View > Command Palette (Ctrl+Shift+P).
2. Type “Git: Clone” and select it.
3. Enter the URL of the repository you want to clone (e.g., from GitHub, GitLab, etc.).
4. Select the destination folder, and VS Code will clone the repository and open it in a new window.

3. Staging, Committing, and Pushing Changes

With Git initialized or a repository cloned, let’s take a look at the workflow for staging, committing, and pushing changes.

Staging Changes

The Source Control panel shows you a list of modified files under Changes. You can stage files by clicking the + icon next to each file or by selecting Stage All Changes to stage everything at once.

Alternatively, you can stage changes via the terminal using:

git add <file>   # To stage a specific file
git add .        # To stage all changes

Committing Changes

Once the changes are staged, you can commit them with a message that describes what has changed. In the Source Control panel:

1. Enter your commit message in the text box at the top.
2. Click the checkmark icon to commit the changes.

Or, via the terminal:

git commit -m "Your commit message"

Pushing Changes to a Remote Repository

After committing your changes locally, the next step is to push them to a remote repository like GitHub, GitLab, or Bitbucket. In VS Code:

1. Click the … (ellipsis) in the Source Control panel.
2. Select Push to send your changes to the remote repository.

Alternatively, use the terminal:

git push origin main   # Replace 'main' with the appropriate branch name if different

4. Working with Branches

Branches allow you to work on different features or fixes in isolation, without affecting the main project. Here’s how to manage branches in Visual Studio Code.

Creating a New Branch

To create a new branch in VS Code:

1. Click on the branch name at the bottom left of the VS Code window (it will likely say “main” if you haven’t switched branches).
2. Select Create New Branch, give it a name, and press Enter.

Alternatively, you can use the terminal:

git checkout -b new-branch-name

Switching Between Branches

To switch between branches in VS Code, simply click the current branch name in the bottom left corner and select a different branch. You can also switch branches using:

git checkout branch-name

Merging Branches

After completing work on a branch, you can merge it into another branch. In VS Code:

1. Switch to the branch you want to merge into (e.g., main).
2. Open the Command Palette (Ctrl+Shift+P), type Git: Merge Branch, and select the branch you want to merge from.

In the terminal:

git checkout main     # Switch to the branch you want to merge into
git merge feature-branch    # Replace with the branch you want to merge

Deleting Branches

Once a branch is merged, you might want to delete it to keep things tidy. In VS Code:

1. Click on the branch name at the bottom left.
2. Choose Delete Branch.

In the terminal:

git branch -d branch-name

5. Resolving Merge Conflicts

Merge conflicts occur when changes made in different branches conflict with each other. VS Code provides an excellent interface for resolving conflicts:

1. When you attempt a merge and there’s a conflict, VS Code will highlight the conflicting files.
2. Open the file, and you’ll see both versions (current and incoming) clearly marked.
3. Choose which changes to keep, either by accepting the current change, the incoming change, or both.
4. After resolving the conflict, stage and commit the changes.

6. Visualizing the Commit History

VS Code offers a built-in Git History extension for visualizing your project’s commit history. To install it:

1. Go to the Extensions panel (or press Ctrl+Shift+X).
2. Search for Git History and click Install.

This extension lets you see your Git history, including detailed commit logs, diffs, and more, all within the VS Code interface.

Conclusion

Git and Visual Studio Code make a powerful combination for managing and collaborating on code. By using the Git integration in VS Code, you can streamline your development workflow, collaborate more effectively with teammates, and ensure a clean history of your codebase. Whether you’re a beginner or an experienced developer, mastering Git in Visual Studio Code will undoubtedly enhance your productivity and version control skills.