Connecting via SSH, editing a project in VS Code

What is your tutorial about?

SSH, that venerable remote access tool. It’s old and not as flashy as a web based editor, but the simplicity of its interface makes it easier to integrate into other programs, and as a result it has a decent ecosystem of tools that use it as a transport.

Who might find this useful?

Only me.


Tutorial:

This version of the tutorial is for Windows. I think this also works on Linux; adjust accordingly.

Set up Snail to the point where you are logged in and have access to a project.

https://snail-cli.glitch.me/

Add a section in your %USERPROFILE%\.ssh\config to use Snail’s SSH proxy:

Host *.snail
User app
ProxyCommand "C:\Users\wh0\AppData\Roaming\npm\snail.cmd" ssh proxy %h
RequestTTY no

# Save an actual hostname here so we have autocomplete in some places
Host trusted-quark-walnut.snail
HostName trusted-quark-walnut.snail

Here I have wh0 as my local username and trusted-quark-walnut as the project name that I want to connect to. The .snail part is mostly ignored, but it makes it match the *.snail section of your .ssh/config file.

Then do the usual things to set up an SSH connection:

rem If needed, generate a key
ssh-keygen
rem Add your public key to the project's authorized keys
snail ssh copy-id trusted-quark-walnut.snail
rem Add the project's host key to your known hosts
snail ssh keyscan trusted-quark-walnut.snail >>.ssh/known_hosts
rem Try connecting
ssh trusted-quark-walnut.snail id

It’s a little janky with the lack of TTY, so it’s not as good as snail term for interactive sessions. But it should work for running single commands, copying files with scp/sftp, and port forwarding.


One thing I tried was using VS Code’s extension for remote editing over SSH.

(I tried making the window really small so that the screenshots fit nicely in a forum post)

image

… and then some other steps where I didn’t take screenshots where you tell it to open /app/ and then you say the remote host is Linux …

image

It takes quite some time “Initializing JS/TS language features” but eventually it gets going and can do auto complete stuff.

The way this extension works is that installs some kind of VS Code “server” on the remote host, which ends up taking a lot of resources:

image

It’s somewhat reminiscent of that time we tried running code-server.

And I assume this extension doesn’t do live “multiplayer” collaborative editing.

4 Likes

das where you're wrong

4 Likes