Setup VS Code on Windows for development in a Linux VM or a remote server

One of my favorite setups for web development is using Windows OS for editing and having a Linux Virtual Machine to host the projects' files. It keeps my Windows PC clean and at the same time, I have access to all Linux development tools and goodies. Other advantages are:

• Portability of VMs
• Easy backups of the whole dev environment
• Run a web server or other Linux specific software
• Try out different tools in a safe, contained environment and the list goes on...

VS Code makes editing on a remote machine a breeze and also a seamless experience. Using the Remote Development extension allows you to open any folder on a container, on a remote machine, or in the Windows Subsystem for Linux (WSL), and take advantage of its full feature set.

In this guide, we will focus on how we can set up VS Code on Windows for development inside a Linux Virtual Machine or a remote Linux Server.

Assuming that you have already a Linux VM up and running, we are not going to go into VM setup details. With that said, check out the next section for a quickstart on virtualization.

Setup a VM for developing with Virtual Box and Turnkey Linux

One of the easiest ways to start with Virtualisation is with the open-source version of Virual Box. Virtual Box is a virtualization software that supports many guest Operating Systems. In this case, we're gonna go with Linux 🚀. Instead of downloading and installing a Linux distro from scratch though, we're going to use a ready-made Linux VM image courtesy of Turnkey Linux. Turnkey Linux offers a big collection of VMs covering many use-cases/solutions based on the Debian Linux ❤️ distro. I am not going to go into details on how to install and setup a Turnkey Linux image on Virtual Box, there's a nice guide that you can follow here. If you are not sure which appliance to install, you can check out Turnkey Core for a "vanilla" experience or any other flavor created for web development.

With that out of the way, we can proceed setting up VS Code for development inside our VM. First, let's go over some prerequisites.

Prerequisites

On the Windows side, we need VS Code installed (well obviously). Also, we need to make sure that we can connect to our Linux VM via SSH.
On the Linux VM side, we need to have Git and Wget installed.

Let's start

Install Remote Development extension

Open VS Code, go into the extensions panel and, install the Remote Development extension from Microsoft. This extension will allow us to take advantage of VS Code's full feature set inside our VM. You can learn more about it here.

Generate SSH key pairs

Next, we need to generate our private/public SSH key pairs so that VS Code can access the Linux VM without us having to enter our credentials every time.
Open CMD and enter the following command:

ssh-keygen -t rsa -b 4096 -f %USERPROFILE%/.ssh/linux_rsa

You can leave the passphrase empty.
We now have our private/public keys stored inside our Windows user profile folder.

Transfer the public key to the server and copy it to the .ssh folder.

To transfer the public key to the Linux VM, open CMD and enter the following command. Make sure you replace user@192.168.1.100 with your Linux username and IP address.

scp %USERPROFILE%/.ssh/linux_rsa.pub user@192.168.1.100:~/key.pub

Then we need to copy the public key to the .ssh folder authorized_keys file. Login into Linux VM with SSH and enter the following command.

cat ~/key.pub >> ~/.ssh/authorized_keys

You can now remove key.pub from the Linux VM's home folder if you want, as it's no longer needed there.

rm ~/key.pub

Enable SSH Tunneling

In order for VS Code to be able to connect successfully to the Linux VM, we need to make sure that AllowTcpForwarding is enabled.
While in the Linux VM, open /etc/ssh/sshd_config with your favorite Linux editor (e.g nano), find the AllowTcpForwarding yes line, and uncomment it.

nano /etc/ssh/sshd_config

You may have to fill it in if it's not already present.
After that, you'll have to restart the SSH server:

systemctl restart sshd

Test the SSH connection without a password

On windows, open CMD and try to connect to the Linux VM, you should be able to do so without entering any credentials. Again, make sure you replace user@192.168.1.100 with your Linux username and IP address.

ssh -i %USERPROFILE%/.ssh/linux_rsa user@192.168.1.100

Add the Linux VM to the Windows SSH configuration file

Open VS Code and launch the command palette with ctrl + shift + p. Enter remote-ssh and select Remote-SSH: Open Configuration File... and then C:\Users\{USERNAME}\.ssh\config

Inside the config file enter the Linux VM details, and save the file:

Host Linux
HostName 192.168.1.100
User user
IdentityFile ~/.ssh/linux_rsa

Make sure you replace 192.168.1.100 with your Linux VM IP address and user with your Linux VM username.

Connect to the Linux VM from VS Code

Inside VS Code, launch the command palette with ctrl + shift + p, enter remote-ssh, and select Remote-SSH: Connect to Host.... Select Linux.
VS Code will now connect to the Linux VM and start the installation process. This will create a .vscode-server directory inside your Linux VM's user home folder. During the installation process, VS Code might prompt you to enter the type of the host, select Linux. Wait for VS Code to complete the installation process.

That's it, VS Code has established a connection with our Linux VM and we can now use it as our development environment. When you click to add a folder into the project you'll see the list of folders inside the Linux VM. You can then select the folder you wish to store your project's files in.

Install extensions

You can install any VS Code extension such as eslint, prettier etc inside the Linux VM by going to the Extensions panel and selecting the extensions you want to be installed.

Have fun with Visual Studio Code configured for development on a Linux VM using SSH!