close
close

How to add a GitHub repository to VS Code

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

GitHub logo on smartphone and laptop screen closeup.  GitHub is the largest web service for hosting and developing IT projects.  Moscow, Russia - July 12, 2020
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 VS Code is a great option is that it makes it possible and easy to work with code from a GitHub repository. Not only can you add a GitHub repository, but you can also better review and manage GitHub pull requests and issues with a handy extension, called GitHub Pull Requests and Issues.

I’ll first show you how to install the extension and sign in to your GitHub account. Once that’s done, we’ll add a GitHub repository to VS Code.

SEE: Hiring Kit: Back-End Developer (TechRepublic Premium)

what you will need

The only things you’ll need for this to work is a running instance of VS Code and a GitHub account that you can log in to. 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 is all. let’s do it

How to install Git

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

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

sudo apt-get install git -y

Once the command completes, 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 bottom left corner. From the popup 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), write GitHuband then click Install for pull requests and GitHub 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 the setup is installed, you will see a new GitHub icon in the left sidebar of VS Code. Click on that icon and you will see a Login button (Figure C).

Figure C

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

Click Sign In and a pop-up window will open informing you that Visual Studio Code wants to sign in with GitHub. Click Allow and your default browser will open. If you’re not already signed in to your GitHub account, please do so. After successful authentication, you’ll be redirected back to VS Code, where you’ll see that the extension is now connected to your GitHub account and ready to use (Figure D).

Figure D

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

How to add a specific GitHub repository to VS Code

Now, we will add a GitHub repository to VS Code. You’ll need to go back to your GitHub account using your default browser and locate the repository address you want to add. Once you’ve navigated to the repository in question, click the Code dropdown menu and copy the HTTPS URL (Figure E).

Figure E

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

Go back to VS Code and click the source code control icon in the left navigation menu (third from the top). In the source 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 (Figure G).

Figure G

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

Paste your repository address into that address bar and press Enter on your keyboard. You will then be prompted to select a local repository location. For this, simply locate a directory in the file manager popup window to host the source.

Once you’ve done that, your default web browser will open again and ask you to authorize VS Code access to the account. When prompted, click Authorize Visual Studio-Code, which will take you back to VS Code, where you need to tell the app that you trust the authors (Figure H).

Figure H

Trusted authorization for repository authors
Figure H: Trust authorization for repository authors.

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

figure i

The Docker Desktop Tutorial .yml file and README in the Desktop Tutorial folder
Figure I: My Docker Desktop tutorial .yml file and README file are there.

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

Subscribe to TechRepublic’s How To Make Tech Work on YouTube to get the latest tech tips for business professionals from Jack Wallen.

Leave a Comment