Use VS Code for Remote Development

Setup VS Code on Windows 10 to connect to Linux using Remote-SSH

Introduction

Visual Studio Code is my favorite Integrated Developer Environment (IDE) because of it’s clean design, large selection of plugins and cross-platform support. In this article, let’s setup VS Code on Windows 10 laptop to connect to Linux using one of it’s plugin: Remote-SSH.

Install and Set Up VS Code on Windows 10, if you don’t have it

Instructions to install VS Code on Windows 10 and integrate MobaXterm terminal can be found in my previous article.

Generate SSH Key Pair, skip if you already have it

Open a new Terminal in VS Code (Terminal > New Terminal), this will open integrated MobaXterm Terminal. Enter the below command and accept all the default values.

ssh-keygen -t rsa -b 4096

This creates two files, id_rsa and id_rsa.pub in .ssh folder in your home directory. Now, we need to copy the generated ssh key to the Linux host. This can be done by below command, replace the USERNAME and LINUXHOST variable before running this command.

ssh-copy-id -i ~/.ssh/id_rsa.pub USERNAME@LINUXHOST

This will ask to enter login password for LINUXHOST. If it’s successful, this displays a message saying try logging with: ssh USERNAME@LINUXHOST.

Add SSH Path in VS Code Settings

MobaXterm has ssh client, so you already have it if you followed my previous article. Open VS Code settings (File > Preferences > Settings) and click the “Open Settings (JSON)” button in the top right corner. It will open “settings.json” file, add below lines and save the file to define the path for ssh (write the full path to “slash” folder)

// MobaXterm SSH
"remote.SSH.path": "C:\\Users\\UserName\\Apps\\MobaXterm\\slash\\bin\\_ssh.exe",
"remote.SSH.configFile": "C:\\Users\\UserName\\.ssh\\config",

Install Remote-SSH Plugin in VS Code

Open Extensions Marketplace using Ctrl+Shift+Xkeyboard shortcut, search for Remote SSH extension and click Install. Now we are ready to configure the Linux Host.

Configure Remote-SSH Plugin and Connect to Linux Host

Open the Command Palette using Ctrl+Shift+Pkeyboard shortcut, search for Remote-SSH: Open Configuration File and open “config” file in your Home directory. VS Code creates a new file if it doesn’t exist. Add the following code to this file to define the connection to the Linux Host, replace the ConName, LINUXHOST, USERNAME with appropriate values and save the file.

Host ConName
    HostName LINUXHOST
    User USERNAME
    IdentityFile ~/.ssh/id_rsa

Connect to the Linux Host either by navigating to the Remote Explorer -> SSH Targets or Open a remote window (green button on lower left hand) and click Remote-SSH: Connect to Host... Select the configuration ConName that we saved above. This will open a new window with Welcome message and setup VS Code server on Linux Host in the background. If you open a new terminal in this window, we can see the familiar Linux Terminal.

Configure Remote X11

If we need to open any GUI application in Linux host and see them in Windows, open Extensions Marketplace, search for Remote X11 extension and Install it in both Windows and Linux VS Code. MobaXterm already has X server and it starts automatically when MobaXterm window is opened, so open MobaXterm and minimize it’s window (just to start X server). Reopen VS Code and connect to the Linux Host. Open a new terminal and type “xclock” to see the xclock application from Linux in our Windows.

Conclusion

We have Visual Studio Code configured for development on a remote Linux server using SSH. We can now create amazing programs using Linux environment even Windows is the primary operating system.

Next article: Setting up Development Environment in Visual Studio Codespaces