My VS Code Setup: Extensions, Themes, and Settings (2026)

After 5 years of daily VS Code use, this is my perfected setup. Every extension earns its place.

Must-Have Extensions

Code Quality

1. ESLint — JavaScript/TypeScript linting in real-time
   Catches bugs before you run code. Non-negotiable.

2. Prettier — Code formatting on save
   Never think about formatting again. Set it and forget it.

3. Error Lens — Shows error messages inline
   No need to hover to see what's wrong. See it right there on the line.

Productivity

4. GitLens — Supercharge Git
   Blame lines, see who changed what, file history, compare branches.
   The single most useful Git tool I've ever used.

5. Path Intellisense — Autocomplete file paths
   Type ./ and get smart suggestions. No more typos in import paths.

6. Auto Rename Tag — Rename HTML tags in pairs
   Change <div> → <section> and closing tag updates too.
   Saves surprising amount of time.

Debugging

7. Thunder Client — API testing (Postman alternative)
   Test APIs without leaving VS Code. Collections, environments, variables.
   Why install a separate app?

8. JavaScript Debugger (built-in) + Chrome Debug
   Debug frontend code directly from VS Code. Set breakpoints, inspect variables,
   step through code. Game changer for debugging.

Eye Candy (but useful)

9. Material Icon Theme — File icons that make sense
   Instantly recognize file types by icon. Reduces cognitive load.

10. One Dark Pro — Color theme
   Easy on the eyes, great contrast. Most popular theme for a reason.

11. Indent Rainbow — Colorize indentation levels
   Spot misaligned code instantly. Looks cool too.

My settings.json

{
  // Editor
  "editor.fontSize": 14,
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.minimap.enabled": false,
  "editor.rulers": [80, 120],
  "editor.wordWrap": "on",
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.linkedEditing": true,

  // Files
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/dist": true,
    "**/.next": true,
    "**/coverage": true
  },

  // Search
  "search.include": {
    "**/*.ts": true,
    "**/*.js": true,
    "**/*.tsx": true,
    "**/*.jsx": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.git": true,
    "**/package-lock.json": true
  },

  // Terminal
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.fontFamily": "'JetBrains Mono', monospace",
  "terminal.integrated.defaultProfile": "bash",

  // TypeScript / JavaScript
  "typescript.suggest.paths": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "javascript.inlayHints.parameterNames.enabled": "all",
  "javascript.inlayHints.variableTypes.enabled": true,
  "typescript.inlayHints.parameterTypes.enabled": true,
  "typescript.inlayHints.variableTypes.enabled": true,

  // Git
  "git.enableSmartCommit": true,
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.decorations.enabled": true,

  // Workbench
  "workbench.editor.enablePreview": false,
  "workbench.startupEditor": "none",
  "workbench.tree.indent": 16,

  // Breadcrumbs (navigation bar at top)
  "breadcrumbs.enabled": true,

  // Explorer
  "explorer.compactFolders": false,
  "explorer.sortOrder": "type, name"
}

Keybindings I Can't Live Without

// keybindings.json — my essential shortcuts

[
  // Toggle terminal (faster than default)
  { "key": "ctrl+`", "command": "workbench.action.togglePanel" },

  // Quick open files (Cmd+P style)
  { "key": "ctrl+p", "command": "workbench.action.quickOpen" },

  // Go to line
  { "key": "ctrl+g", "command": "workbench.action.gotoLine" },

  // Toggle sidebar
  { "key": "ctrl+b", "command": "workbench.action.toggleSidebarVisibility" },

  // New terminal
  { "key": "ctrl+shift+`", "command": "workbench.action.terminal.new" },

  // Split editor
  { "key": "ctrl+\\", "command": "workbench.action.splitEditor" },

  // Navigate between editors
  { "key": "ctrl+alt+left", "command": "workbench.action.navigateLeft" },
  { "key": "ctrl+alt+right", "command": "workbench.action.navigateRight" },

  // Format document
  { "key": "shift+alt+f", "command": "editor.action.formatDocument" },

  // Rename symbol
  { "key": "f2", "command": "editor.action.rename" },

  // Go to definition
  { "key": "f12", "command": "editor.action.goToDefinitions" },

  // Quick fix
  { "key": "ctrl+.", "command": "editor.action.quickFix" },

  // Toggle word wrap
  { "key": "alt+z", "command": "editor.action.toggleWordWrap" }
]

Snippets That Save Time

// snippets/javascript.json
{
  "Console log": {
    "prefix": "cl",
    "body": ["console.log('$1');", "$0"],
    "description": "Log statement"
  },
  "Console log variable": {
    "prefix": "clv",
    "body": ["console.log('${1:var}:', $1);", "$0"],
    "description": "Log with label"
  },
  "Try-catch": {
    "prefix": "try",
    "body": [
      "try {",
      "\t$1",
      "} catch (error) {",
      "\tconsole.error('Error:', error);",
      "\t$0",
      "}"
    ],
    "description": "Try-catch block"
  },
  "Async function": {
    "prefix": "afn",
    "body": [
      "const ${1:name} = async (${2:params}) => {",
      "\ttry {",
      "\t\t$3",
      "\t} catch (error) {",
      "\t\tconsole.error('${1/name} failed:', error);",
      "\t}",
      "};"
    ],
    "description": "Async function with error handling"
  },
  "Express route handler": {
    "prefix": "route",
    "body": [
      "app.${1:get}('${2:path}', asyncHandler(async (req, res) => {",
      "\t${3}",
      "}));"
    ],
    "description": "Express route with async handler"
  },
  "Describe block": {
    "prefix": "desc",
    "body": [
      "describe('${1:suite}', () => {",
      "\t${2}",
      "\tit('${3:test}', () => {",
      "\t\texpect(${4}).toBe(${5});",
      "\t});",
      "});"
    ],
    "description": "Jest describe block"
  }
}

Workspace-Specific Settings

// .vscode/settings.json (per-project)

// For Node.js projects:
{
  "node.codeGeneration.enabled": true,
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

// For frontend projects:
{
  "css.lint.unknownAtRules": "ignore",
  "emmet.includeLanguages": { "javascript": "javascriptreact" }
}

// For monorepos:
{
  "search.searchOnInclude": {
    "**/src/**/*.ts": true,
    "**/packages/*/src/**": true
  }
}

Performance Tips

// Keep VS Code fast:
{
  // Exclude large folders from search
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.cache": true,
    "**/coverage": true,
    "**/build": true,
    "**/.next": true,
    "**/out": true
  },

  // Disable unused features
  "extensions.autoCheckUpdates": false,  // Check manually
  "git.autoRepositoryDetection": "subFolders",  // Not deep search
  "typescript.disableAutomaticTypeAcquisition": true,  // Manage types yourself

  // Memory management
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/.git/**": true
  },

  // Startup
  "workbench.enableExperiments": false,
  "workbench.settings.openDefaultSettings": false
}

---

What's your must-have VS Code extension? Anything I'm missing?

Follow @armorbreak for more developer content.