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 environmentand 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 LinuxHostName 192.168.1.100User userIdentityFile ~/.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!
