How to set up Visual Studio Code Remote SSH with GitHub

Setting up Visual Studio Code remote SSH with GitHub for development can be tedious. However, everything can be up and running in a few minutes by following a no-nonsense guide.

All you need are git, GitHub account, Visual Studio Code, and a remote development extension then set up a server and configure SSH.

Advertisement

This tutorial uses Debian 11 on Oracle VM VirtualBox as a server. We will do most of the installations from scratch before practising fundamental git workflow. What is more? Let's get started.

 

Terms to understand before setting up Visual Studio Code Remote SSH with GitHub

It would be best to have a brief understanding of the tools needed to set up Visual Studio Code remote SSH with GitHub. These are Visual Studio Code, SSH, Git, and GitHub.

 

Visual Studio Code

Visual Studio Code is a code editor made by Microsoft. It is one of the top code editors that developers love because of its rich features.

For example, we will use its Remote SSH extension to set up Visual Studio Code remote SSH with GitHub. Besides, you may use the Remote Development extension with other tools besides Remote SSH.

 

SSH

SSH (secure shell), also referred to as OpenSSH or remote SSH, is a network protocol that enables a safe connection to a computer on another network.

The level of security of SSH depends on the algorithm used. The most typical SSH encryption algorithms are RSA, DSA, EdDSA, and ECDSA. GitHub's authorized SSH key types are RSA and EdDSA.

Advertisement

 

Git and GitHub

Git is an efficient tool to track cumulative changes on a file. Its efficiency results from using it offline and having a copy of the project in your machine. To boost the safety and availability of your tracked files, you can push the changes to a cloud server like GitHub.

GitHub ensures your remote files are safe through two-factor authentication (2FA), Personal Access Tokens, or SSH and GPG Keys.

Now that you know what it takes to set up Visual Studio Code remote SSH with GitHub, let's jump to the installations and configurations.

 

How does this work?

The flow of this article would be

  1. Have one Linux box where you can clone the github repo
  2. Install git on this Linux Client
  3. Generate SSH key Pair on the Linux Client which will be used to access GitHub account
  4. Create GitHub account
  5. Copy public key from step 3 above to your profile on GitHub
  6. Create New GitHub repo which wish to work using VSC
  7. Clone the repo on Linux Client
  8. Install Visual Studio Code on local Windows Workstation
  9. Install Remote SSH Extension
  10. Connect to Linux Client where github repo is cloned using remote SSH
  11. Navigate to your folder where github repo is cloned
  12. Open terminal in VSC and start managing GitHub repo using Visual Studio Code and Remote SSH

 

Pre-requisites

This article assumes that

  1. You already have a Linux client
  2. This Linux client has repo access to install git and remotely connect to GitHub
  3. You already have an account with GitHub

 

Why can’t we directly connect Visual Studio Code with GitHub?

This is a valid question and most user would prefer to do the same but in many corporate organization, the provided Linux box are only allowed to connect to GitHub/GitLab and we may have some firewall related limitations. So we can use Visual Studio Code to connect to this Linux client and work on our GitHub/GitLab repo

Advertisement

 

Set up Visual Studio Code Remote SSH with GitHub in four straightforward steps

Step1: Install and configure git

I am on my terminal. I run these commands to install git.

$ sudo apt update

$ sudo apt install git

How to set up Visual Studio Code Remote SSH with GitHub

Next, configure your default username, and email. The username and email will be crucial when committing changes after setting up Visual Studio Code remote SSH with GitHub.

$ git config --global user.name <your username>

$ git config --global user.email <your email>

I am setting my details as follows:

$ git config --global user.name Stevealila

$ git config --global user.email stevealila25@gmail.com

 

Step2: Generate SSH key pair

Check if SSH client is installed on your server in the /usr/bin/ssh file (We should say folder but remember everything in Linux is a file).

$ which ssh

Before generating SSH keys to set up Visual Studio Code remote SSH with GitHub, create a GitHub account and log into it.

Next, generate the SSH key pair.

Advertisement
$ ssh-keygen -t ed25519 -C "your_email@example.com"

by using your email address as the comment.

$ ssh-keygen -t ed25519 -C "stevealila25@gmail.com"

How to set up Visual Studio Code Remote SSH with GitHub

where -t specifies SSH type, and -C symbolizes the comment.

Set up RSA SSH key pair type of 4096 bits if your OpenSSH version is below 6.5 or your GnuPG is below version 2.1. You can check both versions using these commands:

$ ssh -V
$ gpg --version

How to set up Visual Studio Code Remote SSH with GitHub

If your server meets the above criteria but still cannot use EdDSA encryption, use 4096-bit RSA.

$ ssh-keygen -t rsa -b 4096 -C "stevealila25@gmail.com"

where -b symbolizes bits.

 

Step3: Setup SSH access between client and GitHub

Launch ssh-agent in the background and add the private keys to it.

Advertisement
 $ eval "$(ssh-agent -s)"

$ ssh-add ~/.ssh/id_ed25519

4. Better than Intro you can just add a summary of all the different methods which can be used. Example: https://www.golinuxcloud.com/compare-characters-in-java/#Different_methods_to_compare_char_in_Java

Use

$ ssh-add ~/.ssh/id_rsa

if you encrypted SSH key pair with 4096-bit RSA.

View and copy the SSH key pair's public part on your terminal as follows.

$ cat ~/.ssh/id_ed25519.pub

4. Better than Intro you can just add a summary of all the different methods which can be used. Example: https://www.golinuxcloud.com/compare-characters-in-java/#Different_methods_to_compare_char_in_Java

Head over to GitHub -> Settings -> SSH and GPG Keys, then set the SSH Title and paste the copied public Key.

4. Better than Intro you can just add a summary of all the different methods which can be used. Example: https://www.golinuxcloud.com/compare-characters-in-java/#Different_methods_to_compare_char_in_Java

Click on Add SSH key.

To confirm successful SSH to GitHub, return to the terminal and run this command

Advertisement
$ ssh -T git@github.com

GitHub greets us with a success message.

4. Better than Intro you can just add a summary of all the different methods which can be used. Example: https://www.golinuxcloud.com/compare-characters-in-java/#Different_methods_to_compare_char_in_Java

 

Step4: Create new GitHub repository (Optional)

We can now create a GitHub repo and clone it via SSH. I am creating one called remote_ssh. You can skip this step if you already have a GitHub repo.

4. Better than Intro you can just add a summary of all the different methods which can be used. Example: https://www.golinuxcloud.com/compare-characters-in-java/#Different_methods_to_compare_char_in_Java

 

Step5: Clone GitHub repo to Linux Client

Grab its SSH URL and clone it.

4. Better than Intro you can just add a summary of all the different methods which can be used. Example: https://www.golinuxcloud.com/compare-characters-in-java/#Different_methods_to_compare_char_in_Java

Now is the time to enter the final step for setting up Visual Studio Code remote SSH with GitHub: Install and configure Visual Studio Code.

 

Step6: Install Visual Studio Code

You can follow official documentation to get the steps to install Visual Studio Code based on your distribution

 

Step7: Install Remote SSH extension to use Visual Studio Code remote SSH with GitHub

Install Remote SSH extension.

Advertisement

4. Better than Intro you can just add a summary of all the different methods which can be used. Example: https://www.golinuxcloud.com/compare-characters-in-java/#Different_methods_to_compare_char_in_Java

 

Configure the extension by navigating to View -> Command Palette -> Remote-SSH: Open Configuration File.

visual studio code remote ssh with github

 

On prompt to select configuration file to update, pick the first option.

How to set up Visual Studio Code Remote SSH with GitHub

Enter details of your server. The Host can be any name that comes to your mind. The Hostname can be your server's IP address or the machine's name. The User is the current user logged into the server.

Append another line called IdentityFile and attach your private SSH key's destination to it. Depending on your server configuration, you may need to append the port number.

Save the file.

Connect the host by revisiting the Command Palette as follows: View -> Command Palette -> Remote-SSH: Connect Current Window to Host.

How to set up Visual Studio Code Remote SSH with GitHub

 

Choose the Hostname -> Continue -> Enter Password.

How to set up Visual Studio Code Remote SSH with GitHub

 

And let the Visual Studio Code remote SSH with GitHub run to completion automatically. You can check the progress from the bottommost part of Visual Studio Code's screen.

How to set up Visual Studio Code Remote SSH with GitHub

 

Once the Visual Studio Code remote SSH with GitHub setup is complete, the bottommost left corner of the screen shows the SSH's destination.

How to set up Visual Studio Code Remote SSH with GitHub

 

If you click on Open Folder, you see all your folders under the currently signed-in user. You can navigate to the folder where the remote_ssh repo is cloned.

How to set up Visual Studio Code Remote SSH with GitHub

Now you can manage your server from Visual Studio code!

 

Practice Time

Let us create HTML file.

Click on the Source Control and the plus + sign on the file to stage it.

How to set up Visual Studio Code Remote SSH with GitHub

Add a commit message on the input box and click on the tick above the box.

How to set up Visual Studio Code Remote SSH with GitHub

Click on either

Sync Changes

or

Cycling arrows next to the main branch at the bottommost left corner of the page

to push the changes.

4. Better than Intro you can just add a summary of all the different methods which can be used. Example: https://www.golinuxcloud.com/compare-characters-in-java/#Different_methods_to_compare_char_in_Java

 

Visual Studio code asks if we want to push the changes to the remote repo's main branch.

How to set up Visual Studio Code Remote SSH with GitHub

 

Click OK, then confirm the update on GitHub.

How to set up Visual Studio Code Remote SSH with GitHub

And voila, our changes are on GitHub thanks to setting up Visual Studio Code remote SSH with GitHub!

 

Conclusion

Now that you have set up Visual Studio Code remote SSH with GitHub, you can go ahead and enjoy your development using Visual Studio Code.

Categories GIT

Didn't find what you were looking for? Perform a quick search across GoLinuxCloud

If my articles on GoLinuxCloud has helped you, kindly consider buying me a coffee as a token of appreciation.

Buy GoLinuxCloud a Coffee

For any other feedbacks or questions you can either use the comments section or contact me form.

Thank You for your support!!

Leave a Comment

X