Blog

VS Code Tutorial: Remote Folder as Workspace with SSH

Category: Programming
By: Sam Matucheski
12/21/18



EDIT 11-11-19 There seems to be an official extension to due this now, but I haven't tried it yet. When I get around to it try to write about it. This post will still remain up for hisorical reasons. Original post following:

If you are doing something like web development over on a server and you’d like to do it on your own computer with a handy code editor it’s quite easy to do with the right extension for VS Code.

First go on over to extensions and search for “ssh”. The first extension that appears should be the one we want, SSH FS by Kevin Schoofs.

step1

Download it and reload VS code. Go to your User Settings, found by selecting File > Preferences > Settings. Edit your User Settings and add

“sshfs.configs”: [

]

For every different folder/connection you want to use as a workspace, add it within the configs sections in their own set of curly braces . Depending on the settings of your server you will have need to add different parameters. A common setup will look like this.

“sshfs.configs”: [
{
	“name”: “MySSHWorkspace”,
	“root”: “/path/to/root/folder”,
	“host”: “111.111.1.111”,
	“port”:  22,
	“username”:  “username”,
	“password”:  “password12345”
}
]

A couple things to note: every configuration MUST have a name parameter. Host may either by an IP address or if you have a domain and DNS setup it can be a url. Password can alternatively be set to true (without quotes) to have be prompted instead of being stored in your User Settings. If your server use a private key instead of a password you can use that as well. The best way is to use the parameter “privateKeyPath” which simply takes the path to the key on your machine. If the key is encrypted and requires a passphrase simply use the parameter “passphrase”.

You should now see a SSH FILE SYSTEMS section in the Explorer. All of your configs will appear here.

step3a

Right click on the one you want to use and select “Connect as Workspace Folder”.

step3b

And that should be it. You can now view and edit all the files and folders that fall under the path you specified.

I hope people will find this useful. Happy coding!