Maame Afua A. P. Fordjour

Posted on Dec 12

My Ultimate VS Code Setup for 2025 (Extensions, Fonts, and Themes)

#vscode #webdev #tooling #productivity

Let’s be real for a second: we judge other developers by their terminal setup.

I used to be a "Config Addict." I spent more time tweaking my settings.json than actually shipping code. I’ve been down the rabbit hole of neon themes, obscure fonts, and trying to make my IDE look like the mainframe from The Matrix.

But in 2025, I’m done with the clutter. I’ve finally settled on a "Holy Grail" setup that balances aesthetic joy with raw, unadulterated speed.

This isn't just a list of plugins. This is the exact battle-tested environment I use to stay in the flow state. 👇

1. The Vibe Check (Aesthetics) 🎨

If you’re going to stare at a glowing rectangle for 8 hours a day, it better look gorgeous.

The Theme: Catppuccin (Mocha) 🍭
Rest in peace, Dracula. I’ve officially switched to Catppuccin. Why? It’s a low-contrast, pastel-based theme that feels like a warm hug for your retinas. High-contrast themes look cool for 5 minutes but give you a headache after 5 hours. Catppuccin is designed for the marathon, not the sprint.

My Pick: Catppuccin Mocha (The darkest, cleanest variant)

The Icons: Material Icon Theme 📂
Your brain processes images 60,000x faster than text. Don't read "component.tsx"—just look for the React logo. Material Icon Theme is the gold standard. It turns your file tree into a visual map that you can navigate on autopilot.

2. Typography is King 👑

Font: JetBrains Mono
There was a lot of hype around Monaspace recently, but I keep coming back to JetBrains Mono.

The killer feature? Ligatures. If you aren't using ligatures, you are coding in the Stone Age. It combines characters like =>, !=, and === into single, beautiful mathematical symbols. It forces your brain to read the logic, not just the syntax soup.

The Config:

"editor.fontFamily": "JetBrains Mono, monospace",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"editor.lineHeight": 1.6, // Let your code breathe!

3. God-Tier Extensions ⚡

Everyone uses Prettier. That’s boring. Here are the tools that actually give you superpowers.

🚨 Error Lens
This is non-negotiable. Error Lens takes that tiny red squiggle and screams the error message inline right next to your code.

The Old Way: Hover mouse -> Wait 1s -> Squint at tooltip. 🐢

The New Way: See the error instantly as you type. 🐇

🥷 Console Ninja
Stop context-switching to your browser console. Console Ninja pipes your console.log output directly into your editor, next to the line that generated it. It feels illegal to debug this fast.

💅 Pretty TypeScript Errors
We all know the pain: Type 'undefined' is not assignable to type... [Wall of Text]. This extension formats those nasty JSON-like error blobs into human-readable, syntax-highlighted blocks. It turns a headache into a checklist.

4. Zen Mode (UI Tweaks) 🧘‍♂️

I prefer a setup where the UI gets out of the way. I want to see code, not buttons. Add these to your settings.json to reclaim your screen real estate:

{
  // Minimaps are for tourists. We know where we are.
  "editor.minimap.enabled": false,

  // Move the "Activity Bar" to the bottom (Clean look)
  "workbench.activityBar.location": "bottom",

  // smooth scrolling = premium feel 
  "editor.smoothScrolling": true,
  "terminal.integrated.smoothScrolling": true
}

5. The Command Center (Terminal) 🕹️

The integrated terminal is my home. I use Starship as my prompt. It’s written in Rust (blazingly fast 🦀) and gives you instant context:

Current Git Branch 🌿

Node/Python/Go version 🐍

Package version 📦

It makes you feel like you're piloting a spaceship, not just running npm start.

Summary
You don't need 50 extensions to be a "10x Developer." You just need to reduce cognitive load.

Look good (Catppuccin) 🍭

Read fast (Ligatures + Material Icons) 📖

Debug instantly (Error Lens + Console Ninja) ⚡

👇 I’m looking to break things. What is ONE obscure extension you use that nobody else knows about?

DEV Community