VS Code: Tipps und Erweiterungen für mehr Produktivität

Visual Studio Code ist der wohl beliebteste Code-Editor – kostenlos, schnell und enorm erweiterbar. Doch viele nutzen nur einen Bruchteil seiner Möglichkeiten. In diesem Beitrag zeige ich dir Tastenkürzel, Erweiterungen und Einstellungen, mit denen du deutlich produktiver arbeitest. Probier ruhig direkt mit, während du liest.

Die wichtigsten Tastenkürzel

Wer die Maus liegen lässt, arbeitet schneller. Diese Kürzel solltest du verinnerlichen (auf dem Mac ersetzt Cmd die Strg-Taste):

• Strg + P – schnell zu einer Datei springen.
• Strg + Shift + P – die Kommandopalette öffnen.
• Strg + D – nächstes Vorkommen des markierten Worts auswählen.
• Strg + / – Zeile aus- oder einkommentieren.
• Alt + Pfeil hoch/runter – Zeile nach oben oder unten verschieben.

Besonders die Kommandopalette ist mächtig: Über sie erreichst du praktisch jede Funktion, ohne sie im Menü zu suchen.

Unverzichtbare Erweiterungen

Der Marktplatz bietet tausende Erweiterungen. Diese gehören für viele zum Standard:

• Prettier – formatiert deinen Code automatisch einheitlich.
• ESLint – findet Fehler und Stilprobleme in JavaScript.
• GitLens – zeigt direkt im Code, wer welche Zeile zuletzt geändert hat.
• Error Lens – blendet Fehlermeldungen direkt neben der Zeile ein.

Erweiterungen kannst du auch über das Terminal installieren, was sich gut für ein Setup-Skript eignet:

# Erweiterung über die Kommandozeile installieren
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension eamodio.gitlens

Automatisch formatieren beim Speichern

Eine der nützlichsten Einstellungen überhaupt: Code beim Speichern automatisch formatieren. Öffne die settings.json über die Kommandopalette und ergänze:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "files.autoSave": "onFocusChange"
}

Ab jetzt musst du dich nie wieder um Einrückungen und Leerzeichen kümmern – das übernimmt Prettier automatisch bei jedem Speichern.

Projektbezogene Einstellungen teilen

Arbeitest du im Team, möchtest du, dass alle dieselben Einstellungen nutzen. Lege dafür im Projekt einen Ordner .vscode mit einer eigenen settings.json an. Diese überschreibt die globalen Einstellungen nur für dieses Projekt:

{
  "editor.rulers": [80, 120],
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true
}

Checkst du diesen Ordner ins Repository ein, profitiert das ganze Team von einheitlichen Vorgaben – ohne dass jeder von Hand etwas einstellen muss.

Das integrierte Terminal nutzen

Du musst VS Code nicht verlassen, um Befehle auszuführen. Mit Strg + Ö (bzw. dem Backtick-Zeichen) öffnest du das integrierte Terminal direkt im Editor. So hast du Code und Befehle nebeneinander:

# Direkt im VS-Code-Terminal arbeiten
npm run dev

# Mehrere Terminals parallel öffnen und benennen
# (über das + und das Dropdown im Terminal-Panel)

Praktisch: Klickst du in einer Fehlerausgabe auf einen Dateipfad, springt VS Code direkt an die richtige Stelle im Code.

Code-Snippets selbst anlegen

Tippst du bestimmte Codeblöcke immer wieder, lohnt sich ein eigenes Snippet. Über die Kommandopalette ("Configure User Snippets") legst du eigene Vorlagen an:

{
  "Konsolen-Log": {
    "prefix": "clg",
    "body": "console.log('$1', $1);",
    "description": "Schnelles console.log"
  }
}

Tippst du jetzt clg und drückst Tab, fügt VS Code automatisch die Vorlage ein. Das spart bei wiederkehrenden Mustern enorm viel Zeit.

Fazit

VS Code wird erst mit den richtigen Kniffen zum produktiven Werkzeug. Mit ein paar Tastenkürzeln, den passenden Erweiterungen wie Prettier und GitLens sowie sinnvollen Einstellungen wie formatOnSave sparst du täglich Zeit. Projektbezogene Einstellungen sorgen im Team für Einheitlichkeit, und eigene Snippets nehmen dir Tipparbeit ab. Such dir aus diesem Beitrag zwei oder drei Tipps heraus und baue sie diese Woche in deinen Alltag ein – der Rest folgt von ganz allein.