How to Add GitHub to Visual Studio Code?

Visual Studio Code (VS Code) is a popular, lightweight, and feature-rich editor that offers built-in support for Git, including seamless integration with GitHub. With GitHub connected to VS Code, you can easily manage repositories, make commits, push and pull changes, and collaborate with your team—all from within the editor. This blog post will walk you through the steps to integrate GitHub with VS Code and make the most of its powerful features.

Prerequisites

Before we begin, make sure you have:

1. Visual Studio Code: Download and install VS Code if you haven’t already.
2. Git: Download and install Git if it’s not installed on your system.
3. GitHub Account: Sign up for a GitHub account if you don’t already have one.

Step 1: Verify Git Installation

To verify that Git is installed, open a terminal and run:

git --version

If Git is installed correctly, you’ll see the version number displayed. If not, make sure you follow the installation steps for your operating system and add Git to your system path.

Step 2: Install the GitHub Extension for Visual Studio Code

To enable seamless GitHub integration with VS Code, install the GitHub Pull Requests and Issues extension. This extension lets you create and manage GitHub pull requests and issues within the editor.

1. Open VS Code and go to the Extensions view (click on the square icon in the Activity Bar on the left or press Ctrl+Shift+X).
2. Search for GitHub Pull Requests and Issues.
3. Click Install to add the extension to VS Code.

Step 3: Sign In to GitHub from VS Code

Once you’ve installed the GitHub extension, sign in to your GitHub account from within VS Code.

1. Open the Command Palette by pressing Ctrl+Shift+P (or Cmd+Shift+P on Mac).
2. Type GitHub: Sign In and select the GitHub: Sign In command from the dropdown.
3. VS Code will prompt you to sign in using either your browser or device code. Select your preferred option.

• If you choose Sign in with Browser, VS Code will open a new browser window. Log in to GitHub and grant access to VS Code when prompted.
• If you choose Sign in with Device Code, follow the instructions to enter the provided code on GitHub’s device code page.

After signing in, VS Code will authenticate your GitHub account, and you’ll see a confirmation in the lower right corner of the editor.

Step 4: Clone a GitHub Repository in VS Code

Once signed in, you can start working on your GitHub repositories directly from VS Code.

Option 1: Clone from the Source Control View

1. Click the Source Control icon in the Activity Bar on the left (the icon that looks like a branch).
2. Click Clone Repository.
3. Enter the URL of the GitHub repository you want to clone (or select from your list of repositories if authenticated).
4. Select a local folder to store the repository.

VS Code will automatically download the repository and open it in the editor.

Option 2: Clone from the Command Palette

1. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on Mac).
2. Type Git: Clone and select the Git: Clone command.
3. Enter the repository URL or select from your list of GitHub repositories.
4. Choose a local folder for the repository.

Once cloned, you’ll have the full repository available in VS Code.

Step 5: Push a New Project to GitHub

If you have an existing project that isn’t yet tracked by GitHub, you can push it to GitHub from VS Code:

1. Open the project folder in VS Code.
2. Go to the Source Control view and click Initialize Repository.
3. Go to the Command Palette and type Publish to GitHub.
4. Select Publish to GitHub and choose whether you want the repository to be public or private.

VS Code will create the repository on GitHub and push your local files to it.

Step 6: Basic Git and GitHub Operations in VS Code

With GitHub connected, you can perform essential Git and GitHub operations directly from VS Code.

1. Stage Changes

When you make changes to your files, VS Code will display them in the Source Control view under Changes. Click the + icon next to each file to stage it, or use the + icon in the header to stage all files.

2. Commit Changes

To commit your changes:

1. Enter a commit message in the text box at the top of the Source Control view.
2. Click the checkmark Commit icon to commit your staged changes.

3. Push and Pull Changes

To sync your changes with GitHub:

• Push: Go to the Source Control view, click on the … menu, and select Push. This will upload your local commits to the GitHub repository.
• Pull: To retrieve the latest changes from the GitHub repository, select Pull from the … menu.

You can also use the git pull and git push commands directly in the terminal if you prefer.

Step 7: Working with GitHub Pull Requests and Issues

The GitHub Pull Requests and Issues extension makes it easy to manage pull requests and issues within VS Code. Here’s how to get started:

1. Open the Command Palette and type GitHub: Create Pull Request.
2. Follow the prompts to select the branch and repository for your pull request.
3. Enter a title and description for the pull request and click Create.

To view existing pull requests, go to the Source Control view and click GitHub Pull Requests. You can review, comment, and even approve pull requests from within VS Code.

For issues, you can browse and create GitHub issues right in VS Code:

1. Open the Command Palette and type GitHub: Create Issue.
2. Fill in the details for the issue, and it will be created in the GitHub repository.

Step 8: Configuring SSH for GitHub (Optional)

Using SSH keys can streamline your workflow by reducing the need to enter credentials every time you push or pull. Here’s how to set it up:

1. Open a terminal and generate an SSH key pair:

   ssh-keygen -t ed25519 -C "[email protected]"

2. After generating the key, display the public key with:

   cat ~/.ssh/id_ed25519.pub

3. Copy the output and go to your GitHub account settings.
4. In Settings > SSH and GPG keys, click New SSH key, paste the key, and save it.

When working with repositories, use the SSH URL instead of the HTTPS URL to clone and interact with the repository.

Troubleshooting GitHub Integration in VS Code

If you encounter any issues with GitHub integration, here are a few tips to troubleshoot:

• Git Not Detected: If Git isn’t detected, make sure it’s correctly installed and added to your system path. You may need to restart VS Code after installation.
• Authentication Issues: If you encounter frequent authentication prompts, consider using SSH keys instead of HTTPS.
• Extension Conflicts: Disable any Git-related extensions that may be causing conflicts with the GitHub Pull Requests and Issues extension.

Summary

Adding GitHub to Visual Studio Code enhances your workflow by enabling seamless version control, code collaboration, and project management within one environment.

Key Steps Recap:

1. Install GitHub Extension: Install the GitHub Pull Requests and Issues extension.
2. Sign In to GitHub: Use the Command Palette to sign in to your GitHub account.
3. Clone or Push Repositories: Easily clone repositories or publish local projects to GitHub.
4. Work with Pull Requests and Issues: Create and manage pull requests and issues from within VS Code.

By integrating GitHub with VS Code, you’ll have powerful tools for version control and collaboration right at your fingertips.