How to Set Up VS Code for Web Development

Start from a clean baseline

A focused VS Code setup beats a wall of extensions. Start with a small set that pays off every day, then add more only when you feel a specific gap.

Step 1 — Install core extensions

Open the Extensions view (Cmd/Ctrl + Shift + X) and install:

Extension	Why
ESLint	Lints JavaScript/TypeScript as you type
Prettier	Formats code on save
GitLens	Blame, history, and diff context
ES7+ React/Redux snippets	Faster component scaffolding
Path Intellisense	Autocompletes import paths

Step 2 — Tune settings.json

Open it via Cmd/Ctrl + Shift + P → Preferences: Open User Settings (JSON):

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.rulers": [100],
  "files.trimTrailingWhitespace": true,
  "terminal.integrated.defaultProfile.linux": "bash"
}

Format-on-save with Prettier is the single biggest consistency win — it removes an entire class of style arguments from code review.

Step 3 — Configure the integrated terminal

VS Code’s terminal (Ctrl + `` ) is a full shell. Point it at your default:

1. Cmd/Ctrl + Shift + P → Terminal: Select Default Profile.
2. Choose your shell (bash, zsh, PowerShell).

Open a project from the CLI with code . and the terminal inherits that folder.

Step 4 — Set up Node debugging

Add this launch config in .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug index.js",
      "program": "${workspaceFolder}/index.js"
    }
  ]
}

Set a breakpoint by clicking in the gutter, press F5, and step through with F10/F11.

Step 5 — Learn the shortcuts that matter

Shortcut	Action
Cmd/Ctrl + P	Jump to any file
Cmd/Ctrl + Shift + P	Command palette
Cmd/Ctrl + /	Toggle comment
Option/Alt + Up/Down	Move line
Cmd/Ctrl + D	Select next occurrence

Troubleshooting

• Formatting does nothing — confirm Prettier is the default formatter and the language has formatting enabled ("editor.formatOnSave": true).
• Debugger can’t attach — check program points at the entry file relative to ${workspaceFolder}.
• Extensions conflict — disable rather than uninstall, then bisect.

Summary

You now have a fast, opinionated editor: linting and formatting on save, a shell-ready terminal, and step-through Node debugging. Next: create a TypeScript project that takes full advantage of it.