How to add a GitHub repository to VS Code

Learn how to add a GitHub repository to VS Code and how to install a handy extension to handle pull requests and issues.

Image: prima91/Adobe Stock

Virtual Studio Code, also known as VS Code, is one of the most popular integrated development environments (IDEs). It’s free, works with a large number of languages, is easy to use, and offers tons of extensions to make the tool even more useful.

Another reason why VS Code is such a great option is that it both lets you easily work with code from a GitHub repository. Not only can you add a GitHub repository, but you can also better investigate and manage GitHub pull requests and issues with a handy extension, called GitHub Pull Requests and Issues.

First, I’ll show you how to install the extension and log in to your GitHub account. Once done, we will add a GitHub repository to VS Code.

SEE: Recruitment kit: Back-end developer (TechRepublic Premium)

What you will need

The only things you’ll need for this to work are a running instance of VS Code and a GitHub account that you can log into. I’ll be demoing with VS Code on Pop!_OS, so you’ll need to modify the Git install process to match your OS. That’s it. Let’s do this.

How to install Git

The first thing to do is install Git. Installing VS Code doesn’t add Git into the mix, so you have to do it manually.

To install git on an Ubuntu-based distribution, open a terminal window and run the command:

sudo apt-get install git -y

Once the command is complete, you are ready to continue.

How to install the GitHub Pull Requests and Issues extension

Open VS Code and click the gear icon in the lower left corner. In the context menu (Figure A), click Extensions.

Figure A

The VS Code settings menu
Figure A: The VS Code settings menu.

In the resulting window (Figure B), type GitHubthen click Install for GitHub Pull Requests and Issues.

Figure B

Installing the GitHub Pull Requests and Issues extension in VS Code
Figure B: Installing the GitHub Pull Requests and Issues extension in VS Code.

Once installed, you will see a new GitHub icon in the left sidebar of VS Code. Click on this icon and you will see a Connect button (Figure C).

Figure C

Github login in VS Code
Figure C: You must log in to GitHub before you can use the extension.

Click Connect and a pop-up will open telling you that Visual Studio Code wants to connect using GitHub. Click Allow and your default browser will open. If you haven’t signed in to your GitHub account yet, do so. After successful authentication, you will be redirected to VS Code, where you will see that the extension is now connected to your GitHub account and is ready to use (Figure D).

Figure D

Visual Studio Code Editing advanced menu
Figure D: We have successfully connected VS Code to a GitHub account.

How to add a specific GitHub repository to VS Code

Now let’s add a GitHub repository to VS Code. You will want to return to your GitHub account with your default browser and locate the address of the repository you want to add. Once you’ve navigated to the repository in question, click the Code drop-down menu and copy the URL under HTTPS (Figure E).

Figure E

The location of the repository address in GitHub
Figure E: The location of the repository address in GitHub.

Return to VS Code and click the source control icon in the left navigation (third from the top). In the Source Code Control window (Figure F), click Clone Repository.

Figure F

The VS Code Source Control Window
Figure F: The VS Code source control window.

You should now see an address bar at the top of the VS Code window (G-figure).

G-figure

The VS Code source control address bar is where you paste your repository URL
Figure G: The VS Code source control address bar is where you paste your repository URL.

Paste the address of your repository into this address bar and hit enter on your keyboard. You will then be prompted to select a local repository location. To do this, simply locate a directory in the file manager popup window to house the source.

Once you’ve done this, your default web browser will open again, asking you to allow VS Code access to the account. When prompted, click Authorize Visual Studio-Code, which will redirect you to VS Code, where you’ll need to tell the app that you trust the authors (H-figure).

H-figure

Allow trust for repository authors
Figure H: Trust permission for repository authors.

You should then see VS Code Explorer open to show the files found in the repository (I figure).

I figure

The Docker Desktop Tutorial .yml file and README in the Desktop Tutorial folder
Figure I: The .yml file and README file from my Docker Desktop tutorial are here.

Congratulations! You have just connected VD Code to both your GitHub account and a GitHub repository. This exceptional IDE just got even better.

Subscribe to TechRepublic How to make technology work on YouTube for all the latest tech tips for professionals from Jack Wallen.

Comments are closed.