VS Code Productivity Extensions

Why Extension Choice Matters

VS Code ships as a lightweight editor. The extension ecosystem is what makes it a productive IDE — but it is easy to go wrong by installing too many or the wrong ones. The most common failure modes:

• Too many extensions: slow startup, conflicting formatters, confusing settings
• Formatter conflicts: ESLint and Prettier fighting over the same file
• Wrong TypeScript version: VS Code using its bundled version instead of your project’s version

This guide covers a minimal, high-impact set that covers the daily workflow for JavaScript and TypeScript development.

---

Core Extensions

1. ESLint (dbaeumer.vscode-eslint)

ESLint integration shows lint errors inline as you type — before you save, before CI runs:

• Red squiggles under actual code problems (unused variables, missing dependencies in useEffect, etc.)
• Respects your project’s .eslintrc or eslint.config.js
• Auto-fix on save when configured (see Settings section)

Important: open the folder that contains package.json as the workspace root. ESLint resolves plugins and rules relative to the closest config file — if VS Code opens a parent directory, it may not find your project’s configuration.

2. Prettier (esbenp.prettier-vscode)

Prettier handles consistent formatting so your team never debates tabs vs spaces, quote styles, or trailing commas:

• Formats on save when editor.formatOnSave is enabled
• Reads .prettierrc or prettier.config.js from your project root
• Works across JS, TS, JSON, CSS, HTML, Markdown

Prettier + ESLint together: install eslint-config-prettier in your project to turn off ESLint’s formatting rules:

npm install -D eslint-config-prettier

// .eslintrc or eslint.config.js
{
  "extends": ["...", "prettier"]
}

Now ESLint handles code quality, Prettier handles formatting, no conflicts.

3. TypeScript (built-in — configure it right)

TypeScript support is built in, but you need to tell VS Code to use your project’s TypeScript version:

1. Open a .ts file
2. Open Command Palette (Cmd+Shift+P)
3. Type “TypeScript: Select TypeScript Version”
4. Choose “Use Workspace Version”

Your project’s node_modules/typescript now drives type checking. This ensures you get accurate errors based on the TypeScript version your project actually uses.

---

Quality and Error Visibility

4. Error Lens (usernamehw.errorlens)

Error Lens prints diagnostic messages at the end of the problem line, inline, without you needing to hover:

const x: string = 42  // Type 'number' is not assignable to type 'string'.

Instead of hunting for underlines and hovering to read error messages, you see the problem immediately. This is the single biggest time-saver in the list for TypeScript development.

5. EditorConfig (EditorConfig.EditorConfig)

If your project has a .editorconfig file, this extension enforces indent size, charset, and line endings automatically. Particularly useful on cross-platform teams where some developers use Windows and others use macOS.

# .editorconfig
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

---

Navigation and Git

6. GitLens (eamodio.gitlens)

GitLens adds git context throughout the editor without leaving the file you’re reading:

• Inline blame: see who wrote each line and when, right in the editor
• File history: compare the current file with any previous version
• Branch comparison: diff two branches inline
• Commit search: find when a specific change was made

The built-in Git panel is enough for staging and committing. GitLens is for investigation — understanding why code was written a certain way, who owns a confusing section, or when a bug was introduced.

7. Path Intellisense (christian-kohler.path-intellisense)

Autocompletes file paths in import statements as you type:

import { something } from './utils/   // shows directory contents as you type

Especially useful in projects with deep directory structures where you might not remember the exact path.

---

Workflow-Specific Extensions

Add these when they match your actual work — not before:

REST Client (humao.rest-client)

Write HTTP requests in .http files and run them with a click:

### Get user
GET https://api.example.com/users/1
Authorization: Bearer {{token}}

### Create user
POST https://api.example.com/users
Content-Type: application/json

{
  "name": "Alice",
  "email": "[email protected]"
}

Useful for API development and testing without leaving the editor. Alternative: Thunder Client for a more GUI-like experience.

Docker (ms-azuretools.vscode-docker)

For projects with Docker:

• Dockerfile syntax highlighting and linting
• Manage containers, images, and volumes from the sidebar
• One-click compose up/down for development stacks

DotENV (mikestead.dotenv)

Syntax highlighting for .env files. Simple but makes them easier to read, especially large ones. The extension also helps you notice when a variable value accidentally spans multiple lines.

---

Keyboard Shortcuts Worth Memorizing

These are built into VS Code — no extensions needed:

Action	macOS	Windows / Linux
Command palette	Cmd+Shift+P	Ctrl+Shift+P
Quick open file	Cmd+P	Ctrl+P
Go to definition	F12	F12
Peek definition	Opt+F12	Alt+F12
Go to symbol in file	Cmd+Shift+O	Ctrl+Shift+O
Go to symbol in workspace	Cmd+T	Ctrl+T
Rename symbol	F2	F2
Multi-cursor word	Cmd+D	Ctrl+D
Toggle terminal	Ctrl+`	Ctrl+`
Split editor	Cmd+\	Ctrl+\
Toggle sidebar	Cmd+B	Ctrl+B
Format document	Shift+Opt+F	Shift+Alt+F

The most valuable shortcut that new VS Code users miss: Cmd+P (Quick Open). Type part of a filename to jump directly to it — faster than navigating the file tree.

---

Settings JSON

The settings that make the extensions above work well together:

{
  // Format on save — Prettier runs when you save
  "editor.formatOnSave": true,

  // Use Prettier as the default formatter
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // ESLint: auto-fix fixable issues on save
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // TypeScript: workspace version (set per-project)
  "typescript.tsdk": "node_modules/typescript/lib",

  // Consistent line endings
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,

  // Error display
  "editor.showUnused": true,
  "typescript.preferences.includePackageJsonAutoImports": "auto",

  // Performance — disable telemetry
  "telemetry.telemetryLevel": "off"
}

Save this in .vscode/settings.json in the project root to share the configuration with the whole team.

---

Debugging Setup

VS Code’s built-in debugger works well for Node.js with minimal configuration. Add a .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Node.js",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/src/index.ts",
      "runtimeArgs": ["-r", "ts-node/register"],
      "sourceMaps": true,
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    },
    {
      "name": "Debug Tests (Jest)",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npx",
      "runtimeArgs": [
        "jest",
        "--runInBand",  // run tests serially so debugger works
        "--testPathPattern", "${relativeFile}"
      ],
      "console": "integratedTerminal",
      "sourceMaps": true
    }
  ]
}

Set breakpoints in TypeScript source files — the source maps handle the translation to compiled JavaScript automatically.

---

Common Setup Problems

“Format on save isn’t working”

Check that Prettier is set as the default formatter. If multiple formatters are installed (e.g., a language extension also includes a formatter), VS Code may prompt you to choose. Run “Format Document With…” to see which formatters are available and select Prettier.

“ESLint shows no errors but CI fails”

VS Code uses the ESLint extension; CI runs eslint from the command line. They should both use the same config file, but check that the extension is loading the right config (look at the ESLint output panel for the config path it found).

“TypeScript errors in VS Code but not on the command line”

Check which TypeScript version each is using. If tsc uses your project’s TypeScript (from node_modules) but VS Code is using its bundled version, the behavior can differ. Run “TypeScript: Select TypeScript Version” and choose “Use Workspace Version.”

---

Key Takeaways

• ESLint + Prettier + eslint-config-prettier is the standard formatting stack — separate concerns, no conflicts
• Error Lens makes TypeScript errors visible at a glance without hovering — install it immediately
• GitLens is for understanding history and blame — not for basic staging/committing
• Use workspace TypeScript version — always, in every project
• Keep extensions to the essentials: every additional extension adds startup time and potential conflicts
• Share .vscode/settings.json and .vscode/launch.json with the team so everyone gets the same setup

---

자주 묻는 질문 (FAQ)

Q. 이 내용을 실무에서 언제 쓰나요?

A. VS Code productivity: must-have extensions for JavaScript, TypeScript, and Node.js — ESLint, Prettier, GitLens, Error Le… 실무에서는 위 본문의 예제와 선택 가이드를 참고해 적용하면 됩니다.

Q. 선행으로 읽으면 좋은 글은?

A. 각 글 하단의 이전 글 또는 관련 글 링크를 따라가면 순서대로 배울 수 있습니다. C++ 시리즈 목차에서 전체 흐름을 확인할 수 있습니다.

Q. 더 깊이 공부하려면?

A. cppreference와 해당 라이브러리 공식 문서를 참고하세요. 글 말미의 참고 자료 링크도 활용하면 좋습니다.

---

같이 보면 좋은 글 (내부 링크)

이 주제와 연결되는 다른 글입니다.

• [TypeScript Type Narrowing Complete Guide | Unions](/en/blog/typescript-type-narrowing-guide/
• [JavaScript Promise & async/await Complete Guide](/en/blog/javascript-promise-async-await-guide/
• [GitHub Actions CI/CD Guide | Workflows· Secrets](/en/blog/github-actions-ci-cd-guide/

---

이 글에서 다루는 키워드 (관련 검색어)

VS Code, Visual Studio Code, Extensions, Productivity, JavaScript, TypeScript 등으로 검색하시면 이 글이 도움이 됩니다.