VS Code Setup for Full-Stack JS Dev: The Extensions and Settings That Matter

If your VS Code has ever felt like a crowded toolbox — hundreds of extensions installed, overlapping features, sluggish start-up — this article is for you. I recently cut my own list from 169 extensions down to a focused set that actually improves my day-to-day work on React/Node/TypeScript projects. This guide is opinionated and practical: ten to fifteen extensions that earn their keep, the keysettings worth changing, a compact set of keybindings, and short workflow examples you can copy into your environment today. The goal is not feature-completeness but repeatable, efficient defaults for full-stack JS development.

1) The mindset: less is more — and why you should prune

Extensions add capability but also friction: memory, CPU, update noise, and feature overlap. Trimming is not an aesthetic exercise. It improves reliability, reduces conflicts, and makes the IDE feel faster. Decide on two filters before you remove anything: does the extension solve a repeated, high-cost problem (saving minutes every day), and does it integrate well with your existing tooling (Prettier, ESLint, TypeScript)? If the answer to both is no, remove it.

Practical pruning steps: disable extensions for a week instead of uninstalling to observe the impact. Keep a short list of must-haves per project type (frontend, backend, devops). Use the built-in Extensions view's 'Enable (Workspace)' toggle to scope tools to projects that need them, not globally.

• Remove overlapping linters/formatters; pick one primary formatter and one ESLint integration.
• Prefer language servers and single-purpose extensions over large monolithic tools duplicating features.
• Use workspace extensions for project-specific tools (Docker, remote containers).

2) My opinionated, practical extension list (10–15 essentials)

Below is a compact list of extensions I keep in my personal setup for React/Node/TypeScript. Each entry includes a one-line rationale and minimal config notes. This list aims to balance on-the-job productivity with low noise.

Install these selectively and use workspace scoping for non-universal items.

• 1) ESLint (dbaeumer.vscode-eslint) — primary linter integration; let ESLint handle code quality and fix-on-save. Configure to run on TypeScript and JS projects via your project's .eslintrc.
• 2) Prettier - Code formatter (esbenp.prettier-vscode) — single source of truth for formatting. Disable conflicting formatters in settings.
• 3) TypeScript Hero or native TypeScript Language Features (built-in) — rely on the TypeScript language server for imports and refactors; prefer built-in where possible.
• 4) GitLens (eamodio.gitlens) — advanced Git insights without leaving the editor; use selectively for blame and history exploration.
• 5) vscode-icons or Material Icon Theme — visual file cues; pick one theme for clarity.
• 6) Path IntelliSense (christian-kohler.path-intellisense) — fast file import completion for JS/TS projects.
• 7) Bracket Pair Colorizer 2 (CoenraadS.bracket-pair-colorizer-2) or built-in bracket matching — improves readability for JSX/TSX.
• 8) Jest (Orta.vscode-jest) or Testing Library support — run tests and see inline results. Use workspace installation to avoid global version conflicts.
• 9) REST Client (humao.rest-client) or Thunder Client — lightweight HTTP testing without leaving VS Code; pick one.
• 10) Docker (ms-azuretools.vscode-docker) — workspace-scoped for projects that containerize; useful but non-essential for pure frontend.
• 11) Settings Sync (shan.code-settings-sync) or built-in Settings Sync — keep your focused setup across machines.
• 12) npm Intellisense (christian-kohler.npm-intellisense) — helps with module import completion.
• 13) EditorConfig for VS Code (EditorConfig.EditorConfig) — enforce basic indentation and newline rules across editors.
• 14) Remote - Containers / Dev Containers (ms-vscode-remote.remote-containers) — optional, but vital for reproducible workspaces on Node projects when consistency matters.
• 15) Live Share (ms-vsliveshare.vsliveshare) — team collaboration; install only if you use pair programming frequently.

3) Key settings.json snippets and why they matter

A small set of settings can lock in consistency and eliminate debates about style. Prefer project-level .vscode/settings.json for enforcement where possible. Below are recommended settings for a React/Node/TS workflow. Add them to your user settings for defaults and to workspace settings for project-specific rules.

The snippet enforces Prettier formatting on save, ensures ESLint runs properly on TS files, and adjusts editor behavior for JavaScript/TypeScript productivity.

• Example settings snippet (add to settings.json or workspace .vscode/settings.json):
• { "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll": true, "source.organizeImports": true }, "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"], "editor.defaultFormatter": "esbenp.prettier-vscode", "files.exclude": { "**/node_modules": true, "**/.git": true, "dist": true }, "javascript.suggest.autoImports": true, "typescript.suggest.autoImports": true, "git.enableSmartCommit": true, "telemetry.enableTelemetry": false, "telemetry.enableCrashReporter": false }
• Notes: set editor.defaultFormatter only if you use one formatter across languages. The codeActionsOnSave entry triggers ESLint fixes and organizes imports automatically. The files.exclude list reduces file tree noise.

4) Recommended keybindings to shave seconds off repetitive tasks

Extensions are great, but ergonomic keybindings are what make repetitive tasks feel fluid. Here are a few bindings to add to your keybindings.json. Keep them simple and conflict-free. Test them for collisions with OS-level shortcuts.

Add these to your user keybindings.json to speed up formatting, terminal toggling, and quick file opening.

• Example keybindings.json entries:
• { "key": "ctrl+alt+f", "command": "editor.action.formatDocument", "when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly" },
• { "key": "ctrl+`", "command": "workbench.action.terminal.toggleTerminal" },
• { "key": "ctrl+shift+t", "command": "workbench.action.reopenClosedEditor" },
• Mapping these consistently across machines via Settings Sync reduces context switching. Use ctrl+alt+f or your OS equivalent for format-on-demand if you prefer not to format on save.

5) Workspace and repo-level tips: enforce and automate

Workspace-level configuration is where teams win. Commit a .vscode/extensions.json and .vscode/settings.json to suggest or enforce extensions and settings for the repo. Use npm scripts or Makefiles for common dev tasks and expose them via the VS Code NPM Scripts view or a tasks.json.

Automate environment consistency using devcontainers or a simple .nvmrc and package.json engines field. This ensures the editor plus runtime are aligned across teammates and CI.

• Add .vscode/extensions.json to recommend core extensions to contributors.
• Add .vscode/settings.json to lock formatting and ESLint behavior at the repo level.
• Create tasks.json tasks for common flows (start, build, test, lint) to allow quick command palette execution.
• Use devcontainer.json to document node version and tools for zero-setup contributor onboarding.

6) Short workflow examples you can adopt immediately

Here are two minimal workflows with concrete steps you can copy. They assume the settings and extensions listed earlier are active.

Workflow 1: Quick feature branch cycle (edit → lint/fix → test → commit)

1) Open project, run npm install if needed. 2) Create branch: GitLens or built-in Git. 3) Make change, save (formatOnSave + ESLint fixes). 4) Run tests via the Testing view or npm script. 5) Stage and commit using the Source Control view with smart commit enabled.

• Workflow 2: Code review and investigation
• 1) Open the PR locally with the Git extension or fetch the branch. 2) Use GitLens to view line-level blame and history. 3) Run unit tests in the file with the Jest extension. 4) Use the renderer (DevTools or React DevTools extension when debugging) for DOM inspection.

7) Debugging, testing, and performance tips

VS Code's built-in debugger is strong for Node and browser debugging. Configure launch.json for common targets (attach to Node, launch Chrome for frontend). Keep tests fast by running only affected tests during tight feedback loops and running full suites in CI.

Performance: disable heavy UI features you don't use (e.g., builtin telemetry, automatic type acquisition for very large node_modules by setting 'typescript.disableAutomaticTypeAcquisition': true if it slows things down), and prefer workspace scoping for extensions like Docker or remote containers.

• Sample launch.json snippet for Node attach:
• { "version": "0.2.0", "configurations": [ { "type": "pwa-node", "request": "attach", "name": "Attach to Node", "port": 9229, "restart": false } ] }
• Use test runners' watch modes (Jest --watch) during development to keep iterations quick.

Conclusion

A compact, opinionated VS Code setup reduces cognitive load and makes your development loop faster and more reliable. The ten to fifteen extensions listed here cover linting, formatting, Git, testing, and small productivity wins without adding redundant features or bloat. Combine them with a small set of editor settings, a few ergonomic keybindings, and workspace-level configuration to lock in consistency across projects and teammates. Start by disabling everything, then install this focused set. Iterate: add one extension at a time and keep the list under constant review.

Action Checklist

1. Install the listed extensions selectively and enable workspace scoping for non-essential tools.
2. Add the provided settings.json snippet to your user or workspace settings, then move critical rules into project .vscode/settings.json.
3. Copy the keybindings.json entries and personalize them to avoid conflicts with your OS shortcuts.
4. Create .vscode/extensions.json and .vscode/settings.json in a sample repo to test onboarding for teammates.
5. Use Settings Sync to propagate this minimal setup across machines and periodically audit installed extensions.