VS Code Productivity Tips for Developers

VS Code is incredibly powerful when you know how to use it. Here are tips that will supercharge your development workflow.

Essential Keyboard Shortcuts

Navigation

Cmd/Ctrl + P          # Quick file open
Cmd/Ctrl + Shift + P  # Command palette
Cmd/Ctrl + G          # Go to line
Cmd/Ctrl + Shift + O  # Go to symbol in file
Cmd/Ctrl + T          # Go to symbol in workspace
Cmd/Ctrl + B          # Toggle sidebar
Cmd/Ctrl + J          # Toggle terminal
Cmd/Ctrl + `          # Focus terminal

Editing

Cmd/Ctrl + D          # Select next occurrence
Cmd/Ctrl + Shift + L  # Select all occurrences
Alt + Up/Down         # Move line up/down
Alt + Shift + Up/Down # Copy line up/down
Cmd/Ctrl + Shift + K  # Delete line
Cmd/Ctrl + /          # Toggle comment
Cmd/Ctrl + Shift + /  # Toggle block comment
Cmd/Ctrl + [          # Outdent line
Cmd/Ctrl + ]          # Indent line

Multi-Cursor

Alt + Click           # Add cursor
Cmd/Ctrl + Alt + Up   # Add cursor above
Cmd/Ctrl + Alt + Down # Add cursor below
Cmd/Ctrl + Shift + L  # Add cursor to all selections

Search

Cmd/Ctrl + F          # Find in file
Cmd/Ctrl + H          # Find and replace
Cmd/Ctrl + Shift + F  # Find in all files
Cmd/Ctrl + Shift + H  # Replace in all files

Must-Have Extensions

Development

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss",
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense",
    "usernamehw.errorlens",
    "streetsidesoftware.code-spell-checker",
    "eamodio.gitlens"
  ]
}

Productivity

{
  "recommendations": [
    "github.copilot",
    "wayou.vscode-todo-highlight",
    "gruntfuggly.todo-tree",
    "alefragnani.project-manager",
    "mikestead.dotenv"
  ]
}

Settings Configuration

settings.json

{
  // Editor
  "editor.fontSize": 14,
  "editor.fontFamily": "JetBrains Mono, Fira Code, monospace",
  "editor.fontLigatures": true,
  "editor.lineHeight": 1.6,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.smoothScrolling": true,
  "editor.linkedEditing": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  
  // Format on Save
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  
  // Files
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  
  // Terminal
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.fontFamily": "JetBrains Mono",
  
  // Explorer
  "explorer.confirmDelete": false,
  "explorer.compactFolders": false,
  
  // Git
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.enableSmartCommit": true
}

Custom Snippets

JavaScript/TypeScript Snippets

// File: javascript.json
{
  "Console Log": {
    "prefix": "cl",
    "body": ["console.log('$1:', $1);"],
    "description": "Console log with label"
  },
  "Arrow Function": {
    "prefix": "af",
    "body": ["const $1 = ($2) => {", "  $0", "};"],
    "description": "Arrow function"
  },
  "Async Arrow Function": {
    "prefix": "aaf",
    "body": ["const $1 = async ($2) => {", "  $0", "};"],
    "description": "Async arrow function"
  },
  "Try Catch": {
    "prefix": "tc",
    "body": [
      "try {",
      "  $1",
      "} catch (error) {",
      "  console.error(error);",
      "}"
    ]
  },
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "interface ${1:Component}Props {",
      "  $2",
      "}",
      "",
      "export function ${1:Component}({ $3 }: ${1:Component}Props) {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "}"
    ]
  }
}

Workspace Settings

.vscode/settings.json

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  
  "tailwindCSS.includeLanguages": {
    "typescript": "javascript",
    "typescriptreact": "javascript"
  },
  
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/.next": true
  },
  
  "search.exclude": {
    "**/node_modules": true,
    "**/pnpm-lock.yaml": true
  }
}

Debugging Configuration

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Debug Jest Tests",
      "type": "node",
      "request": "launch",
      "runtimeArgs": ["--inspect-brk", "node_modules/.bin/jest", "--runInBand"],
      "console": "integratedTerminal"
    }
  ]
}

Tasks

.vscode/tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "dev",
      "type": "npm",
      "script": "dev",
      "problemMatcher": [],
      "isBackground": true
    },
    {
      "label": "build",
      "type": "npm",
      "script": "build",
      "group": "build"
    },
    {
      "label": "test",
      "type": "npm",
      "script": "test",
      "group": "test"
    }
  ]
}

Pro Tips

1. Zen Mode

Cmd/Ctrl + K Z  # Distraction-free coding

2. Split Editor

Cmd/Ctrl + \    # Split editor
Cmd/Ctrl + 1/2/3  # Focus editor group

3. Quick Fix

Cmd/Ctrl + .    # Show quick fixes and refactorings

4. Peek Definition

Alt + F12       # Peek definition inline

5. Rename Symbol

F2              # Rename symbol across all files

6. Fold Code

Cmd/Ctrl + Shift + [  # Fold
Cmd/Ctrl + Shift + ]  # Unfold
Cmd/Ctrl + K Cmd/Ctrl + 0  # Fold all

Master these VS Code features and watch your productivity soar!