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": "alice@example.com"
}

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

---

Frequently Asked Questions (FAQ)

Q. When would I use this in practice?

A. VS Code productivity: must-have extensions for JavaScript, TypeScript, and Node.

Q. What should I read before this?

A. Follow the previous article or related articles links at the bottom of each post to learn in sequence.

Q. Where can I study this more deeply?

A. Check cppreference and the relevant library’s official documentation. The reference links at the end of the article are also worth using.

---

Related Articles (Internal Links)

Other articles related to this topic.

• TypeScript Type Narrowing Complete Guide | Unions
• JavaScript Promise & async/await Complete Guide
• GitHub Actions CI/CD Guide | Workflows· Secrets

---

Keywords Covered in This Article (Related Search Terms)

This article covers VS Code, Visual Studio Code, Extensions, Productivity, JavaScript, TypeScript.