I use VS Code almost exclusively now. It’s the best editor for Angular and TypeScript and that’s where I spend most of my time these days. It’s also a pretty good all-around editor, so even when I’m not working in TypeScript I still use it.
I recently found the need to edit a WordPress theme running on an Amazon EC2 instance. In many cases I would just SSH into the machine and make changes using whatever tools were available on the machine (emacs or vi, etc.) With the amount of work I need to do with this particular theme, I need a much more powerful editing environment, so I looked around for ways to connect directly with VS Code to work with the files directly. I didn’t want to go old school with sFTP or something, so editing in VS Code seemed like the way to go. It’s pretty cool. The setup I’m using is:
- VS Code
- An EC2 instance running Ubuntu
- The Remote – SSH Extension
Prerequisites
This article assumes that you’ve already got an EC2 instance running and have access to the .pem file you created when you set up your EC2 instance. You also need and OpenSSH compatible SSH client installed on the machine.
Getting Started
The first thing to do is to install the Remote – SSH extension. Go to the extensions panel in VS Code and search for “remote ssh.” There will be a result from Microsoft.
Install it.
From there, with key based authentication, I did something different than the instructions in the extension, which allow for the use of a username and password. I hit F1 to open the command pallete. I then typed “remote” to limit the results to this particular extension. I then chose “Remote SSH:Open Configuration File.”
Clicking on that menu item will open a new menu, which allows you to open a configuration file from one of two pre-configured places on the file system. Choose the first option. In my case it was C:\Users\rob\.ssh\config
VS Code will then open the file with blank values filled in.
Fill out the fields with your host, hostname, username (find it here) and, and this is the tricky part for key based authentication, a new field, IdentifyFile, which should point to your .pem. Save that config file and now you’re ready to connect.
To connect, hit F1 again and search for “Remote SSH.” Choose “Remote SSH:Connect to Host”
From there, select your recently configured host from the list that appears.
It will open a new VS Code window. Accept the one dialog that pops up and you’re ready to go. You can click “open folder” in the file window and start working like you normally would.
And that’s that, you’re ready to edit files on your EC2 instance, in VS Code.