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.
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.
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
- Have one Linux box where you can clone the github repo
- Install git on this Linux Client
- Generate SSH key Pair on the Linux Client which will be used to access GitHub account
- Create GitHub account
- Copy public key from step 3 above to your profile on GitHub
- Create New GitHub repo which wish to work using VSC
- Clone the repo on Linux Client
- Install Visual Studio Code on local Windows Workstation
- Install Remote SSH Extension
- Connect to Linux Client where github repo is cloned using remote SSH
- Navigate to your folder where github repo is cloned
- Open terminal in VSC and start managing GitHub repo using Visual Studio Code and Remote SSH
Pre-requisites
This article assumes that
- You already have a Linux client
- This Linux client has repo access to install git and remotely connect to GitHub
- 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
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
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.
$ 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"
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
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.
$ eval "$(ssh-agent -s)" $ ssh-add ~/.ssh/id_ed25519
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
Head over to GitHub -> Settings -> SSH and GPG Keys, then set the SSH Title and paste the copied public Key.
Click on Add SSH key.
To confirm successful SSH to GitHub, return to the terminal and run this command
$ ssh -T git@github.com
GitHub greets us with a success message.
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.
Step5: Clone GitHub repo to Linux Client
Grab its SSH URL and clone it.
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.
Configure the extension by navigating to View -> Command Palette -> Remote-SSH: Open Configuration File.
On prompt to select configuration file to update, pick the first option.
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.
Choose the Hostname -> Continue -> Enter Password.
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.
Once the Visual Studio Code remote SSH with GitHub setup is complete, the bottommost left corner of the screen shows the SSH's destination.
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.
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.
Add a commit message on the input box and click on the tick above the box.
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.
Visual Studio code asks if we want to push the changes to the remote repo's main branch.
Click OK, then confirm the update on 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.
