15 VS Code Productivity Hacks That Will Transform Your Workflow

4. Terminal Integration

Ctrl + `          → Toggle integrated terminal
Ctrl + Shift + `  → New terminal
Ctrl + Shift + 5  → Split terminal
Ctrl + PgUp/PgDn  → Switch between terminals

5. Essential Settings (settings.json)

{
  "editor.fontSize": 14,
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', monospace",
  "editor.fontLigatures": true,
  "editor.minimap.enabled": false,
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.stickyScroll.enabled": true,
  "files.autoSave": "onFocusChange",
  "breadcrumbs.enabled": true,
  "explorer.confirmDelete": false,
  "terminal.integrated.fontFamily": "'JetBrains Mono'",
  "workbench.tree.indent": 16
}

6. Snippets for Common Patterns

Create custom snippets for patterns you use daily:

// .vscode/snippets.code-snippets
{
  "Server Action": {
    "prefix": "sa",
    "body": [
      "\"use server\";",
      "",
      "import { z } from \"zod\";",
      "import { prisma } from \"@/lib/prisma\";",
      "",
      "const ${1:Name}Schema = z.object({",
      "  $2",
      "});",
      "",
      "export async function ${3:action}(",
      "  prevState: { error?: string; success?: string },",
      "  formData: FormData",
      ") {",
      "  $0",
      "}"
    ]
  },
  "React Client Component": {
    "prefix": "rcc",
    "body": [
      "\"use client\";",
      "",
      "export function ${1:Component}() {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "}"
    ]
  }
}

7. File Nesting for Cleaner Explorer

// settings.json
{
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "*.ts": "${capture}.test.ts, ${capture}.spec.ts",
    "*.tsx": "${capture}.test.tsx, ${capture}.module.css",
    "package.json": "package-lock.json, .npmrc, .prettierrc*",
    "tsconfig.json": "tsconfig.*.json"
  }
}

8. Git Shortcuts

• Ctrl + Shift + G — open Source Control panel
• Stage changes, write commits, and push — all without leaving VS Code
• GitLens extension adds blame annotations, history, and more

9. Zen Mode for Deep Focus

Ctrl + K Z — enter Zen Mode. Hides everything except the code. Combined with our Hours Tracker VS Code Extension ($24), you get distraction-free coding with automatic time tracking.

10. Search and Replace with Regex

Ctrl + H with regex enabled can transform code in seconds:

Find:    console\.log\((.*?)\);
Replace: // Removed: console.log($1);

Find:    import \{ (.*?) \} from "(.*?)";
Replace: import type { $1 } from "$2";

11. Workspace Settings

Different projects need different settings:

// .vscode/settings.json (project-level)
{
  "editor.tabSize": 2,
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
  }
}

12. Extensions That Matter

Our Hours Tracker VS Code Extension ($24) integrates directly into your workflow — tracks coding time by project, language, and branch without any manual effort.

13. Task Runner Integration

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Dev Server",
      "type": "shell",
      "command": "npm run dev",
      "isBackground": true,
      "problemMatcher": ["$tsc-watch"]
    },
    {
      "label": "Prisma Studio",
      "type": "shell",
      "command": "npx prisma studio"
    }
  ]
}

14. Remote Development

VS Code Remote SSH lets you develop on any server:

// .ssh/config
Host my-server
  HostName 192.168.1.100
  User developer
  IdentityFile ~/.ssh/id_rsa

Perfect for working with our Developer Portfolio Platform deployed on VPS.

15. Emmet for Ultra-Fast HTML

Type abbreviations and press Tab:

div.container>div.row>div.col*3>h3+p

Expands to complete HTML structure instantly. Works perfectly with Tailwind CSS classes.

Track Your Productivity

All these hacks make you faster — but how much faster? Our Hours Tracker VS Code Extension ($24) answers that with:

• Automatic time tracking per project and branch
• Language breakdown (how much TypeScript vs CSS?)
• Activity detection (keystrokes, file switches, saves)
• Dashboard in the Developer Portfolio Platform
• Idle detection so you don't count coffee breaks

Related articles:

• Git Workflow Best Practices
• A Day in the Life of a Developer
• Hours Tracker Chrome Extension — track browser time too

Follow on X/Twitter for daily VS Code tips.

Code smarter, not harder. Our Hours Tracker VS Code Extension tracks your productivity automatically — $24, integrates with our SaaS platform.