Visual Studio SSH Client Tutorial

Table Of Contents

• Quick Install
• What is a SSH Client
• VS Code Preparation
• SSH key
• VS Code Configuration
• Using Remote SSH
• Thank You

Quick Installation

For those who are just interested in installing as fast as possible here is the quick guide. If that isn't you, feel free to select What is a SSH Client, to be redirected to the comprehensive guide.

First install Remote-SSH to Visual Studio Code either through this link or searching it in the extensions tab.

Navigate to the .ssh directory in MacOS Terminal or Windows PowerShell :

cd .ssh

If folder is not present create folder using mkdir .ssh or md .ssh

Create your ssh key inside our .ssh folder :

ssh-keygen

Press enter for all three prompts

Send your ssh key to your remote server :

cat ~/.ssh/id_rsa.pub | ssh USERNAME@HOST 'cat >> ~/.ssh/authorized_keys'

This will ask for your password, please enter.

Open VS Code, then open the command palette via the keyboard shortcut below :
MacOS

cmd + shift + p

Windows

ctrl + shift + p 

Search Remote-SSH: Open SSH Configuration File and enter the configuration file. Paste the text below into the file and fill in your information for your user (USER), host (HOST) and a given identification name (REMOTEHOST).

Host REMOTEHOST
    Hostname HOST
    User USER
    IdentityFile ~/.ssh/id_rsa

Save the file with cmd + s or ctrl + s

To run click the >< in the bottommost left of your VS Code Window. Select either Connect to Host or Connect Current Window to Host and select your identification name.

Once connected you are free to use the requested remote server for all of your development needs. You able to use the HOST CLI from the terminal within VS Code or your terminal of choice.

If you reach any road blocks, do not hesitate to reach out to by commenting or contacting me through LinkedIn.

What is a SSH Client?

SSH which is an acronym for Secure Shell, and is a network protocol. The purpose of SSH is to give users the ability to access a remote computer securely over a non-secure network. Using SSH a user or administrator is able to access a remote server safely for use. By default SSH comes installed on Unix, Mac and Linux and is able to be added to Windows easily (tutorial). If you would like to test out using SSH within your command line interface, you can play around with it through Terminal on Mac or Command Prompt on windows. Try out these commands to learn how it can work from the command line.

Open the SSH manual

man ssh

Connect to a remote server

ssh bandit0@bandit.labs.overthewire.org -p 2220

disclaimer:
the server you are connecting to is provided by OverTheWire and is intended for educational purposes relating to Cyber Security. For the purposes of this tutorial it shows you a example of how to log into a server using ssh as a command

Now that we are briefly aware of what SSH is and what it is used for lets tackle the idea of a SSH Client. In fact what we have completed above is an SSH Client, using OpenSSH through the terminal. A SSH Client is any software/application that allows the user to connect to a remote server. For ease of use, a lot of administrators or developers choose to use SSH Clients that offer a GUI instead of purely CLI based connections. Some popular SSH Clients include:

• MobaXTerm
• BitVise
• puTTY
• WINscp
• etc.

Now although these clients do have perks and are completely viable options for most use cases, in my opinion they were a bit clunky to develop with. The main issue I saw with using a client above is that you are limited to the tools that are local to that server if you are not an administrator of that server. For example, your Text Editors will stay nano or Vim which for most Computer Science Students can be a pain to start on. Also, as I progressed in my CS coursework I noticed several projects being easier to work locally on my VS Code setup than running on the remote server.

This should be a comprehensive guide to help you set up Visual Studio Code as your client manager for any remote connectivity needs. If you have any questions please reach out to my contact information that is located both above and below. If this is helpful to you please consider showing this article some love and sharing it! Cheers!

Visual Studio Code Setup

As we will be using VS Code as our preferred way to SSH to our host, the first thing we need to do is install it to our local machine. Please click here to be redirected to the VS Code download page. From here select the correct download for the current operating system on your device (Windows, MacOS, or Linux).

Assuming this is your first time using VS Code consider taking the time to check out my other guide on it's configuration and uses.

To make sure we are set up to connect to our remote server we will be using one extension to assist us with that process. To download our needed extension, either click Remote - SSH or open your extensions tab in VS Code and type "Remote - SSH" in. Proceed to download the extension to your machine!

For the time being we are all ready for our next steps!

Setting Up SSH keys

Our next step will be setting up a SSH key from our machine to your remote server so we no longer need to log in using our password. This gives VS Code the ability to open up your session directly.

Below I will have both MacOS and Windows commands detailed, as those are what I am familiar with. If you are running linux I assume that the commands used within our MacOS instruction will work as we are using very basic commands that they both share. To use the commands below in MacOS please use terminal, while if you are using Windows please use PowerShell.

Commands

cd .ssh
ssh-keygen
cat ~/.ssh/id_rsa.pub | ssh USERNAME@HOST 'cat >> ~/.ssh/authorized_keys'

Details and Instructions

Note, that we redirecting into the .ssh folder to create a ssh key. By default not all Operating System's have this folder, if you run into an error when entering the folder run ls -a on MacOS terminal and dir -Force in Windows PowerShell to show hidden/dot folders. If it is not shown, run mkdir .ssh on MacOS and md .ssh on Windows to create the folder.

When you run ssh-keygen you will be asked 3 questions regarding configuration of your key. For our purposes, hit enter for each prompt. Congrats you have successfully created your key.

Next we will want to give your SSH key to the remote server so that they can identify what computer is logging it. This will bypass your login going forward.

For this to occur we need to run two commands within our terminal, specifically from our .ssh directory. For ease of use I have piped the two commands together as they are shown below:

cat ~/.ssh/id_rsa.pub | ssh USERNAME@HOST 'cat >> ~/.ssh/authorized_keys'

If all is well, after this is ran with your username it will ask for your password to access our server. Enter your password for the host and the key will be able to be sent to your servers .ssh folder.

To test if this is working properly, you can attempt to login to your host through your Terminal or PowerShell (command below). If it doesn't ask for your passcode and immediately log in you are good!

ssh USERNAME@HOST

Finalizing Visual Studio Code

Now that we have our full setup your SSH key VS Code will be able to log directly into your remote server to act as a SSH Client. For the next steps we need to configure your host settings so Visual Studio Code knows where we are logging into.

For this part, open visual studio and run the command cmd + shift + p or ctrl + shift + p. For those familiar with VS Code they will know this allows us to search any command or setting within the Editor. Then we want to search "Remote-SSH: Open SSH Configuration File" and select this command. It will then ask you for the location of your config file to which I would recommend going with the defaulted directory in your recommended options.

Click on the desired directory and you will be taken to the configuration file for the Remote-SSH Extension. Below I will showcase what to paste into the file, but be sure to replace the USER and HOST with your information. In the first line, you are able to name your Remote Host whatever you would like. If you don't care to rename it I have labeled it REMOTEHOST. Once done with this, hit cmd + s or ctrl + s to save your config file. You are now free to exit this file.

Host REMOTEHOST
    Hostname HOST
    User USER
    IdentityFile ~/.ssh/id_rsa

Using VS Code as SSH Client

Now to use VS Code as your client, you need to run Remote SSH and select the name of your host from your list of hosts. To do this please click the >< in the bottom left of your window on visual studio code. To enter your remote connection please select either 'Connect to Host' or 'Connect Current Window to Host' then select REMOTEHOST or your given server name. This will open up your connection to the server, and give you the option to select which folders you would like to see when it is established. Dont be concerned if the first time takes a minute to connect as this is normal.

Once connected you are free to use the requested remote server for all of your development needs. You able to use the HOST from the terminal within VS Code or your terminal of choice.

Thank You for Reading

If you reach any road blocks, do not hesitate to reach out to by commenting or contacting me through LinkedIn.

Happy Coding! 👋