Connected SSH Folder Via Remote SSh Extension in VS Code

How to connect visual studio code on server via ssh from Windows MacOS or Linux

This Post We will cover how to connect Visual studio code on server remote folders via ssh for code editing. Microsoft Visual Studio Code is One of the best Text Editor / IDE for Code writing, supports text highlighting working on MAC, Linux, and windows. Extension theme support and open source. 

See My configuration settings on the VS Code. https://anishmandal.in/2017/11/my-visual-studio-code-settings/

My Extension was created for Code-igniter for VS Code. https://anishmandal.in/2017/11/ci-snippets2-for-visual-studio-code/

Requirements

In Windows Open SSH required to follow my this post for installation
https://anishmandal.in/2019/11/how-to-use-public-private-key-on-windows-using-putty-or-git-bash/

Installation of Remote SSH Extension

Install remote ssh by visiting extension pane (Windows/Linux = Ctrl+Shift+x) (MacOS Command+Shift+x) search “Remote-SSH” click install

Remote -SSH Extension installation in VS Code

Adding SSH Host

Open Command Palette from View menu or by using Keyboard shortcut

#Windows/Linux
Ctrl+Shift+x

#MacOS 
Command+Shift+x

Type “ssh-” will show all available options for remote ssh extension

Select Add New SSH HOST.

Adding New SSH Host in VS Code

The command prompt will ask to enter the ssh username@ip or hostname.

For this demo to secure IP I have added the IP address in my host file pointing “myremote.local” and trying to connect as “root” user so the command will be

ssh [email protected]
Connect SSH Host via command

Next command asking where the config file needs to save.

The best option is to save in the User home folder. So we can edit or update files and keys easily.

On windows its shows full path “C:\Users\UserName\.ssh\config

On Mac/Linux “/home/UserName/.ssh/config” or “~/.ssh/config

.ssh is hidden folder and config is the file where all ssh connections details will be stored for easy access.

VS Code Remote SSH Config File Location

After Successfully adding host details right side of bottom the prompt shows to connect click.

VS Code Connect added SSH Host

The default ssh connection behavior will ask to enter the password of the user type password.

Remote SSH Extension entering Password

The first time connection will show ECDSA key fingerprint select “continue

Remote SSH Adding Host EDSA Confermation

It will ask to enter the password again.

Remote SSH Extension entering Password for VS setting installation

After a successful connection, Left Pane will show Massage “Connected to SSH:”.

Connected SSH Server Via Remote SSH Extension

To open remote folders click on the open folder it will open command where we can browse the directory of a remote server and select folder after selecting folder click on OK

Remote SSH Browsing Folder to Open in VS Code

Once its connected any file from that folder can be opened for edition same in the left corner we can see it show status.

Opening Files and Checking Status in VScode over SSH

As an, there is second way also to add a host from “Remote explorer

Reconnecting added SSH Hosts.

On Left Pane side we can select “Remote Explorer” by opening it we can see all added SSH host in List

Managing SSH Host from Remote SSH Extension

Right-Clicking on Folder or Host we can click to connect I will prompt password and connect the Host.

Password Less SSH Access.

As default security, the password is complex and long 16 to 20 digit or the server is configured for keyless authentication. Which is sometimes hard to remember or not convenient to type every time.

To simplify the re-connection or password typing we can add Public-Private key-based authentication.

To follow along with windows Please refer to the Adding ssh post mentioned in Requirements to generate Keys. The same command “ssh-keygen” can be used in Mac or Linux to generate Key Pair once it’s completed follow along.

Copy public key to the remote server by using a command

ssh-copy-id username@IPAddressorHostName

It will prompt user password one time to update the authentication file in the remote host and prompt back the key was added successfully.

Adding Public Key on Remote Server via SSH

Before making any changes in the VS Code config file it is better to verify the connection is working without a password. by connection to the server using ssh command. It should not ask a password as shown below.

KeyLess Authentication vis SSH

The default behavior of Mac / Linux saves Private Key as “id_rsa” in the .ssh folder. Windows sometimes we need to copy the Private Key and create file example created privatekey file in the same .ssh folder.

Windows Private Key Location for Testing

Now in the “Remote Explorer” select setting, it will open that config file in host all just need to add the “IdentityFile” command with File Location.

#Windows
IdentityFile C:\Users\UserName\.ssh\privatekey

#Mac / Linux
IdentityFile ~/.ssh/id_rsa

Now when Open The folder by right-clicking it will not ask for a password.

Opning Server SSH Connected Host from Remote Explorer on VS Code

The connection will be established in a folder.

Connected SSH Folder Via Remote SSH Extension in VS Code