VS Code Setup: Fira Code, Theme & Extensions for Developers

Why Your Editor Deserves 15 Minutes

You spend 6–8 hours a day inside VS Code. A beautiful, calm editor isn't vanity — it's stamina. Eye strain drops, code scans faster, and switching between projects stops hurting.

Here is my complete VS Code setup: Fira Code (Bold, size 20) with ligatures, One Dark Pro, Material Icons, and five small extensions. Everything also works in Cursor. Total setup time: around 15 minutes.

The Font Does 80% of the Work

The font is the single biggest visual upgrade. I use Fira Code at size 20, weight 700 (Bold), with programming ligatures on — so =>, !==, and <!-- render as single designed glyphs instead of scattered characters.

Install it first:

brew install --cask font-fira-code

Then add the settings that matter to your settings.json:

"editor.fontFamily": "'Fira Code',monospace",
"editor.fontSize": 20,
"editor.fontWeight": "700",
"editor.lineHeight": 30,
"editor.letterSpacing": 0.5,
"editor.fontLigatures": "'calt','liga','ss01','ss02','ss03','ss06','zero','cv02','cv31'",
"terminal.integrated.fontFamily": "'Fira Code',monospace",
"terminal.integrated.fontSize": 15,
"workbench.fontAliasing": "antialiased",
"editor.cursorStyle": "line",
"editor.cursorBlinking": "smooth",
"editor.cursorWidth": 2

Why each one matters: Bold (700) stays crisp on Retina displays, where Regular looks washed out at large sizes. Line height 30 gives dense code room to breathe. Letter spacing 0.5 opens up Fira Code's wide glyphs. The ss01/ss02/ss06 flags unlock alternate glyph styles, and zero gives you a slashed zero so 0 and O are never confused. The terminal gets the same family so the whole window speaks one visual language.

Type !== === => -> to verify — if the arrows join into single glyphs, ligatures are live.

One Dark Pro + Material Icons

code --install-extension zhuangtongfa.material-theme
code --install-extension PKief.material-icon-theme

"workbench.colorTheme": "One Dark Pro",
"workbench.iconTheme": "material-icon-theme"

One Dark Pro is the most-used VS Code theme for a reason: a warm dark background with real syntax hierarchy — keywords, strings, and types are instantly distinguishable. Material Icons make the Explorer scannable: you recognize page.tsx versus page.test.ts by icon before reading the name.

5 Extensions That Earn Their Place

code --install-extension usernamehw.errorlens \
  --install-extension johnpapa.vscode-peacock \
  --install-extension naumovs.color-highlight \
  --install-extension oderwat.indent-rainbow \
  --install-extension christian-kohler.path-intellisense

• Error Lens — errors and warnings appear inline at the end of the line. You stop playing "hover the squiggle" and just fix things. Keep it to errors and warnings so hints don't paint your file yellow:

  "errorLens.enabledDiagnosticLevels": ["error", "warning"]
  

• Peacock — colors each project's title bar differently. My practice project is emerald green, my Next.js app is indigo. You will never run a command in the wrong window again.
• Color Highlight — every #3b5bdb or rgb(...) gets its color as a background. Instant win for Tailwind and CSS work.
• Indent Rainbow — faint indent guides for nested JSX and callbacks. Use the light style so it whispers instead of shouting.
• Path Intellisense — autocomplete for import paths. Small, invisible, saves hundreds of keystrokes a day.

Declutter: Less Chrome, More Code

"editor.minimap.enabled": false,
"editor.renderWhitespace": "boundary",
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true,
"workbench.startupEditor": "none",
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true

The minimap is a thumbnail you never read — disable it and reclaim 100px. Bracket-pair colorization does more for navigating nested React components than the minimap ever did. Trimming trailing whitespace keeps your diffs clean without thinking about it.

One Setup on Every Machine

Global settings cover the look. Per-project .vscode/settings.json files cover behavior — formatter, import style, ignored folders — and travel with the repo so teammates get them free:

"[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"editor.formatOnSave": true,
"editor.codeActionsOnSave": { "source.organizeImports": "explicit" }

Turn on Settings Sync (gear icon → Backup and Sync Settings, sign in with GitHub) and this entire look follows you to every machine. Cursor users: Cursor Settings → VS Code Import copies it all over in one click.

Interview Mode: Know When to Turn It All Off

One honest warning I give every mentee: disable AI suggestions before interviews. Ghost text appearing on a shared screen looks like assistance even when you ignore it. I keep a separate VS Code Profile named Interview with zero AI extensions and:

"editor.inlineSuggest.enabled": false,
"github.copilot.enable": { "*": false }

Daily practice means the full setup with suggestions on. Interview window means sterile. Switch profiles and share only that window.

Your Turn

Start with the font. It is one install and a few settings, and you will feel the difference before lunch.

And if you want a senior engineer to review not just your editor but your actual interview prep — DSA, frontend rounds, system design — book a 1:1 mentorship session on Mentoxis. You can also sharpen your skills anytime with our free frontend question bank.