How many extensions should I install?

Start with a small set—too many extensions slow startup and can conflict. Add more when you hit a real need.

ESLint and Prettier conflict—how do I fix it?

Use eslint-config-prettier to turn off ESLint rules that clash with Prettier, and run ESLint for logic, Prettier for formatting.

Remote vs local VS Code?

Remote - SSH, WSL, and Dev Containers are ideal when your code runs in another OS or container—keep tooling consistent there.

[2026] VS Code Productivity Extensions | Essential Setup for Web & Node Developers

2026년 3월 30일 · 12분 읽기 · 수정 2026년 3월 30일 Beginner Guide

이 글의 핵심

VS Code productivity: must-have extensions for JavaScript, TypeScript, and Node.js—ESLint, Prettier, GitLens, Path Intellisense, Error Lens, keyboard shortcuts, and workspace tips.

Introduction

Visual Studio Code is the default editor for many JavaScript, TypeScript, and Node.js teams. The base editor is light; extensions and settings turn it into a fast IDE. This guide lists high‑impact extensions and habits (shortcuts, format on save) that pay off every day without turning your install into a plugin zoo. For C++-specific setup, see the dedicated VS Code C++ guide; here the focus is web and Node.

Core language support
Quality and formatting
Navigation and Git
Optional niceties
Keyboard shortcuts
Settings checklist

Core language support

Extension	Why
ESLint (`dbaeumer.vscode-eslint`)	Surfaces JS/TS lint issues inline; respects project `.eslintrc`.
Prettier (`esbenp.prettier-vscode`)	Consistent formatting; pair with Format on Save.
TypeScript	Built-in; ensure workspace uses the workspace version of TypeScript when prompted (`TypeScript: Select TypeScript Version`).
Tip: In monorepos, open the folder that contains `package.json` so ESLint and TS resolve correctly.

Quality and formatting

Extension	Why
Error Lens (`usernamehw.errorlens`)	Prints diagnostics at the end of the line—great for fast scanning.
EditorConfig (`EditorConfig.EditorConfig`)	Honors `.editorconfig` for indent and charset across editors.
Prettier + ESLint: Add `eslint-config-prettier` in the project so ESLint does not fight Prettier on spacing and quotes.

Navigation and Git

Extension	Why
GitLens (`eamodio.gitlens`)	Inline blame, history, and comparisons—fewer trips to the terminal.
Path Intellisense (`christian-kohler.path-intellisense`)	Autocompletes file paths in imports.
Built-in Git is enough for stage/commit; GitLens shines for who changed this line and compare branches.

Optional niceties

Extension	Why
DotENV (`mikestead.dotenv`)	Highlights `.env` files (no secrets in Git).
Docker (`ms-azuretools.vscode-docker`)	Dockerfile linting and one-click compose from the IDE.
Thunder Client or REST Client	Lightweight API testing without leaving the editor.

Keyboard shortcuts

Action	macOS	Windows / Linux
Command palette	`Cmd+Shift+P`	`Ctrl+Shift+P`
Quick open file	`Cmd+P`	`Ctrl+P`
Go to symbol in file	`Cmd+Shift+O`	`Ctrl+Shift+O`
Multi-cursor	`Cmd+D`	`Ctrl+D`
Toggle terminal	Ctrl+`	Ctrl+`
Rename symbol	`F2`	`F2`

Settings checklist

Worth enabling in User or Workspace JSON: 아래 코드는 json를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true
}

Conclusion

Pick ESLint + Prettier, GitLens, and Error Lens first; add Docker and REST tools when you touch those workflows. Keep extensions few and purposeful, and use format on save plus ESLint fix on save so code style stops being a discussion topic.