Develop Faster with VS Code + Remote SSH Print

Remote SSH lets you use VS Code on your laptop while editing and running code on a remote Linux server. You get local‑IDE ergonomics (IntelliSense, linting, debugging) and run the app on the server’s OS with real dependencies.

What You’ll Need

• A Linux server (SSH accessible)

• VS Code on your laptop

• OpenSSH client (built‑in on macOS/Linux; on Windows ensure it’s installed)

1) Install VS Code & Extensions

1. Install Visual Studio Code: https://code.visualstudio.com

2. In VS Code, install these extensions (search by exact name):

   • Remote - SSH (ms-vscode-remote.remote-ssh)

   • (optional pack) Remote Development

   • ESLint (dbaeumer.vscode-eslint)

   • Prettier – Code formatter (esbenp.prettier-vscode)

   • YAML (redhat.vscode-yaml)

   • Docker (ms-azuretools.vscode-docker)

   • Framework/tooling extras as needed (Tailwind CSS, Prisma, etc.)

2) Create an SSH Key

macOS / Linux

ssh-keygen -t ed25519 -C "laptop-key"
# Press Enter to accept default (~/.ssh/id_ed25519) and set a passphrase

Windows (PowerShell)

ssh-keygen -t ed25519 -C "laptop-key" -f $env:USERPROFILE\.ssh\id_ed25519

Windows agent (so you don’t retype the passphrase each time):

Set-Service -Name ssh-agent -StartupType Automatic
Start-Service -Name ssh-agent
ssh-add $env:USERPROFILE\.ssh\id_ed25519

3) Add Your Public Key to the Server

Replace user and server with your actual username/host.

macOS / Linux

ssh-copy-id user@server

If ssh-copy-id isn’t available:

cat ~/.ssh/id_ed25519.pub | ssh user@server "mkdir -p ~/.ssh && chmod 700 ~/.ssh && cat >> ~/.ssh/authorized_keys && chmod 600 ~/.ssh/authorized_keys"

Windows (PowerShell)

$type = Get-Content $env:USERPROFILE\.ssh\id_ed25519.pub
ssh user@server "umask 077; mkdir -p ~/.ssh; echo '$type' >> ~/.ssh/authorized_keys"

Test it:

ssh user@server

You should log in without the account password (you’ll enter the key passphrase if your agent isn’t running).

4) (Optional) Add a Handy SSH Alias

Edit ~/.ssh/config (Windows: C:\Users\<you>\.ssh\config):

Host mybox
  HostName server
  User user
  IdentityFile ~/.ssh/id_ed25519
  IdentitiesOnly yes
  AddKeysToAgent yes

Now you can simply:

ssh mybox

5) Connect from VS Code

1. Open VS Code → Ctrl/Cmd+Shift+P → Remote‑SSH: Connect to Host…

2. Pick your host (e.g., mybox).

3. VS Code installs its server on the remote machine (first time only).

4. The bottom‑left status bar shows SSH: <host> when connected.

6) Open Your Project on the Server

• In the remote VS Code window: File → Open Folder… → choose your project path on the server (e.g., /home/user/app).

• Trust the workspace when prompted.

• VS Code will offer to install recommended extensions on the remote. Accept for linters/formatters you use.

7) Formatting & Linting (Remote Workspace)

Create/update .vscode/settings.json on the server project:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "prettier.printWidth": 100,
  "prettier.singleQuote": true,
  "prettier.semi": true,
  "files.associations": { "*.yml": "yaml" },
  "yaml.validate": true
}

Now each save formats and lint errors show in Problems.

8) Daily Workflow (Remote Terminal)

Use the integrated terminal in VS Code (remote window):

# Install deps
npm ci

# Start dev server
npm run dev

# Dockerized services
docker compose up -d
docker compose logs -f web

Port Forwarding

When your app listens on the server (e.g., 3000):

• Open the Ports view (Remote Explorer) → Forward a Port → 3000.

• VS Code provides a local URL (e.g., http://127.0.0.1:3000) that tunnels to the server.

Debugging

Use Run and Debug to launch or attach to Node/Chrome/Edge on the remote.

9) Docker (Remote)

• Install the Docker extension on the SSH target.

• Use the Docker panel to view images/containers, start/stop, and inspect logs.

• Common commands:

docker compose build web
docker compose up -d web
docker compose logs -f web

10) Git on the Server

Use the Source Control tab or terminal:

git status
git add -A
git commit -m "Update feature"
git push origin main

Set your identity on the server once:

git config --global user.name "Your Name"
git config --global user.email "you@example.com"

11) Environment Variables & Secrets

• Keep .env files on the server; don’t commit secrets.

• Add to .gitignore.

• For multi‑service apps, use a .env per service.

12) Performance Tips

• Close unused terminals/tabs.

• Exclude huge folders via settings (files.watcherExclude).

• Use server‑side Node versions close to production (nvm helps).

• Prefer Docker for parity with production.

• Clean caches occasionally:

docker system prune
npm cache verify

13) Security Hardening (Later)

• Disable SSH password logins (server /etc/ssh/sshd_config):

  PasswordAuthentication no
  PubkeyAuthentication yes
  

• Use a non‑root user for dev; sudo only when necessary.

• Keep the server patched (apt/yum update).

• Restrict SSH via firewall, consider fail2ban.

14) Troubleshooting

• VS Code can’t connect: test ssh host in a terminal; check firewall/port 22.

• Agent not found (Windows): ensure the OpenSSH Authentication Agent service is running; ssh-add your key.

• Extension missing on remote: open Command Palette in the remote window and install it on the SSH target.

• Permission denied on save: ensure the remote user owns the project directory.

15) Project Hygiene

• Include .editorconfig, .prettierrc, .eslintrc*.

• Add a README with run/debug commands.

• Use consistent scripts: dev, build, start, lint, format.

• Log to stdout/stderr and use VS Code to tail logs.

Quick Reference

Port forwarding: Ports panel → Forward a Port → 3000

Docker:

docker compose up -d
docker compose logs -f service
docker compose build service

Node:

npm ci
npm run dev
npm run build
npm start

Git:

git add -A && git commit -m "msg" && git push

You’re set. Open VS Code → Connect via Remote SSH → Open folder → Edit → Run → Test → Commit—no file copying, no environment drift, fewer surprises.