Visual Studio Code editing GCE files

Like many, I’m mostly completely converted to Visual Studio Code and Google Cloud Platform (full disclosure: Googler). Until today, I suffered through nano (very occasionally vi) when editing files on Google Compute Engine (GCE) instances.

rmate

Another editor — Textmate — has a feature called ‘rmate’ that enables remote editing by leveraging an ssh tunnel to the remote machine. Rafael Maiolla developed an extension that brings this experience to Visual Studio Code. Thanks, Rafael!

This post explains how to use this extension to remotely edit files on GCE instances.

Local machine

You will need Visual Studio Code, ruby, rmate and Rafael’s remote-vscode extension. I’m running a Linux (Ubuntu) workstation, ymmv. Restart Visual Studio Code. Open “settings” (CTRL-,) and search for “remote.”. I left the settings at their defaults:

Visual Studio Code settings: “Remove VSCode configuration”

Then press “F1” to open Visual Studio Code’s Command Palette and find “Remote: Start Server”, click it. You should see (briefly) “starting server” (perhaps “restarting server”) in the bottom left hand corner of Visual Studio Code’s screen. Code is ready.

We’ll now set up a secure reverse (remote machine is the client) tunnel between your local machine and a remote GCE instance. To do this, you will, of course, need to have a remote GCE instance. I’ll assume you’ve done that and you have a machine called ‘my-gce-instance’.

You should replace the $VARIABLES in the following command but use something similar to:

INSTANCE="my-gce-instance"
gcloud compute ssh $INSTANCE \
--ssh-flag="-R 52698:localhost:52698" \
--project=$PROJECT \
--zone=$ZONE

Remote (GCE) machine

All being well, you should find yourself logged in to a secure session on ‘my-gce-instance’.

You must install rmate on the GCE instance before you can use it. I’m running Ubuntu on the GCE instance and the commands I used are:

sudo apt update && \
sudo apt -y install ruby \
&& sudo gem install rmate

When you wish to use Visual Studio Code (on your local machine) to edit a file (on the GCE instance), run this command on the GCE instance:

rmate /path/to/my-file

For example, to edit index.html in /www, you would type:

rmate /www/index.html

Don’t be disappointed when it appears nothing has happened…

Something useful has happened!

NB: You must maintain the ssh session while you are editing. You may issue multiple ‘rmate’ commands, one for each file you wish to edit.

Local machine

Return to Visual Studio Code and you should see that the remote file has been opened!

Visual Studio Code remotely editing GCE-hosted files

When you close each file, the associated (remote) rmate process will be terminated. When you’re done editing, you should exit the ssh session.