Vscode Settings

VS Code Settings

Settings Hierarchy

Settings resolve in this order (later overrides earlier):

1. Default settings - built-in VS Code defaults
2. User settings - ~/.config/Code/User/settings.json (Linux), ~/Library/Application Support/Code/User/settings.json (macOS), %APPDATA%\Code\User\settings.json (Windows)
3. Workspace settings - .vscode/settings.json in workspace root
4. Folder settings - per-folder overrides in multi-root workspaces

Commit .vscode/settings.json, extensions.json, tasks.json, and launch.json to version control. Add user-specific paths to .gitignore if needed.

Essential settings.json Configurations

Editor

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

Files and Search

{
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/__pycache__": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/coverage": true,
    "**/.next": true,
    "**/build": true
  },
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/.git/objects/**": true
  }
}

Terminal

{
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.fontFamily": "'JetBrains Mono', monospace",
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.defaultProfile.linux": "bash",
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "terminal.integrated.scrollback": 10000,
  "terminal.integrated.env.osx": {
    "FIG_NEW_SESSION": "1"
  },
  "terminal.integrated.shellArgs.osx": ["-l"],
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.copyOnSelection": true
}

Keybinding Customization

Keybindings live in keybindings.json. Open with Cmd+K Cmd+S (macOS) or Ctrl+K Ctrl+S (Windows/Linux).

Structure

[
  {
    "key": "ctrl+shift+d",
    "command": "editor.action.duplicateSelection"
  },
  {
    "key": "ctrl+shift+k",
    "command": "editor.action.deleteLines",
    "when": "editorTextFocus && !editorReadonly"
  }
]

When Clauses

Common context keys for conditional bindings:

• editorTextFocus - cursor is in an editor
• editorHasSelection - text is selected
• editorLangId == 'typescript' - specific language
• resourceExtname == '.json' - specific file extension
• inDebugMode - debugger is active
• sideBarVisible - sidebar is open
• terminalFocus - terminal has focus

Combine with &&, ||, !:

{
  "key": "ctrl+enter",
  "command": "workbench.action.terminal.sendSequence",
  "args": { "text": "\n" },
  "when": "terminalFocus && !terminalTextSelected"
}

Key Chords

Two-part shortcuts:

{
  "key": "ctrl+k ctrl+c",
  "command": "editor.action.addCommentLine"
}

Must-Have Extensions

Recommended Extensions File

Create .vscode/extensions.json in your project:

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss",
    "ms-python.python"
  ],
  "unwantedRecommendations": []
}

By Category

Languages & Frameworks: ms-python.python, ms-python.vscode-pylance, golang.go, rust-lang.rust-analyzer, bradlc.vscode-tailwindcss, prisma.prisma, svelte.svelte-vscode, vue.volar

Git: eamodio.gitlens, mhutchie.git-graph, github.vscode-pull-request-github

Testing: vitest.explorer, ms-vscode.test-adapter-converter, hbenl.vscode-test-explorer

Productivity: usernamehw.errorlens, christian-kohler.path-intellisense, streetsidesoftware.code-spell-checker, mikestead.dotenv, yzhang.markdown-all-in-one, gruntfuggly.todo-tree

AI: github.copilot, github.copilot-chat, continue.continue

Formatting & Linting: dbaeumer.vscode-eslint, esbenp.prettier-vscode, stylelint.vscode-stylelint, editorconfig.editorconfig

Custom Snippets

User Snippets

Open via Cmd+Shift+P > "Snippets: Configure Snippets". Choose a language or global scope.

~/.config/Code/User/snippets/typescript.json:

{
  "Arrow Function": {
    "prefix": "af",
    "body": ["const ${1:name} = (${2:params}) => {", "  $0", "};"],
    "description": "Arrow function"
  },
  "Console Log Variable": {
    "prefix": "clv",
    "body": "console.log('${1:var}:', $1);",
    "description": "Log variable with label"
  },
  "Try Catch": {
    "prefix": "tc",
    "body": [
      "try {",
      "  $1",
      "} catch (error) {",
      "  ${2:console.error(error);}",
      "}"
    ]
  }
}

Tabstops and Variables

• $1, $2 - tab stops (cursor positions in order)
• $0 - final cursor position
• ${1:default} - placeholder with default text
• ${1|one,two,three|} - choice list
• $TM_FILENAME, $TM_DIRECTORY, $CURRENT_YEAR - built-in variables
• ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} - variable transforms

Project Snippets

Place in .vscode/*.code-snippets for project-scoped snippets:

{
  "Component Template": {
    "scope": "typescriptreact",
    "prefix": "comp",
    "body": [
      "interface ${1:Component}Props {",
      "  $2",
      "}",
      "",
      "export function ${1:Component}({ $3 }: ${1:Component}Props) {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "}"
    ]
  }
}

tasks.json

Build Tasks

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "type": "npm",
      "script": "build",
      "group": { "kind": "build", "isDefault": true },
      "problemMatcher": ["$tsc"]
    },
    {
      "label": "lint",
      "type": "shell",
      "command": "npx eslint . --ext .ts,.tsx",
      "problemMatcher": ["$eslint-stylish"]
    },
    {
      "label": "test",
      "type": "shell",
      "command": "npx vitest run",
      "group": { "kind": "test", "isDefault": true }
    }
  ]
}

Problem Matchers

Define custom problem matchers for non-standard output:

{
  "label": "custom-build",
  "type": "shell",
  "command": "make build",
  "problemMatcher": {
    "owner": "custom",
    "fileLocation": ["relative", "${workspaceFolder}"],
    "pattern": {
      "regexp": "^(.+):(\\d+):(\\d+):\\s+(error|warning):\\s+(.+)$",
      "file": 1, "line": 2, "column": 3, "severity": 4, "message": 5
    }
  }
}

Compound Tasks

Run multiple tasks together:

{
  "label": "build-and-test",
  "dependsOn": ["build", "test"],
  "dependsOrder": "sequence",
  "problemMatcher": []
}

launch.json

Node.js

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Node: Current File",
      "type": "node",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal",
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "name": "Node: Attach",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "restart": true
    }
  ]
}

Python

{
  "name": "Python: Current File",
  "type": "debugpy",
  "request": "launch",
  "program": "${file}",
  "console": "integratedTerminal",
  "justMyCode": true,
  "env": { "PYTHONDONTWRITEBYTECODE": "1" }
}

Go

{
  "name": "Go: Launch Package",
  "type": "go",
  "request": "launch",
  "mode": "auto",
  "program": "${workspaceFolder}",
  "env": {},
  "args": []
}

Browser (Chrome)

{
  "name": "Chrome: Launch",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}/src",
  "sourceMaps": true
}

Multi-Root Workspaces

Create a .code-workspace file:

{
  "folders": [
    { "name": "Frontend", "path": "./packages/frontend" },
    { "name": "Backend", "path": "./packages/backend" },
    { "name": "Shared", "path": "./packages/shared" }
  ],
  "settings": {
    "files.exclude": { "**/node_modules": true }
  },
  "extensions": {
    "recommendations": ["dbaeumer.vscode-eslint"]
  }
}

Per-folder settings override workspace settings. Open with code project.code-workspace.

Dev Containers

devcontainer.json

// .devcontainer/devcontainer.json
{
  "name": "Node.js Dev",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:20",
  "features": {
    "ghcr.io/devcontainers/features/docker-in-docker:2": {},
    "ghcr.io/devcontainers/features/github-cli:1": {}
  },
  "forwardPorts": [3000, 5432],
  "postCreateCommand": "npm install",
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode"
      ],
      "settings": {
        "editor.formatOnSave": true
      }
    }
  }
}

With Dockerfile

{
  "name": "Custom Dev",
  "build": {
    "dockerfile": "Dockerfile",
    "context": "..",
    "args": { "NODE_VERSION": "20" }
  },
  "remoteUser": "node",
  "mounts": [
    "source=${localEnv:HOME}/.ssh,target=/home/node/.ssh,type=bind,readonly"
  ]
}

Docker Compose

{
  "name": "Full Stack",
  "dockerComposeFile": "docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/workspace",
  "shutdownAction": "stopCompose"
}

Remote Development

SSH: Install "Remote - SSH" extension. Configure ~/.ssh/config, then Cmd+Shift+P > "Remote-SSH: Connect to Host". VS Code installs its server on the remote automatically.

WSL: Install "WSL" extension. Run code . from a WSL terminal, or use Cmd+Shift+P > "WSL: Connect to WSL".

Tunnels: Run code tunnel on a remote machine to create a persistent tunnel. Connect from any browser at vscode.dev or from the desktop app via "Remote - Tunnels" extension. No SSH required.

Extension Authoring Basics

Scaffold a new extension:

npm install -g yo generator-code
yo code

Minimal package.json contribution points:

{
  "contributes": {
    "commands": [{
      "command": "myext.helloWorld",
      "title": "Hello World"
    }],
    "keybindings": [{
      "command": "myext.helloWorld",
      "key": "ctrl+shift+h"
    }],
    "configuration": {
      "title": "My Extension",
      "properties": {
        "myext.enable": { "type": "boolean", "default": true }
      }
    }
  }
}

Register in src/extension.ts:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  const disposable = vscode.commands.registerCommand('myext.helloWorld', () => {
    vscode.window.showInformationMessage('Hello World!');
  });
  context.subscriptions.push(disposable);
}

export function deactivate() {}

Debug with F5 (launches Extension Development Host). Publish with vsce publish.

Profiles

Create profiles for different workflows: Cmd+Shift+P > "Profiles: Create Profile".

Use cases:

• Frontend - Tailwind, ESLint, Prettier, browser debug configs
• Python - Pylance, Ruff, Jupyter, Python debug configs
• Writing - Markdown extensions, zen mode defaults, spell checker
• Minimal - No extensions, clean UI for demos/screencasts

Export/import profiles as .code-profile files or share via GitHub Gist.

Switch profiles via the gear icon in the bottom-left or Cmd+Shift+P > "Profiles: Switch Profile".

Settings Sync

Enable via Cmd+Shift+P > "Settings Sync: Turn On". Syncs:

• Settings, keybindings, snippets, extensions, UI state, profiles

Sign in with GitHub or Microsoft account. Choose what to sync in Settings Sync preferences.

For teams, commit .vscode/settings.json and .vscode/extensions.json instead of relying on sync. Keep personal preferences (theme, font size) in user settings only.

Productivity Tips

Multi-cursor: Alt+Click to add cursors. Cmd+D to select next occurrence. Cmd+Shift+L to select all occurrences. Cmd+Alt+Up/Down to add cursors above/below.

Emmet: Type abbreviations and press Tab in HTML/JSX. div.container>ul>li*3 expands to full markup. Works in JSX with "emmet.includeLanguages": { "javascriptreact": "html" }.

Breadcrumbs: Enable with "breadcrumbs.enabled": true. Navigate file path and symbol hierarchy at the top of the editor.

Zen Mode: Cmd+K Z to enter. Hides all UI chrome for focused editing. Configure with "zenMode.hideLineNumbers", "zenMode.centerLayout".

Quick Open: Cmd+P to open files by name. Add : for go-to-line, @ for go-to-symbol, # for workspace symbol search.

Command Palette: Cmd+Shift+P for all commands. Type partial matches.

Side-by-side editing: Cmd+\ to split. Drag tabs between groups. Cmd+1/2/3 to focus groups.

Timeline view: Built-in local file history in the Explorer sidebar. Compare previous versions without Git.

Sticky scroll: Shows nested scope context at the top of the editor. Enable with "editor.stickyScroll.enabled": true.

Project-Specific Formatter/Linter Configuration

Per-Language Formatters

// .vscode/settings.json
{
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  },
  "[python]": {
    "editor.defaultFormatter": "charliermarsh.ruff",
    "editor.tabSize": 4,
    "editor.formatOnSave": true
  },
  "[go]": {
    "editor.defaultFormatter": "golang.go",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": "explicit"
    }
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.wordWrap": "on",
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "files.trimTrailingWhitespace": false
  }
}

ESLint + Prettier Coexistence

{
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"],
  "prettier.requireConfig": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Order matters: Prettier formats first (on save), then ESLint fixes remaining issues (code action on save). Use eslint-config-prettier to disable ESLint rules that conflict with Prettier.

Ruff for Python

{
  "[python]": {
    "editor.defaultFormatter": "charliermarsh.ruff",
    "editor.codeActionsOnSave": {
      "source.fixAll.ruff": "explicit",
      "source.organizeImports.ruff": "explicit"
    }
  }
}