Our Blog

Setting up SSH in Visual Studio Code

By Couragyn Chretien
January 6, 2022

Visual Studio Code is a powerful code editor that can create a customized IDE for your development. VS Code’s default configuration is great for working locally but lacks the functionality to give the same experience for remote SSH development. Enter the extension Remote SSH.

Installation

Installing the Remote SSH extension is really easy! First you access the Extension Marketplace with Ctrl+Shift+X or by clicking View > Extensions in the menu, then you just search for and select Remote - SSH.

Setting up your SSH config file

To configure your connection, you’ll need to add a few lines to your SSH config. Click the green Open a Remote Window icon on the bottom left corner:

Select Open SSH Configuration File... and select the config file you want to use. I use the Linux default, /home/$USER/.ssh/config. Add the Host, HostName, and User as required and save:

Host MySite
  HostName site.endpointdev.com
  User couragyn

Connecting

Click the green Open a Remote Window icon on the bottom left corner, select Connect to Host..., and pick your desired host, in this case MySite. If your public SSH key isn’t on the remote server, you will be prompted to enter a password. If your key is on the server, it will state it has your fingerprint and prompt you to continue.

You’re now connected and can use VS Code’s features like Terminal and Debug Console just like you would locally.

Opening the working directory

Wouldn’t it be nice to have VS Code automatically open to the correct folder once your SSH connection is established? Unfortunately there isn’t a way to set a folder location in the settings yet; you’d need to click Open Folder and navigate to the project root every time you connect.

There is, however, a workaround to make this a bit less tedious:

• Click Open Folder
• Navigate to the project root
• Click File > Save Workplace As...
• Save your .code-workspace file somewhere it won’t be picked up by Git

Now open your workspace again with a new connection. If the workspace was recently used, you can use File > Open Recent > $Workspace.code-workspace; otherwise go to File > Open Workspace... and select your .code-workspace file. This should get you set up right in the correct directory after you’ve connected.

SSH with multiple hops

Sometimes you will need to SSH into one location before tunneling into another. To connect to a remote host through an intermediate jump host, you will need to add ForwardAgent and ProxyJump to the config file, like this:

Host MySite
  HostName site.endpointdev.com
  User couragyn
  ForwardAgent yes

Host SiteThatNeedsToGoThroughMySite
  HostName completely.different.com
  User couragyn
  ProxyJump MySite

Happy remote development!

ssh tips vscode