Remote editing files over SSH with Visual Studio Code

Editing my bashrc file with VS Code while SSHing into my server with VS Code’s integrated terminal.

I originally wrote this over at Codepen.io — figured I’d share it here.

Editing files on a remote server can suck.

There are countless methods to accomplish this task, but I’m sure you’re like me, and fall into the bucket of the “casual vim user”, or some other terminal editor, which tosses speed and proficiency out the window. And, at the end of the day, who really wants to mess with a editor they aren’t 100% comfortable in, like vim ,or deal with an FTP client and all that jazz.

🙋‍♂️ not this guy.
Call me lazy, stupid or whatever just because my dev-ops work-flow isn’t as sophisticated, technical or as nifty as yours, whatever floats your boat and makes you a bro-grammer 👍.

Cool.
So a few assumptions, you already know what SSH is and what’s involved, you have full root access to your server, and you’re not afraid of the terminal.

Okay, now that we got that out of the way onto the topic of Remote editing files over SSH with Visual Studio Code (VSCode for short) - I am a recent convert, to Visual Studio Code from Sublime Text, and figured I'd share something I use frequently. If you do enough searching you'll find a few blogs and chitter-chat out there about this topic for the editor you're savvy with, but the steps and usage are pretty much the same regardless of the editor -- well, as long as there is editor support for your setup. But hopefully you're using a modern editor and it’s pretty BAMF.

So, back in the day, TextMate came out with, rmate, that was implemented in Ruby, which is - killer!, though the downside is that your server has a really old version of ruby or it’s just not installed.

“Don’t Panic”, that’s where brilliant peeps like, Harald Lapp (@aurora via Github) created a BASH implementation of rmate, that is stand alone and we can take full advantage of.

#Step 1:

In VSCode Extensions, search for Remote VSCode and install it:

cmd+p then paste ext install remote-vscode

#Step 2:

So we need to setup agent forwarding for our server. To do this we’ll addRemoteForward 52698 127.0.0.1:52698 to our ~/.ssh/config

It should look pretty close to this:

Host myRemoteServerName
    HostName 12.34.567.89
    User root
    ForwardAgent yes
    RemoteForward 52698 127.0.0.1:52698

#Step 3:

So now, we’ll need to install that file Harald Lapp created on our remote server — note: “there’s more than one way to skin a cat” so again do whatever works best for your setup.

ssh -v myRemoteServerName

Now, lets grab that rmate file from Github and update the permissions of the file:

sudo wget -O /usr/local/bin/rcode \
https://raw.github.com/aurora/rmate/master/rmate
chmod a+x /usr/local/bin/rcode

#Step 4:

Logout and back into your remote server. So now, you should be able to rcode some_file.php and it will open up VSCode.

macOS Terminal app + VS Code

#OPTIONAL:

• I add an alias to my remote server’s .bashrc file --> alias code='rcode' this way my local and my remote use the same commands to open up VSCode from the terminal.
• If your terminal is complaining about “no such file or directory” , you’ll need to edit your PATH:

echo "export PATH=\"$PATH:/usr/local/bin\"" >> /etc/profile

Chew on that for awhile and feel free to let me know if you enjoy it.