My VS Code Setup for Maximum Productivity

Introduction

I've watched developers spend more time configuring their editor than writing code, and I've been that developer. At some point, you have to commit to a setup, stop tweaking it constantly, and let the muscle memory build. This is my current setup — built up over years of daily use across TypeScript, Next.js, Node.js, and C projects.

Everything here is motivated by a simple principle: the editor should get out of the way. Formatting happens automatically, imports are managed, navigation is fast, and visual noise is minimal. Your cognitive load stays focused on the problem, not the environment.

Core Concepts

The Right Way to Think About Editor Config

VS Code configuration splits into three tiers:

1. User settings (~/.config/Code/User/settings.json) — personal preferences that apply everywhere
2. Workspace settings (.vscode/settings.json) — project-specific overrides, committed to the repo
3. Extensions — functionality you install globally

The key distinction: workspace settings can override user settings. This means I can have prettier as my default formatter but use clang-format for C projects, configured per-workspace.

My Settings (settings.json)

{
  "editor.fontFamily": "JetBrains Mono, 'Cascadia Code', monospace",
  "editor.fontSize": 14,
  "editor.fontLigatures": true,
  "editor.lineHeight": 1.7,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.minimap.enabled": false,
  "editor.renderWhitespace": "boundary",
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.inlineSuggest.enabled": true,
  "editor.suggestSelection": "first",
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.scrollBeyondLastLine": false,
  "editor.wordWrap": "off",

  "workbench.colorTheme": "Tokyo Night",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.tree.indent": 16,
  "workbench.activityBar.location": "top",
  "workbench.statusBar.visible": true,

  "terminal.integrated.fontFamily": "JetBrains Mono",
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.defaultProfile.linux": "zsh",

  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,

  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,

  "git.autofetch": true,
  "git.confirmSync": false,
  "git.enableSmartCommit": true,

  "typescript.preferences.importModuleSpecifier": "non-relative",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "typescript.inlayHints.parameterNames.enabled": "literals",
  "javascript.updateImportsOnFileMove.enabled": "always",

  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"

Recommended Extensions

• Prettier
• ESLint
• GitLens
• Dracula Theme

Custom Keybindings

• Customize keybindings to improve efficiency

Settings Sync

• Sync settings across devices

Theme

• Dracula, One Dark

Primer settings.json

{
  "editor.formatOnSave": true,
  "files.autoSave": "afterDelay"
}

More information: VSCode Docs