Nick Paolini Logo
Contact

My VSCode Setup in 2025

December 1, 2025
Nick Paolini
9 min read
VSCodeProductivityDeveloper ToolsWorkflow
My VSCode Setup in 2025

I've been using VSCode as my primary editor for years now, and my setup has evolved quite a bit. I've tried probably hundreds of extensions, countless themes, and experimented with different workflows. Here's what I've settled on - the stuff that actually makes a difference.

The Foundation: Settings

Before we get to extensions, here are the settings that form the foundation of my setup. These are in my settings.json:

{
  // Editor basics
  "editor.fontSize": 14,
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', Menlo, Monaco, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.lineHeight": 1.6,
  "editor.tabSize": 2,
 
  // Quality of life
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.linkedEditing": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
 
  // Minimap (I turned it off)
  "editor.minimap.enabled": false,
 
  // File management
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
 
  // Terminal
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.fontFamily": "'JetBrains Mono', monospace",
 
  // Workbench
  "workbench.colorTheme": "Tokyo Night Storm",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.startupEditor": "none",
  "workbench.editor.enablePreview": false,
 
  // Zen mode for deep focus
  "zenMode.centerLayout": false,
  "zenMode.hideLineNumbers": false,
}

Why These Settings Matter

Font ligatures - Makes code more readable with combined characters (like => becoming a single arrow). JetBrains Mono is excellent for this.

Format on save - Controversial, but I love it. No more thinking about formatting, it just happens.

Linked editing - When you rename an HTML tag, it automatically renames the closing tag. Small thing, huge time saver.

Auto save on focus change - I used to lose work switching between terminal and editor. Never again.

Disable minimap - Unpopular opinion: the minimap wastes screen space. If your files are so long you need a minimap, they're probably too long.

Essential Extensions

I try to keep my extension list minimal. Here are the ones I actually use daily:

1. Prettier - Code Formatter

This is non-negotiable. Consistency across the team, zero arguments about formatting.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

2. ESLint

Catches errors before they make it to production. Configure it once, forget about it.

The extension auto-fixes on save if you add:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

3. GitLens

Game changer for understanding code history. Inline blame annotations show who changed what and when, right in the editor.

Key features I use:

  • Inline blame (see the last commit for each line)
  • File history view
  • Compare branches/commits
  • Line history for tracking down bugs

4. Error Lens

Shows errors and warnings inline, right next to the code. No more hovering or checking the problems panel.

{
  "errorLens.fontSize": "13",
  "errorLens.enabledDiagnosticLevels": ["error", "warning"]
}

5. Auto Rename Tag

Automatically renames paired HTML/XML tags. Works beautifully with JSX.

6. Import Cost

Displays the size of imported packages inline. Helps catch bloated imports early.

import moment from 'moment' // 💰 229.4KB
import dayjs from 'dayjs' // 💰 6.5KB

Eye-opening for bundle size optimization.

7. TODO Highlight

Highlights TODO, FIXME, NOTE comments. Makes them impossible to miss.

// TODO: Refactor this later
// FIXME: This breaks on edge case
// NOTE: Important context here

8. Path Intellisense

Autocompletes file paths. Essential for imports and avoiding typos.

9. Better Comments

Color-codes different types of comments:

// ! Deprecated code
// ? Query: why does this work?
// TODO: Implement feature
// * Important note

10. Console Ninja

Shows console.log output right in the editor. No more switching to the browser console constantly.

Language-Specific Extensions

JavaScript/TypeScript

  • TypeScript Error Translator - Converts cryptic TS errors into plain English
  • Pretty TypeScript Errors - Makes error messages actually readable

React

  • ES7+ React/Redux/React-Native snippets - Shortcuts like rafce for functional components
  • React Developer Tools - Though I mostly use the browser extension

CSS/Tailwind

  • Tailwind CSS IntelliSense - Autocomplete for Tailwind classes, must-have if you use Tailwind
  • CSS Peek - Jump to CSS definitions from HTML

Keybindings That Changed Everything

I've customized a bunch of keybindings. Here are the ones I use constantly:

[
  // Quick terminal toggle
  {
    "key": "cmd+j",
    "command": "workbench.action.terminal.toggleTerminal"
  },
 
  // Duplicate line (like in Sublime)
  {
    "key": "cmd+shift+d",
    "command": "editor.action.copyLinesDownAction"
  },
 
  // Delete line
  {
    "key": "cmd+shift+k",
    "command": "editor.action.deleteLines"
  },
 
  // Move line up/down
  {
    "key": "alt+up",
    "command": "editor.action.moveLinesUpAction"
  },
  {
    "key": "alt+down",
    "command": "editor.action.moveLinesDownAction"
  },
 
  // Navigate between editor groups
  {
    "key": "cmd+1",
    "command": "workbench.action.focusFirstEditorGroup"
  },
  {
    "key": "cmd+2",
    "command": "workbench.action.focusSecondEditorGroup"
  },
 
  // Close other editors
  {
    "key": "cmd+alt+w",
    "command": "workbench.action.closeOtherEditors"
  },
 
  // Zen mode for focus sessions
  {
    "key": "cmd+k z",
    "command": "workbench.action.toggleZenMode"
  }
]

The Shortcuts I Actually Use

Cmd+P - Quick file open. Type part of a filename, instantly open it. I probably use this 100+ times a day.

Cmd+Shift+P - Command palette. Access any VSCode command. Learning this was a game-changer.

Cmd+Shift+F - Global search. Find anything across your entire project.

Cmd+D - Multi-cursor select. Select the next occurrence of current word. Hit it multiple times, edit all at once.

Cmd+Shift+L - Select all occurrences. Like Cmd+D but gets them all instantly.

Alt+Click - Add cursors anywhere. Multiple cursor editing is powerful once you get used to it.

Cmd+/ - Toggle line comment. Works in every language.

Workflow Optimizations

1. Workspaces for Different Projects

I use VSCode workspaces to save project-specific settings and open files. Each client project gets its own workspace.

Save with: File > Save Workspace As...

2. Split Editors Strategically

I usually run a 2-column layout:

  • Left: Component file
  • Right: Test file or related component

Cmd+\ to split editor, Cmd+1/2 to switch between them.

3. Integrated Terminal Workflow

I keep 3 terminal instances open:

  1. Dev server (npm run dev)
  2. Git commands
  3. General purpose (file operations, installs, etc.)

Cmd+J to toggle terminal visibility, backtick to cycle between instances.

4. Snippets for Repetitive Code

Custom snippets save so much time. Here's one I use constantly:

{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "interface ${1:ComponentName}Props {",
      "  $2",
      "}",
      "",
      "export function ${1:ComponentName}({ $3 }: ${1:ComponentName}Props) {",
      "  return (",
      "    <div>",
      "      $4",
      "    </div>",
      "  )",
      "}"
    ],
    "description": "React Functional Component with TypeScript"
  }
}

Type rfc, hit Tab, and you've got a full component scaffold.

5. Project-Specific Settings

Each project can have a .vscode/settings.json:

{
  "editor.tabSize": 4,
  "files.exclude": {
    "**/node_modules": true,
    "**/.next": true,
    "**/dist": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.next": true
  }
}

Keeps the sidebar clean and search results relevant.

Theme: Tokyo Night Storm

I've tried dozens of themes. Tokyo Night Storm is the one I keep coming back to.

Why I like it:

  • Easy on the eyes - Not too bright, not too dark
  • Good contrast - Comments are visible but not distracting
  • Consistent colors - Similar syntax elements use similar colors across languages
  • Active development - Regularly updated for new language features

Alternatives I've liked:

  • One Dark Pro - If you prefer Atom-style
  • Dracula - Classic, great contrast
  • GitHub Dark Dimmed - If you work on GitHub a lot

What I Removed

Extensions I tried but ultimately uninstalled:

Bracket colorizers - Built into VSCode now, no extension needed

Live Share - Great concept, but I rarely pair program remotely

Code spell checker - Caught typos but had too many false positives in code

Peacock - Changes VSCode color per workspace. Cool idea, but I found it distracting

WakaTime - Time tracking felt like surveillance. If you like data, you might like it.

Performance Tips

Extensions slow down VSCode. Here's how to keep it fast:

Check Extension Performance

Cmd+Shift+P → "Developer: Show Running Extensions"

Sort by activation time. If something takes >500ms, consider if you really need it.

Disable Extensions Per Workspace

Some extensions only make sense for certain projects:

Right-click extension → "Disable (Workspace)"

Exclude Folders from Search

{
  "files.exclude": {
    "**/node_modules": true,
    "**/.git": true,
    "**/.DS_Store": true,
    "**/dist": true,
    "**/.next": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true,
    "**/.next": true,
    "**/coverage": true
  }
}

Massively speeds up search and reduces sidebar clutter.

The Setup Process for New Machines

When setting up a new machine, here's my checklist:

  1. Install VSCode
  2. Enable Settings Sync - Cmd+Shift+P → "Settings Sync: Turn On"
  3. Install JetBrains Mono font - https://www.jetbrains.com/lp/mono/
  4. Install extensions (most come via Settings Sync)
  5. Configure keybindings (also synced)
  6. Install CLI tool - Cmd+Shift+P → "Shell Command: Install 'code' command in PATH"

The code command is clutch. Open any folder in VSCode from terminal:

cd my-project
code .

What's Next?

I'm keeping an eye on:

Cursor - AI-powered editor built on VSCode. Trying it for small projects.

GitHub Copilot Chat - More integrated than the sidebar version. Seems promising.

VSCode Profiles - Official feature for different setups (work vs. personal vs. streaming)

Dev Containers - Containerized development environments. Great for onboarding.

My Actual Settings Files

Want my exact setup? Here are the files:

settings.json - All the settings above plus language-specific configs

keybindings.json - All custom keyboard shortcuts

snippets/ - Custom code snippets for React, TypeScript, etc.

All synced via Settings Sync, so I get the same experience on every machine.

The Bottom Line

Your setup should optimize for your workflow. Don't install extensions just because they're popular. Try them, keep what helps, remove what doesn't.

The best setup is the one that gets out of your way and lets you focus on writing code.

What's in your setup? Any extensions or keybindings I should try? Let me know - always looking to optimize.

Quick Reference - My Essential Extensions:

  1. Prettier
  2. ESLint
  3. GitLens
  4. Error Lens
  5. Auto Rename Tag
  6. Import Cost
  7. TODO Highlight
  8. Path Intellisense
  9. Better Comments
  10. Console Ninja

Must-have keybindings:

  • Cmd+P - Quick file open
  • Cmd+Shift+P - Command palette
  • Cmd+D - Multi-select
  • Cmd+J - Toggle terminal
  • Cmd+K Z - Zen mode
Back to Blog

Related Posts

The Git Workflow That Actually Works for Solo Developers

Nov 25, 2025

Let's be honest - most Git tutorials are written for teams of 50+ developers working on enterprise applications. But what if you're a solo developer working on...

GitProductivity

Building a Pomodoro Timer CLI in Rust

Nov 25, 2025

Over the past few weeks, I've been learning Rust by building something I actually use every day: a Pomodoro timer. Yes, there are a million Pomodoro apps out t...

RustCLI