DEV Community

Alex Chen
Alex Chen

Posted on

12 VS Code Extensions I Install on Every New Setup (2026)

#productivity #programming #tooling #vscode

12 VS Code Extensions I Install on Every New Setup (2026)

I've tried hundreds. These are the ones that actually make me faster.

The Essentials

1. Error Lens

Shows error/warning messages inline, right next to the code. No more hovering over red squiggles.

Why it matters: I estimate this saves me 30+ minutes per day. No more moving my mouse to see what's wrong.

2. GitHub Copilot

AI-powered code completion. Not perfect, but consistently saves keystrokes.

Pro tip: Use Tab to accept, then edit. Don't blindly accept full suggestions — they often need tweaking.

3. GitLens

Git blame, history, and diff — without leaving the editor.

My most-used feature: Ctrl+Shift+P → "GitLens: Open Changed Files" after pulling. Instantly see what changed.

4. TODO Highlight

Highlights TODO, FIXME, HACK, and BUG comments in your code.

Why: Makes it impossible to forget about the shortcuts you left for yourself.

Productivity

5. Multi Command

Run multiple VS Code commands with one keybinding.

// keybindings.json
[
  {
    "key": "ctrl+shift+f12",
    "command": "multiCommand.execute",
    "args": {
      "sequence": [
        "editor.action.formatDocument",
        "editor.action.organizeImports",
        "eslint.executeAutofix"
      ]
    }
  }
]
Enter fullscreen mode Exit fullscreen mode

One shortcut to format + sort imports + fix lint errors. I use this before every commit.

6. Auto Rename Tag

Rename an HTML/XML tag and it automatically renames the closing tag.

Small thing. Huge time saver when refactoring JSX.

7. Path Intellisense

Autocomplete for file paths in import statements.

import Header from '@/components/Header'; // ✅ Autocompleted
import styles from './sty';               // ✅ Shows ./styles.module.css
Enter fullscreen mode Exit fullscreen mode

8. Copy Relative Path

One click to copy the file path relative to your project root. Essential for imports and documentation.

My binding: Ctrl+Shift+C (custom, overrides default copy)

Code Quality

9. ESLint

JavaScript/TypeScript linting. Non-negotiable.

npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
Enter fullscreen mode Exit fullscreen mode

10. Prettier

Consistent formatting across your entire team. Zero arguments about tabs vs spaces.

npm install -D prettier
# Set as default formatter in VS Code settings:
// "editor.defaultFormatter": "esbenp.prettier-vscode"
Enter fullscreen mode Exit fullscreen mode

11. Error Gutters

Shows errors and warnings as gutter icons (like git blame markers). Visual overview of file health.

12. Inline Parameters

Shows parameter names inline when calling functions. Makes code self-documenting without extra comments.

// Without extension:
createUser("Alex", "alex@example.com", true);

// With extension:
createUser(name: "Alex", email: "alex@example.com", isAdmin: true);
Enter fullscreen mode Exit fullscreen mode

Theme & Aesthetics

Bonus: One Dark Pro

The most popular dark theme. Easy on the eyes, good contrast. Not revolutionary — just comfortable.

Bonus 2: Material Icon Theme

File icons that actually help you identify file types at a glance. React components, test files, configs — all visually distinct.

Settings That Make a Difference 

// settings.json
{
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', monospace",
  "editor.fontLigatures": true,
  "editor.minimap.enabled": false,
  "editor.renderWhitespace": "boundary",
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit",
    "source.fixAll.eslint": "explicit"
  },
  "terminal.integrated.fontSize": 13,
  "workbench.colorTheme": "One Dark Pro",
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "git.autofetch": true,
  "git.confirmSync": false,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true
}
Enter fullscreen mode Exit fullscreen mode

Most impactful settings:

  • formatOnSave — never manually format again
  • minimap.enabled: false — less visual noise
  • fontLigatures — != becomes ≠, >= becomes ≥ (subtle but nice)
  • codeActionsOnSave — auto-fix lint + sort imports on save

What I DON'T Use

Extension Why I Skipped It
Tabnine/Codium Copilot is good enough
Bracket Colorizer Built into VS Code now
Live Server Use native preview or dev server
REST Client Use HTTP files or Bruno
Docker extension CLI is faster

The Install Script

Save time on fresh machines:

code --install-extension usernamehw.errorlens
code --install-extension GitHub.copilot
code --install-extension eamodio.gitlens
code --install-extension wayou.vscode-todo-highlight
code --install-extension ryuta46.multi-command
code --install-extension formulahendry.auto-rename-tag
code --install-extension christian-kohler.path-intellisense
code --install-extension angular.ng-template
code --install-extension waderyan.copy-relative-path
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension UsernameHW.error-gutters
code --install-extension octref.vetur
code --install-extension PKief.material-icon-theme
code --install-extension zhuangtongfa.material-theme
Enter fullscreen mode Exit fullscreen mode

What extensions can't you live without? Drop your list in the comments.

Follow @armorbreak for more developer productivity content.

Top comments (0)