VSCode Essential Extensions & Shortcuts

Visual Studio Code is the modern developer's editor of choice. But most people only use 10% of its features — a properly configured VSCode can 3x your development speed.

🔥 Vibe Prompt

"List the 20 most important VSCode shortcuts, 15 must-install extensions, and output my keybindings.json and settings.json optimized for full-stack Python + frontend development."

Must-Have Extensions

🧠 AI Assistant

| Extension | Purpose | |-----------|---------| | GitHub Copilot | AI code completion, ultimate productivity | | Tabnine | Local AI completion, privacy-focused |

🐍 Python Development

| Extension | Purpose | |-----------|---------| | Python (Microsoft) | IntelliSense, debugging, testing, navigation | | Pylance | Fast type checking and auto-completion | | Python Docstring Generator | Auto-generate docstrings |

⚛️ Frontend Development

| Extension | Purpose | |-----------|---------| | ESLint | JS/TS code quality checking | | Prettier | Unified code formatter | | Tailwind CSS IntelliSense | Tailwind class autocomplete | | Auto Rename Tag | Auto-sync paired tag modifications |

🔧 General Tools

| Extension | Purpose | |-----------|---------| | GitLens | Powerful Git visualization | | Error Lens | Inline error display | | Thunder Client | Lightweight API testing client | | Material Icon Theme | Beautiful file icons | | One Dark Pro | Classic dark theme |

Essential Keyboard Shortcuts

# General Editing
⌘ + P          Quick file switching
⌘ + ⇧ + P     Command palette
⌘ + D          Select next same word
⌘ + ⇧ + L     Select all same words
⌘ + /          Toggle comment
⌘ + ⌥ + ↓/↑   Copy line down/up
⌘ + ⇧ + K     Delete entire line

# Multi-cursor
⌥ + Click       Add extra cursor
⌥ + ⇧ + Drag  Box selection
⌘ + ⌥ + ↑/↓   Add cursor above/below

# Navigation
⌘ + B          Toggle sidebar
⌘ + ⇧ + F     Global search
F12             Go to definition
⌘ + ⇧ + F12   Peek all references

# Editing
⌘ + .          Quick fix
⌘ + ⇧ + R     Rename symbol
⌘ + [ / ]      Indent/outdent
⌘ + Enter      Insert line below
⌘ + ⇧ + Enter Insert line above

Optimal settings.json

{
  "editor.fontSize": 14,
  "editor.fontFamily": "'Fira Code', 'JetBrains Mono', monospace",
  "editor.fontLigatures": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.minimap.enabled": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.smoothScrolling": true,
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.defaultProfile.osx": "zsh",
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "git.autofetch": true
}

User Snippets

Create frequently used code snippets:

// python.json
{
  "Python Main Guard": {
    "prefix": "pmain",
    "body": ["if __name__ == '__main__':", "    $0"],
    "description": "Python main guard"
  },
  "FastAPI Route": {
    "prefix": "froute",
    "body": ["@app.${1:get}('/${2:route}')", "async def ${3:handler}():${4:pass}"]
  }
}

// typescript.json
{
  "React Function Component": {
    "prefix": "rfc",
    "body": [
      "interface ${1:Props} {}",
      "const ${2:Component}: React.FC<${1:Props}> = () => {",
      "  return <div>$0</div>;",
      "};",
      "export default ${2:Component};"
    ]
  }
}

Integrated Debugger

VSCode's debugger can replace Chrome DevTools and pdb:

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Node.js",
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    },
    {
      "type": "python",
      "request": "launch",
      "name": "Debug Python",
      "program": "${workspaceFolder}/main.py",
      "console": "integratedTerminal"
    }
  ]
}

Practice Exercise

💡 Vibe Coding Practice: Ask AI to help you:

Generate optimal settings.json for your tech stack

Create useful code snippets (CRUD API, test cases, component templates)

Set up one-click debug configuration

Integrate ESLint + Prettier auto-fix

Configure beautiful integrated terminal

Essential VS Code Extensions

| Category | Extension | Purpose | |----------|-----------|--------| | AI | GitHub Copilot | AI code completion | | Formatting | Prettier | Auto-format code | | Linting | ESLint | Find code issues | | Git | GitLens | Git blame inline | | Themes | One Dark Pro | Visual theme | | Icons | Material Icon Theme | File icons | | Debugger | JavaScript Debugger | Built-in Node debug | | Markdown | Markdown Preview | Preview .md files | | Database | SQLTools | Query databases | | Docker | Docker | Manage containers | | Testing | Jest Runner | Run tests inline |

Keyboard Shortcuts

| Shortcut | Action | |----------|--------| | Cmd+P | Quick open file | | Cmd+Shift+P | Command palette | | Cmd+` | Toggle terminal | | Cmd+B | Toggle sidebar | | Cmd+J | Toggle panel (terminal/output) | | Cmd+D | Select next occurrence | | Cmd+Shift+L | Select all occurrences | | Option+Up/Down | Move line up/down | | Option+Shift+Up/Down | Copy line up/down | | Cmd+/ | Toggle comment | | Cmd+Shift+F | Search in all files | | Cmd+Shift+H | Search and replace |

Settings Sync

# VS Code settings sync via GitHub account
# Settings → Turn on Settings Sync
# Syncs: settings.json, keybindings.json, extensions, snippets

Workspace Settings

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.minimap.enabled": false,
  "editor.fontSize": 14,
  "editor.fontFamily": "'JetBrains Mono', monospace",
  "files.autoSave": "onFocusChange",
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "terminal.integrated.fontSize": 13,
  "search.exclude": {
    "node_modules": true,
    "dist": true
  }
}

Summary

VS Code is the most popular code editor. Master extensions, shortcuts, and settings to maximize productivity.

Key takeaways:

Essential extensions: Copilot, Prettier, ESLint, GitLens |
Shortcuts: Cmd+P (open), Cmd+Shift+P (palette), Cmd+` (terminal) |
Settings Sync: backup and share settings via GitHub |
Format on save + ESLint fixes = clean code automatically |
Workspace settings override user settings |
JetBrains Mono is the best coding font |

What's Next: Terminal Mastery

The next chapter covers terminal mastery — essential commands, shortcuts, and workflows.