After trying a few editors over the years, I've settled on Visual Studio Code. It strikes the right balance between being lightweight and feature-rich — startup is fast, IntelliSense is excellent, and the extension ecosystem covers everything I need for web design and frontend development.
Built by Microsoft and released as open-source, VS Code has become the de facto standard for web development — and for good reason. What keeps me on it:
⌥ + click to place multiple cursors, ⌘D to select next occurrence; this alone saves hours⌘⇧P gives you instant access to every command and settingI prefer dark themes with enough contrast to read code comfortably for long sessions. My current go-to is One Dark Pro — muted but readable, with a color palette that's easy on the eyes without washing everything out.
For the font, I use JetBrains Mono with font ligatures enabled. The ligatures turn things like =>, !==, and <= into clean single glyphs — makes scanning code significantly faster.
I keep my extension list lean. Every extension has a startup cost, so I only install things that genuinely improve my daily workflow.
Surfaces linting errors inline as I write — catches bugs and style violations before they make it into a commit.
Auto-formats on save. I stopped thinking about indentation and semicolons years ago because of this.
Autocomplete for Tailwind utility classes, including hover/focus variants. Essential for any Tailwind project.
Inline git blame, commit history per line, and a rich diff view. Makes understanding a codebase's history effortless.
Renames the closing HTML/JSX tag automatically when I edit the opening one. Tiny but surprisingly time-saving.
Autocompletes file paths in import statements. No more guessing relative paths or navigating the file tree.
Snippet shortcuts like `rafce` to scaffold a React functional component in seconds.
Shows a color swatch next to any hex, rgb, or hsl value directly in the editor. Great when working with design tokens.
Out of the box VS Code is good, but a few tweaks make it feel more at home. Here are the ones I apply on every fresh install:
"editor.formatOnSave": true. Prettier runs every time I hit ⌘S, so the code is always clean without me thinking about it."editor.wordWrap": "on". Horizontal scrolling for long lines is a flow-breaker."editor.fontLigatures": true. Combined with JetBrains Mono, this makes operators much cleaner to read."editor.bracketPairColorization.enabled": true. Built-in since VS Code 1.67 — no extension needed. Makes nested brackets trackable at a glance."editor.minimap.enabled": false. I find the minimap more distracting than useful — the extra horizontal space is worth more to me.