Learn how to add a GitHub repository to VS Code and how to install a handy extension to manage issues and pull requests.
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 a lot of extensions to make the tool even more useful.
Another reason why VS Code is a great choice is that it makes working with code from GitHub repositories easy and feasible. Not only can you add GitHub repositories, but you can also better review and manage GitHub pull requests and issues with a handy extension, called GitHub Pull Request and Issues.
First I will show you how to install the extension and log in to your GitHub account. Once done, we will add the GitHub repository to VS Code.
UNDERSTAND: Recruitment Toolkit: Back-end Developer (TechRepublic Premium)
What you need
The only things you need to make this work is a running instance of VS Code and a GitHub account that you can log in to. I’ll be demonstrating with VS Code on Pop! _OS, so you’ll have to change the Git installation process to match your operating system. 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 to the mix, so you have to do it manually.
To install git on an Ubuntu-based distro, open a command line window and issue the command:
sudo apt-get install git -y
After the command is finished, you are ready to continue.
How to install GitHub Pull Requests and Issues extension
Open VS Code and click the gear icon in the bottom left corner. From the pop-up menu (Picture A), click Extensions.
Picture A
In the resulting window (Figure BUG), type GitHuband then click Settings for GitHub pull requests and issues.
Figure BUG
Once it’s installed, you’ll see a new GitHub icon in the left sidebar of VS Code. Click on that icon and you should see a Sign In button (SIZE).
SIZE
Click Sign In and a pop-up will open informing you Visual Studio Code wants to sign in with GitHub. Click Allow and your default browser will open. If you are not signed in to your GitHub account, do so. After successful authentication you will be redirected back to VS Code where you will see the extension is now connected to your GitHub account and ready to use (Visualization).
Visualization
How to add a specific GitHub repository to VS Code
Now, we will add a GitHub repository to VS Code. You’ll want to go back to your GitHub account using your default browser and find 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 in HTTPS (Figure E).
Figure E
Go back to VS Code and click on the Source Control icon in the left navigation (third from the top). In the Source Control window (Figure F), click Clone Repository.
Figure F
You should now see an address bar at the top of the VS Code window (WOOD Figure).
WOOD Figure
Paste your repository address into that address bar and press Enter on your keyboard. You will then be prompted to choose a local repository location. For this, just find a folder in the file manager popup to contain the source.
Once you’ve done that, your default web browser will reopen, asking you to grant VS Code access to the account. When prompted, click Authorize Visual Studio-Code, which will direct you back to VS Code, where you must tell the application that you trust the authors (Family picture).
Family picture
You will then see VS Code Explorer open to show the files found in the archive (Figure I).
Figure I
Congratulations! You have just connected VD Code to both your GitHub account and the GitHub repository. This outstanding IDE has just been made even more so.
Subscribe to TechRepublic’s How to make technology work on YouTube for all the latest tech advice for business professionals from Jack Wallen.
