Visual Studio Code: Tipps für das produktive Arbeiten

Visual Studio Code – kurz VS Code ist ein quelloffener, kostenloser und plattformübergreifender Code-Editor, der sich aktuell bei Entwicklern großer Beliebtheit erfreut. In diesem Artikel zeige ich dir praxisnahe Tipps, mit denen du noch produktiver arbeitest.

Sinnvolle Einstellungen

VS Code lässt sich unter Datei → Einstellungen (bzw. Strg+,) umfangreich konfigurieren. Generell würde ich dir folgende Einstellungen empfehlen:

wordWrap: true – Suche in den Einstellungen nach dem Stichwort Word Wrap und schalte es ein, damit lange Zeilen in deinem Code automatisch umbrechen. Ansonsten müsstest du horizontal scrollen, um das Ende einer langen Zeile sehen zu können.

editor.formatOnSave: true – Aktiviert die automatische Formatierung des Codes beim Speichern der Datei.

explorer.sortOrder: auf den Wert „modified“ setzen, um die Darstellung in der Explorer-Seitenleiste nicht nach Namen, sondern nach Änderungsdatum zu sortieren.

editor.bracketPairColorization.enabled: true – um zusammengehörige Klammern farblich zu markieren

Bei den Einstellungen unterscheidet man zwischen Benutzereinstellungen bzw. Workspace-Einstellungen: Du kannst unter dem Menüpunkt Datei → Einstellungen entweder generelle Einstellungen für alle Projekte (Benutzer) oder solche nur für das aktuelle Projekt (Arbeitsbereich) wählen. Ersteres gilt global für alle Projekte, letzteres nur für das aktuelle. Sehr praktisch, wenn du z. B. für ein Projekt andere Formatierungsregeln brauchst.

Oberfläche einrichten

Wenn du mehr Platz auf deinem Monitor benötigst, kannst du die linke Seitenleiste einklappen: Drücke Cmd+B (Mac) bzw. Ctrl+B (Windows/Linux), um mehr Platz für den Code zu schaffen.
Mir persönlich ist die voreingestellte Schriftgröße des Editors ein bisschen zu klein, aber sie lässt sich anpassen: Cmd + / Ctrl + vergrößert schrittweise die Schrift.
Minimap ein-/ausblenden: Mit der Minimap kannst du in umfangreichen Dateien ein bisschen einfacher scrollen. Die Minimap, die oben rechts im Programmfenster einen Überblick über den Inhalt deiner aktuellen Datei gibt, kannst du an- oder ausschalten, indem du (in Version 1.101) auf Anzeigen → Darstellung und dann Minimap gehst. Alternativ kannst du auch einen Rechtsklick auf der rechten Scroll-Leiste ausführen und die Minimap ein- oder ausblenden. Das Aussehen der Minimap selber kannst du über Datei → Einstellungen → Einstellungen konfigurieren.

Effizienter Code-Workflow

Tabs und Splitscreen nutzen

Wenn du an mehreren Dateien gleichzeitig arbeitest (z. B. HTML, CSS und JavaScript), kannst du durch Tabs oben schnell wechseln oder mit einem Klick auf das Icon „Editor rechts teilen“ (Doppelfenster-Symbol oben rechts) zwei oder mehr Dateien parallel anzeigen. Alternativ: Rechtsklick auf eine Datei im Explorer von VS Code → An der Seite öffnen.

Mehrere gleichzeitige Cursor

Ein echtes Power-Feature: Markiere Text in deinem Code und drücke Ctrl+D (Windows/Linux) oder Cmd+D (Mac), um weitere Vorkommen auszuwählen und gleichzeitig zu bearbeiten – ideal für schnelle Massenänderungen.

Tastenkombinationen

Mach dich gerne mit den Tastenkombinationen in VS Code vertraut. Du kannst zum Beispiel mit Command + Shift + 7 Kommentare in deinen Quellcode einsetzen. Eine Übersicht über alle Tastenkombinationen findest du, wenn du unten links auf das Verwalten-Icon (das Zahnrad) klickst und dann auf Tastenkombinationen gehst.

Nutze die Befehlspalette von Visual Studio Code

Die Befehlspalette ist ein zentrales Werkzeug, mit dem du schnell auf viele Funktionen, Befehle und Einstellungen zugreifen kannst, ohne dass du durch Menüs oder die Benutzeroberfläche navigieren musst. Du kannst sie dir mit Cmd+Shift+P (Mac) oder Ctrl+Shift+P (Linux/Windows) anzeigen lassen.
Um zum Beispiel einem Bild die Attribute für Breite und Höhe zuzuweisen, lasse ich mir die Befehlspalette anzeigen und gebe den Befehl „size“ ein, um einem Bild die entsprechenden Größen-Attribute automatisch zuzuweisen.

Schneller Coden mit IntelliSense, Emmet und Snippets

IntelliSense bietet dir beim Schreiben automatisch passende Code-Vervollständigungen an. Das ist in VS Code bereits voreingestellt, hier musst du nichts ändern. Ein weiteres super hilfreiches Hilfsmittel zum schnellen Schreiben von Code ist Emmet, ein leistungsstarkes Snippet-Tool für HTML und CSS. Ein einfaches ! + Tab erzeugt z. B. ein vollständiges HTML-Grundgerüst. Für eine tiefergehende Einführung lohnt sich ein Blick auf https://emmet.io/ oder das Youtube-Tutorial „Optimiere Emmet in VSCode“ auf https://www.youtube.com/watch?v=GX81t3pdLDI.

Und wenn du ganze Codeschnipsel schnell in dein Projekt einfügen möchtest, dann sind die so genannten Codes Snippets empfehlenswert.
Um eigene Snippets anzulegen, kannst du die Befehlspalette öffnen und „Snippets“ eingeben. Wenn du das auswählst, findest du eine Übersicht über vorhandene Snippets oder kannst neue erstellen.
Ein gut gemachtes Video zum Thema „Eigene Code Snippets in Visual Studio Code anlegen“ findest du unter: https://www.youtube.com/watch?v=tPvaQBdIBLU, hier wird dir die Syntax anhand konkreter Beispiele erklärt.

Erweiterungen, die du ausprobieren solltest

VS Code ist mithilfe von Extensions umfangreich erweiterbar. Hier hat jeder Entwickler seine eigenen Lieblingserweiterungen. Was ich dir empfehlen kann, sind die folgenden Erweiterungen:

Live Server: Gibt dir eine Vorschau deiner Webseite in Echtzeit direkt im Browser. Besonders praktisch, wenn du auf einem sehr großen oder besser zwei Monitoren arbeitest.
MinifyAll: Ermöglicht das automatische Minifizieren und Komprimieren von gängigen Webdateien wie CSS, HTML, JavaScript oder JSON.
Auto Rename Tag: Ändert automatisch den schließenden oder öffnenden Tag beim Editieren (was du allerdings mit F2 auch ohne die Erweiterung erreichen kannst).
Prettier: VS Code hat bereits gute Formatierer eingebaut, aber mit dieser Erweiterung hast du noch ein paar mehr Einstellungsmöglichkeiten. Aktiviere Format on Save in den Einstellungen (settings.json) für ein automatisches Formatieren deines Quellcodes.
Icon Themes: Du kannst dir die Oberfläche des Programms mit verschiedenen so genannten Themes und Icon Themes anpassen. Hier wäre zum Beispiel das „Material Icon Theme“ oder die Erweiterung „VS Code-icons“ bei vielen Entwicklern beliebt. Es macht die Dateiansicht mit passenden Icons etwas übersichtlicher.
Aber die wichtigste Extension von allen ist sicherlich „vscode-pets“ 🙂

Ein guter Einstieg in die Extension-Welt ist „The Best VSCode Extensions 2024“ auf https://www.youtube.com/watch?v=YjhkcvS1xKU.

Arbeiten mit dem integrierten Terminal

VS Code bietet ein vollwertiges Terminal direkt im Editor. Wenn du also mit einer Software arbeiten möchtest, die keine grafische Benutzeroberfläche hat, dann kannst du das direkt aus VS Code steuern. Hier kannst du beispielsweise Bildkonvertierungen, npm-Befehle, Git-Kommandos oder Build-Skripte direkt ausführen, über: Terminal → Neues Terminal.
Wenn du dich mit dem Thema Terminal vertraut machen möchtest, empfehle ich einen Blick auf „Command Line Crash Course For Beginners“ – https://www.youtube.com/watch?v=uwAqEzhyjtw und meinen Artikel zum Thema Bilder für Websites aufbereiten unter https://web-einfach-machen.de/Blog/webproduktion/bilder-optimal-fuer-website-aufbereiten/.

Versionskontrolle mit Git und GitHub

Mit Git kannst du Quellcode verwalten. Es wurde entwickelt, um Änderungen an Dateien (meistens Quellcode) zu verfolgen und Zusammenarbeit zu ermöglichen. Während Github eine Kopie deines Codes und die dazugehörigen Repositories online zur Verfügung stellt. Github bietet:

Online-Speicherplatz und BackUps für deine Git-Projekte („Repositories“)
Werkzeuge für Zusammenarbeit (z. B. Pull Requests, etc.)
Versionsübersicht und Code-Vergleiche im Browser

Die Versionskontrolle ist nahtlos in VS Code integriert. Zunächst musst du Git auf deinem Rechner installieren. Du kannst Git unter anderem von https://git-scm.com/downloads runterladen oder unter Linux mit sudo apt install git installieren.
Mehr zum Installieren und den Grundlagen von Git findest du auf https://lerneprogrammieren.de/git/, https://www.ionos.de/digitalguide/websites/web-entwicklung/git-tutorial/ oder https://www.youtube.com/watch?v=mJ-qvsxPHpY.

Wenn Git auf deinem Rechner installiert ist und du in Github angemeldet bist, kannst du in VS Code den Projektordner öffnen.
In der linken Seitenleiste auf das Quellcodeverwaltung-Icon klicken → Initialize Repository.
Neue Dateien sind dem Repository zunächst noch nicht hinzugefügt und mit U (untracked) markiert. Mit Klick auf + werden sie zum Repository hinzugefügt (A = added).
Den Branch (Zweig) umbenennen? Öffne die Befehlspalette (Cmd+Shift+P) und gib Rename ein.

Mehr zum Arbeiten mit Git in VS Code findest du unter anderem auf „Using Git with Visual Studio Code (Official Beginner Tutorial)“: https://www.youtube.com/watch?v=i_23KUAEtUM

Zum Thema Versionskontrolle gibt es in VS Code übrigens auch eine so genannte Zeitachse. Sie ist eine integrierte Funktion, die eine lokale Versionshistorie für jede Datei bereitstellt und es erlaubt, die Änderungen in einzelnen Dateien detailliert nachzuvollziehen – und das ganz ohne externe Plugins oder ein Git-Repository.

KI-Unterstützung: GitHub Copilot und Agent Mode

Es gibt zahlreiche Tools, die dir mit Hilfe von künstlicher Intelligenz das Arbeiten erleichtern, auch in Visual Studio Code kannst du dir mit Co-Pilot helfen lassen. Mit GitHub Copilot und dem Agent Mode kannst du künstliche Intelligenz direkt aus VS Code nutzen. Dazu musst du mit deinem GitHub-Konto angemeldet sein. Du kannst CoPilot in drei Modi nutzen:

Ask-Mode: Stelle Fragen zur Codebasis.
Edit-Mode: Lass Code direkt von der KI bearbeiten.
Agent-Mode: Copilot arbeitet wie ein Entwickler und fragt dich bei jedem Schritt nach Bestätigung.

Mit #fetch kannst du Copilot sogar gezielt Hinweise liefern, um spezifische Inhalte (z.B. von Webseiten oder Dokumentationen) in den Kontext einzubinden.

Schau dir dazu auch die Dokumentation unter https://code.visualstudio.com/docs/copilot/overview an. Zwei empfehlenswerte Videos hierzu: Copilot und Agent Mode in VS Code: https://www.youtube.com/watch?v=sYepbevm8TY und https://www.youtube.com/watch?v=dutyOc_cAEU.

Fazit

Visual Studio Code ist weit mehr als ein Code-Editor – es ist ein mächtiges, flexibles Werkzeug, das sich gut an deine individuellen Arbeitsgewohnheiten anpassen lässt. Wer die vielen Möglichkeiten kennt und gezielt nutzt, kann damit effizienter entwickeln.

Literaturhinweise

Du kannst VS Code von https://code.visualstudio.com/Download herunterladen.Weitere Tipps zu VS Code: https://code.visualstudio.com/docs/getstarted/tips-and-tricks
Und mein Video zu VS Code findest du unter: https://www.youtube.com/watch?v=NZ8XUWdBqzw

Sinnvolle Einstellungen

Oberfläche einrichten