DEV Community

郑沛沛
郑沛沛

Posted on

10 VS Code Extensions That Will Supercharge Your Development Workflow

#productivity #vscode #tutorial #tools

VS Code is already great, but the right extensions make it exceptional. Here are 10 that I install on every machine, with configuration tips.

1. GitHub Copilot

AI pair programming that actually works:

// settings.json
{
    "github.copilot.enable": {
        "*": true,
        "markdown": true,
        "plaintext": false
    }
}
Enter fullscreen mode Exit fullscreen mode

Pro tip: Write a descriptive comment before the function, and Copilot generates better code.

2. Error Lens

Shows errors and warnings inline, right next to the code:

{
    "errorLens.enabledDiagnosticLevels": ["error", "warning"],
    "errorLens.delay": 500
}
Enter fullscreen mode Exit fullscreen mode

No more squinting at squiggly underlines — errors are impossible to miss.

3. GitLens

Git blame, history, and comparison built into the editor:

{
    "gitlens.codeLens.enabled": true,
    "gitlens.currentLine.enabled": true,
    "gitlens.hovers.currentLine.over": "line"
}
Enter fullscreen mode Exit fullscreen mode

See who changed every line, when, and why — without leaving the editor.

4. REST Client

Test APIs directly from VS Code. Create .http files:

### Get all users
GET http://localhost:8000/api/users
Authorization: Bearer {{token}}

### Create user
POST http://localhost:8000/api/users
Content-Type: application/json

{
    "name": "Alice",
    "email": "alice@example.com"
}

### Variables
@token = eyJhbGciOiJIUzI1NiJ9...
@baseUrl = http://localhost:8000
Enter fullscreen mode Exit fullscreen mode

Click "Send Request" above any block. Way faster than switching to Postman.

5. Thunder Client

If you prefer a GUI for API testing, Thunder Client is Postman inside VS Code. Collections, environments, and test scripts — all without leaving the editor.

6. Docker Extension

Manage containers, images, and compose files visually:

{
    "docker.containers.sortBy": "Status",
    "docker.showStartPage": false
}
Enter fullscreen mode Exit fullscreen mode

Right-click to start, stop, view logs, or shell into any container.

7. Prettier + ESLint (for JS/TS projects) 

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    },
    "[python]": {
        "editor.defaultFormatter": "charliermarsh.ruff"
    }
}
Enter fullscreen mode Exit fullscreen mode

Format on save means you never think about formatting again.

8. Python + Ruff

Ruff replaces flake8, isort, and black — and it's 100x faster:

{
    "python.analysis.typeCheckingMode": "basic",
    "ruff.lint.run": "onSave",
    "ruff.format.args": ["--line-length", "100"]
}
Enter fullscreen mode Exit fullscreen mode

9. Remote - SSH

Develop on remote servers as if they were local:

// ~/.ssh/config
Host dev-server
    HostName 10.0.0.50
    User developer
    IdentityFile ~/.ssh/id_ed25519
Enter fullscreen mode Exit fullscreen mode

Open VS Code, connect to dev-server, and edit files with full IntelliSense. Game changer for cloud development.

10. Todo Tree

Find and organize TODOs across your codebase:

{
    "todo-tree.general.tags": ["TODO", "FIXME", "HACK", "BUG", "XXX"],
    "todo-tree.highlights.defaultHighlight": {
        "type": "text-and-comment"
    }
}
Enter fullscreen mode Exit fullscreen mode

Never lose track of technical debt again.

Bonus: Essential Keyboard Shortcuts 

Ctrl+P          Quick file open
Ctrl+Shift+P    Command palette
Ctrl+Shift+F    Search across files
Ctrl+D          Select next occurrence
Alt+Up/Down     Move line up/down
Ctrl+Shift+K    Delete line
Ctrl+`          Toggle terminal
Ctrl+B          Toggle sidebar
F2              Rename symbol
Ctrl+.          Quick fix
Enter fullscreen mode Exit fullscreen mode

My settings.json Essentials 

{
    "editor.fontSize": 14,
    "editor.lineHeight": 1.6,
    "editor.minimap.enabled": false,
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": true,
    "editor.stickyScroll.enabled": true,
    "files.autoSave": "onFocusChange",
    "terminal.integrated.fontSize": 13,
    "workbench.colorTheme": "One Dark Pro"
}
Enter fullscreen mode Exit fullscreen mode

Key Takeaways

  1. GitHub Copilot + good comments = faster coding
  2. Error Lens makes errors impossible to miss
  3. REST Client replaces Postman for most API testing
  4. Format on save eliminates style debates
  5. Remote SSH enables seamless cloud development

6. Learn keyboard shortcuts — they compound over time

🚀 Level up your AI workflow! Check out my AI Developer Mega Prompt Pack — 80 battle-tested prompts for developers. $9.99

Top comments (0)