Setup VS Code on Windows for development in a Linux VM or a remote server
Tags: webdev, vscode, linux
Published: 2021-02-14 15:51:52

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](https://www.virtualbox.org/). Virtual Box is a virtualization software that supports many guest Operating Systems. In this case, we're gonna go with Linux :rocket:. 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](https://www.turnkeylinux.org/). Turnkey Linux offers a big collection of VMs covering many use-cases/solutions based on the Debian Linux :heart: 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](https://www.turnkeylinux.org/docs/installation-appliances-virtualbox-new). If you are not sure which appliance to install, you can check out [Turnkey Core](https://www.turnkeylinux.org/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](https://code.visualstudio.com/docs/remote/remote-overview).

![1_install_remote_development](https://dev-to-uploads.s3.amazonaws.com/i/d9c2a2vnm4ti9r7gq7uc.png)
 
### 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:
```cmd
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.
```cmd
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.
```bash
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.
```bash
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.
```bash
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:
```bash
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.
```cmd
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!