DEV Community

Alex Chen
Alex Chen

Posted on

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

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

These extensions make me 2x more productive. Here's my must-have list.

Productivity

1. GitHub Copilot

AI pair programmer that suggests code as you type. The single biggest productivity boost.

- Inline suggestions as you type
- Chat panel for questions
- Can generate entire functions from comments
- $10/month — pays for itself in hours saved
Enter fullscreen mode Exit fullscreen mode

2. Error Lens

Highlights errors and warnings directly in the editor — no need to hover or check Problems panel.

// Instead of squiggly lines you have to hover over:
// You see the error message RIGHT THERE:
const x: number = "hello"; 
// Type 'string' is not assignable to type 'number'  ← inline error!
Enter fullscreen mode Exit fullscreen mode

3. Multi Cursor Case Preserve

Preserves casing when multi-cursor editing. Tiny but saves daily frustration.

Normal multi-cursor rename:
user_name → userName → userName ✓
user_name → userName → user_name (cursor on different positions)

With extension: consistent casing across all cursors
Enter fullscreen mode Exit fullscreen mode

Code Quality

4. ESLint

Catches bugs and enforces style. Non-negotiable.

// .eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "no-unused-vars": "error",
    "no-console": "warn",
    "@typescript-eslint/no-explicit-any": "error"
  }
}
Enter fullscreen mode Exit fullscreen mode

5. Prettier

Auto-formats code on save. Never argue about formatting again.

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100
}
Enter fullscreen mode Exit fullscreen mode

6. TypeScript Error Translator

Translates cryptic TypeScript errors into plain English.

// Before:
"Type 'string' is not assignable to type 'number'"

// After:
"You're trying to assign text (string) where a number is expected.
 Change the type to string, or convert the value to a number."
Enter fullscreen mode Exit fullscreen mode

Git

7. GitLens

Supercharges Git inside VS Code. See who wrote each line, when, and why.

Features I use daily:
- Inline blame annotations (see who wrote each line)
- File history (right-click → Open File History)
- Compare branches visually
- Search commits across all repos
- Rich commit search and navigation
Enter fullscreen mode Exit fullscreen mode

8. Git Graph

Visual Git branch graph. See your branch structure at a glance.

Features:
- Interactive commit graph
- Create/checkout/delete branches visually
- Cherry-pick, merge, rebase from the graph
- Compare any two commits
Enter fullscreen mode Exit fullscreen mode

Appearance

9. One Dark Pro

The most popular VS Code theme. Easy on the eyes, great syntax highlighting.

- 2M+ installs for a reason
- Multiple variants (Bold, Italic, etc.)
- Works with all languages
Enter fullscreen mode Exit fullscreen mode

10. Material Icon Theme

Beautiful file icons that help you identify file types instantly.

- Icons for 500+ file types
- Custom folder colors
- TypeScript files ≠ JavaScript files (visual distinction)
- Easy to scan large project directories
Enter fullscreen mode Exit fullscreen mode

Snippets & Shortcuts

11. ES7+ React/Redux/React-Native Snippets

Type rfc → get a full React functional component. Saves typing boilerplate.

rfc → Functional component with export
rfce → Functional component with named export
rcc → Class component
rpce → Pure component
custom hook → Custom React hook template
usf → useState with function
Enter fullscreen mode Exit fullscreen mode

12. Auto Rename Tag

Automatically rename paired HTML/JSX tags.

// Before: Change <div> to <section>
<div>
  <h1>Title</h1>
</div>  ← Also changes to </section>!

// Saves time in JSX/HTML editing
Enter fullscreen mode Exit fullscreen mode

Honorable Mentions 

- Thunder Client (REST API testing, built-in, no Postman needed)
- Docker (manage containers from VS Code)
- YAML (validation for docker-compose, k8s, CI configs)
- TODO Highlight (highlights TODO/FIXME/HACK comments)
- indent-rainbow (color-coded indentation levels)
- Code Spell Checker (catches typos in variable names and comments)
- REST Client (send HTTP requests from .http files)
- Path Intellisense (autocomplete file paths in imports)
- Console Ninja (shows console.log output inline)
Enter fullscreen mode Exit fullscreen mode

My Settings.json Additions 

{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.minimap.enabled": false,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.inlineSuggest.enabled": true,
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "terminal.integrated.scrollback": 10000
}
Enter fullscreen mode Exit fullscreen mode

Which VS Code extensions can't you live without?

Follow @armorbreak for more developer content.

Top comments (0)