VS Code Setup for Maximum Productivity

VS Code is Powerful

But only if you configure it right.

Essential Extensions

For Everyone:

GitLens - Git blame, history
Error Lens - Inline error display
Prettier - Code formatting

PHP:

PHP Intelephense - Better than built-in
PHP Debug - Xdebug support

JavaScript/TypeScript:

ESLint
TypeScript Vue Plugin (Volar)

Tailwind:

Tailwind CSS IntelliSense

Key Shortcuts

Cmd/Ctrl + P         - Quick file open
Cmd/Ctrl + Shift + P - Command palette
Cmd/Ctrl + D         - Select next occurrence
Cmd/Ctrl + Shift + L - Select all occurrences
Alt + Up/Down        - Move line
Cmd/Ctrl + /         - Toggle comment
Cmd/Ctrl + B         - Toggle sidebar
Cmd/Ctrl + `         - Toggle terminal

Settings Worth Changing

Open settings.json (Cmd/Ctrl + Shift + P → "Open Settings JSON"):

{
    "editor.fontSize": 14,
    "editor.tabSize": 4,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.minimap.enabled": false,
    "editor.wordWrap": "on",
    "files.autoSave": "onFocusChange",
    "workbench.startupEditor": "none"
}

Workspace Settings

Project-specific settings in .vscode/settings.json:

{
    "editor.tabSize": 2,
    "[php]": {
        "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
    }
}

Snippets

Create custom snippets (Cmd/Ctrl + Shift + P → "Configure User Snippets"):

{
    "Console Log": {
        "prefix": "cl",
        "body": "console.log('$1:', $1);",
        "description": "Console log with label"
    }
}

Multi-Cursor Magic

Alt + Click: Add cursor
Cmd/Ctrl + Alt + Up/Down: Add cursor above/below
Select text, then Cmd/Ctrl + D: Select next match