GitHub logo on the screen smartphone and notebook 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.

One other reason why VS Code is such a great option is that it makes it both possible and easy for you 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’m going to first show you how to install the extension and log 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’ll need

The only things you’ll need to make this work are a running instance of VS Code and a GitHub account you can log in to. I’ll be demonstrating with VS Code on Pop!_OS, so you’ll have to alter the Git installation process to match your operating system. That’s it. Let’s do this.

How to install Git

The first thing that must be done is the installation of Git. The installation of VS Code does not add Git into the mix, so you must do it manually.

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

sudo apt-get install git -y

Once the command finishes, you’re ready to continue on.

How to install the GitHub Pull Requests and Issues extension

Open VS Code, and click on the gear icon in the bottom left corner. From the pop-up 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 GitHub, and then 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 the installation is installed, you’ll see a new GitHub icon in the VS Code left sidebar. Click that icon, and you’ll see a Sign In 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 will open informing you Visual Studio Code wants to sign in using GitHub. Click Allow, and your default browser will open. If you’ve not already signed in to your GitHub account, do so. Upon successful authentication, you’ll be redirected back to VS Code, where you’ll see the extension is now connected to your GitHub account and is ready to use (Figure D).

Figure D

Visual Studio Code Editing evolved menu
Figure D: We’ve successfully connected VS Code to a GitHub account.

How to add a specific GitHub repository to VS Code

Now, we’re going to add a GitHub repository to VS Code. You’ll want to go back 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 dropdown, 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.

Go back to VS Code, and click the Source Control icon in the left navigation (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 the URL for your repository.

Paste the address of your repository in that address bar, and hit Enter on your keyboard. You will then be prompted to select a local repository location. For this, just locate a directory in the file manager pop-up to house the source.

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

Figure H

Authorizing trust for the repository authors
Figure H: Authorizing trust for the repository authors.

You should then see the VS Code Explorer open to display 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 are there.

Congratulations! You’ve just connected VD Code to both your GitHub account and a GitHub repository. This outstanding IDE has just been made even more so.

Subscribe to TechRepublic’s How To Make Tech Work on YouTube for all the latest tech advice for business pros from Jack Wallen.