5 VS Code extensions backend developers should install

The problem

VSCode works out of the box, but a small set of extensions turns it into a genuinely productive environment rather than just a text editor.

This article goes straight to 5 of the most useful extensions, when to use each one, and the configuration that matters.

Remote SSH — code directly on a server

Extension: Remote - SSH (Microsoft)

When to use it

When you need to work with files on a remote server, instead of:

• copying code up with scp or rsync after every edit
• SSHing in and using vim or nano in the terminal
• mounting the directory over SFTP and editing locally

Remote SSH lets VSCode connect directly to the server. The entire file browser, terminal, and extensions like Prettier or ESLint run on the server itself, not locally.

Connecting

Open Command Palette (Ctrl+Shift+P) → Remote-SSH: Connect to Host → enter the address:

user@your-server-ip

Or add an entry to ~/.ssh/config so you can pick a name from the list:

Host homelab
    HostName 192.168.1.100
    User thach
    IdentityFile ~/.ssh/id_ed25519

Host vps-prod
    HostName 12.34.56.78
    User ubuntu
    IdentityFile ~/.ssh/id_ed25519

Then select homelab or vps-prod from the list instead of typing the IP every time.

Things to know

• The server needs sshd running and key-based auth set up
• On first connect, VSCode automatically installs VS Code Server on the remote — takes a few seconds
• Extensions installed locally and on the remote are separate. Prettier installed locally won't run during a remote session — install it again in the remote context
• If the server has no internet access, download the VS Code Server offline package using the instructions in the official docs

---

Docker — manage containers without leaving the editor

Extension: Docker (Microsoft)

When to use it

When you keep typing the same commands:

docker ps
docker logs -f container-name
docker exec -it container-name sh
docker compose up -d
docker compose logs --tail=50 -f

The Docker extension puts all of this into the sidebar. Right-click a container to get logs, exec a shell, start/stop/restart — without touching the terminal.

Most-used features

View container logs: Right-click a container → View Logs → log stream opens directly in the VSCode terminal.

Open a shell in a container: Right-click → Attach Shell → opens a terminal inside that container.

Browse images, volumes, and networks: The sidebar has dedicated tabs for each resource type.

Run Compose from a file: Right-click docker-compose.yml in the file explorer → Compose Up or Compose Down.

When you might not need it

If you're already comfortable with Docker in the terminal, this extension just saves a few seconds of typing. For anyone new to Docker or frequently debugging multiple containers at once, the sidebar is genuinely useful.

---

Code Spell Check — catch typos before they're committed

Extension: Code Spell Checker (Street Side Software)

When to use it

Typos in variable names, comments, and strings are easy to miss because linters don't check natural language. This extension underlines misspelled words right in the editor, including inside:

• camelCase and snake_case variable names
• comments
• string literals
• Markdown files

Practical configuration

The extension checks English by default. To add technical terms or suppress warnings for domain-specific words, add to settings.json:

{
  "cSpell.language": "en",
  "cSpell.words": [
    "haproxy",
    "nginx",
    "loadbalancer",
    "nestjs",
    "prisma",
    "supabase"
  ],
  "cSpell.ignoreWords": [
    "dockerfile",
    "eslintrc",
    "tsconfig"
  ]
}

To add project-level words shared across the team, create .cspell.json at the project root:

{
  "version": "0.2",
  "language": "en",
  "words": [
    "userid",
    "orgid",
    "cloudflared"
  ]
}

What makes it useful

The extension recognizes patterns like getUserById and splits them into individual words — get, user, by, id — checking each one. You don't need the entire identifier to be a single word for it to catch spelling errors.

---

Prettier — auto-format on save

Extension: Prettier - Code formatter (Prettier)

When to use it

When your team wastes time arguing about 2 vs 4 space indents, semicolons, or quote style. Prettier settles all of that with config and formats automatically on every save.

Basic setup

Install the extension, then enable format on save in settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Create .prettierrc at the project root to define the style:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "always"
}

To exclude files from formatting, create .prettierignore:

node_modules
dist
build
*.min.js

Using with TypeScript / React

Prettier supports TS, TSX, JS, JSX, CSS, JSON, and Markdown out of the box. No extra plugins needed for these file types.

If using Tailwind, install the Tailwind plugin:

npm install -D prettier-plugin-tailwindcss

Then add it to .prettierrc:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

This automatically sorts Tailwind classes in the canonical order — no need to remember which classes go before which.

---

ESLint — catch logic errors and dangerous patterns

Extension: ESLint (Microsoft)

Prettier vs ESLint — they don't replace each other

A common question: if I already have Prettier, do I still need ESLint?

• Prettier only cares about style: spacing, semicolons, line breaks
• ESLint cares about code content: unused variables, == instead of ===, any in TypeScript, missing dependencies in useEffect

The two are complementary — use both.

Setup

npm install -D eslint
npx eslint --init

For a TypeScript project, .eslintrc.json typically looks like:

{
  "env": {
    "node": true,
    "es2022": true
  },
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "@typescript-eslint/no-explicit-any": "warn",
    "@typescript-eslint/no-unused-vars": "error",
    "no-console": "warn"
  }
}

Integrating with Prettier

To use both without conflicts:

npm install -D eslint-config-prettier

Add prettier to the end of the extends array:

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ]
}

eslint-config-prettier disables all ESLint formatting rules so they don't conflict with Prettier.

Fix on save

To have ESLint automatically fix auto-fixable errors on save:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

---

Summary — which extension for which problem

Extension	Use when
Remote SSH	Coding directly on a remote server or VM
Docker	Managing containers, viewing logs, exec-ing shells without leaving the editor
Code Spell Check	Avoiding typos in variable names, comments, and strings
Prettier	Auto-formatting code, enforcing consistent style across a team
ESLint	Catching logic errors, dangerous patterns, codebase rule enforcement

All five are free, installed from the marketplace, and work well together. Remote SSH and Docker are especially useful if you frequently work with servers or containers. Prettier and ESLint are nearly mandatory for any JavaScript or TypeScript project built as a team.