Unleash the power of Visual Studio Code (VSCode) on Google Cloud Platform Virtua...

Full-fledged Local IDE experience on your Remote Virtual Machine!

Photo by Joshua Earle on Unsplash

Visual Studio Code (or VSCode for short) is a powerful, multi-platform, free code editor that supports multiple programming languages [1]. Over the past two years, it has tremendously grown in popularity, as can be noticed from the meteoric rise in its Google search trends. In this post, I will share a method to use VSCode installed on your local computer to edit and run code located on a Google Cloud Virtual Machine. But first…

Google Trends comparison between VSCode, Sublime, and Atom from Jan 2016 to Nov 2019.

Why VSCode when I have Jupyter?

As a Data Scientist, why should you use VSCode when you have the convenience of the Jupyter notebook[2]? Well, if you are like me, then your typical day to day Data Science job involves two aspects. The first aspect is to run experiments for which you use the (in)famous Jupyter notebook. Jupyter is highly suitable for the kind of iterative, experimental workflow involved in the early phases of a Data Science project. The second aspect of a Data Scientist’s job starts once you have a product that you want to run in production (run for thousands or millions of times every day). In many organizations, you do not have the luxury of a dedicated production team. Even if you do have that luxury, it is good practice to refactor your code before passing it to the production team to ensure the product works as expected once deployed. This is where VSCode shines in the Data Science workflow! The details of using VSCode to refactor code from a Jupyter notebook deserve a standalone post to do it justice. However, [3] provides an excellent overview of the refactoring tools available in VSCode. A simple example is “Rename Symbol,” which allows you to rename a variable just once but automatically updates everywhere the variable appears in your code! Super handy!

Pre-Requisites

Let’s now get into the details of this post. Since you are reading this post, I assume you already have a GCP Compute Engine VM running, and you also have VSCode installed on your personal computer. If you don’t have both of these, then refer to [4] on how to set up a GCP Compute Engine VM and [1] to download and install VSCode on your local computer.

Detailed Steps

Mac and Linux users can directly jump to the For All Users section of this post and follow from step #1 using the built-in terminal. Windows users need to take note of the below:

For Windows Users only:

• From your start menu, startup Windows Powershell
• For all remaining steps under the For All Users section of this post, please follow the instructions under the Linux and MACOS section on the reference webpage. However, remember to remove the following wherever it appears: ~/.ssh/
• For example, if the Linux and MACOS section of the reference webpage says:

ssh-keygen -t rsa -f ~/.ssh/[KEY_FILENAME] -C [USERNAME]

Type this in Windows Powershell instead:

ssh-keygen -t rsa -f [KEY_FILENAME] -C [USERNAME]

Important! Do NOTfollow the instructions under the Windows section of the webpage as I have not been able to get it to work on my Windows10 desktop.

For All Users:

Follow the instructions under the Linux and MACOS sections of the webpages below, even if you are a Windows user (read the above section on For Windows Users only )

1. Setup SSH keys on your local computer following instructions from [5] . Windows users, remember to remove ~/.ssh/
2. Locate and copy your SSH keys on your local computer following instructions from [6] . Windows users, by default your keys are saved at C:\Users\your-windows-username
3. You must add this SSH key (from your computer) to your Google cloud platform account. You can either insert the key to the whole project following instructions from [7] or just for a particular VM following instructions from [8] . My personal preference is to add it to the specific VM just to be organized. Remember, the public SSH key that you need to copy is the contents of the .pub file. Windows users, it’s best if you open this file in Notepad and copy its contents.
4. Now, open VSCode on your local computer. Press Ctrl+Shift+x on Windows to open the Extension manager in VSCode. In the search box, type remote-ssh, and install this extension.

Install Remote-SSH extension in VSCode on your local computer

5. Once the installation completes, press Ctrl+Shift+p on your computer to bring up the Command Palette and type remote-ssh . A bunch of options should appear, as shown in the below image. Click the Add New SSH Host… option.

Add New SSH Host… is the second option

6. In the Enter SSH Connection Command prompt that pops up, type : ssh -i ~/.ssh/[KEY_FILENAME] [USERNAME]@[External IP] and press Enter. KEY_FILENAME and USERNAME are what you typed in step #1. External IP can be found from your GCP Compute Engine VM Instances page and is unique to each VM. Another prompt pops up, asking you to Select SSH configuration file to update . Just click the first one, and you should see Host Added! at the bottom right-hand corner of your VSCode window.

Important for Windows users!, instead of ~/.ssh/[KEY_FILENAME], you must type in the full path with \\. For example, ssh -i C:\\Users\\your-windows-username\\[KEY_FILENAME] [USERNAME]@[External IP]

Select the first option

7. Press Ctrl+Shift+p to open up the Command Palette and type remote-ssh again. This time click on Connect to Host . Then select the IP address of your VM from the list that pops up. If you get another pop up about fingerprint, click Continue.

Connect to Host is the fifth option above

8. That’s it! Your local Visual Studio Code is now connected to your GCP VM! You can go ahead and click Open Folder or Open File, which will now display your files from the VM that can be edited directly from VSCode running locally on your computer.

Common Issues

I have tested the above steps on a Mac, Linux, and a Windows10 desktop. So, if you encountered any errors along the way, it’s most likely that you made one of the below common mistakes:

• Your GCP VM is stopped. Startup your GCP VM and try again.
• In Step# 6, you either provided the wrong KEY_FILENAME location or the incorrect USERNAME or the wrong External IP. Remember that if you don’t set Static IP for your GCP VM, then you potentially need to perform Step# 6 each time you stop and start your VM as the External IP address could change. Always provide the current External IP of your running VM.
• You followed the Windows instructions from the webpages under [5], [6], [7], and [8]. DONT! Go back and redo all the steps following the Instructions under Linux and MACOS with the small modification I mentioned above

I hope you found this post helpful. If it did, please let me know below. Happy Coding!