VS Code Productivity Extensions | Essential Setup for Web & Node Developers
이 글의 핵심
Curated VS Code extensions and habits that save time: format on save, inline errors, Git blame, path completion, and a short list of shortcuts power users rely on.
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.
Table of contents
- 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:
{
"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.