Visual Studio Code Extensions: Unsere Empfehlungen
VS Code ist ein beliebter Code-Editor, für den zahlreiche Extensions verfügbar sind. Auf welche Extensions unsere Entwickler*innen setzen, erfährst du hier!
Visual Studio Code
Visual Studio Code (kurz VS Code) ist ein Open-Source-Editor von Microsoft, der für die Betriebssysteme Windows, macOS und Linux kostenlos zur Verfügung steht. Nach Umfragen von StackOverflow und Wakatime hat sich VS Code nicht nur bei unseren Entwickler*innen von wigital bewährt, sondern ist allgemein einer der beliebtesten Programme für die Bearbeitung von Quellcode von Computerprogrammen.
Was sind VS Code Extensions und sind sie für dich interessant?
Eine der Hauptgründe für die Beliebtheit von VS Code sind sicherlich die zahlreichen Anpassungs- und Erweiterungsmöglichkeiten durch Extensions ( zu deutsch “Erweiterung“). Mit Extensions können Entwicklungsumgebungen an die ganz bestimmten Bedürfnisse und Vorlieben von Entwickler*innen angepasst werden und – richtig gewählt - die Nutzungserfahrung verbessern und die Produktivität steigern.
Wahl der Extentions
Aus diesen Gründen lohnt sich ein genauerer Blick auf Visual Studio Code Extensions. Dabei ist es gar nicht so einfach, in der großen Menge der zur Verfügung stehenden Erweiterungen die passenden zu finden, denn zu viele oder überflüssige Extensions können deine Entwicklungsumgebung schnell überladen. Hier gilt es, die Extensions herauszusuchen, die sich für deine Zwecke eignen und deinen Entwicklungsprozess tatsächlich fördern.
Um dir dabei zu helfen, haben wir einige unsere Entwickler*innen gefragt, welche VS Code Erweiterungen bei ihnen zum Einsatz kommen. Eine Auswahl davon stellen wir dir im Folgenden vor. Neben einer kurzen Beschreibung der Extensions liefern wir dir neben Preis und Downloadzahlen einen Link zum Extensions-Download. Dort findest du auch eine Installationsanleitung.
VS Code Extensions – unsere Empfehlungen
Auto Rename Tag
Die Auto Rename Tag Erweiterung benennt sowohl öffnenden als auch schließende Tags eines HTML-Elements automatisch um, wenn eines von ihnen geändert wird. Hast du beispielsweise folgende Code-Zeile vorliegen<div> Hello World! </div> und änderst den Start-Tag von <div> in <span>, wird das End-Tag </div> automatisch zu </span> geändert.
Vor allem bei der Arbeit mir großen und komplexen (reinen) HTML-Dateien kann diese Extension helfen, Zeit zu sparen und das Fehlerrisiko zu verringern.
- Preis: kostenlos
- Downloadzahlen: ca. 13 Mio.
Prettier – Code formatter
Das Produzieren von einheitlichem und konsistentem Code sollte im Hinblick auf optimale Lesbarkeit, Verständnis und Klarheit ein Ziel aller Entwickler*innen sein und gewinnt vor allem bei der Arbeit im Team erheblich an Bedeutung.
Prettier ist ein Code-Formatierer, der einen konsistenten Stil in deinem Code erzwingt. Dabei kann in den Einstellungen festgelegt werden, dass der Code nicht nur beim Ausführen des Befehls Format Document sondern auch bei jedem Speichervorgang automatisch formatiert wird.
So erleichtert dir die Prettier-Extension unter anderem bezüglich der Sprachen JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular HANDELBARS und YAML das Führen von konsistentem Code.
- Preis: kostenlos
- Downloadzahlen: ca. 30 Mio.
CSS Peek
Mit CSS Peek können Style-Definitionen für verschiedenen Klassennamen und IDs, die im HTML-Code zugewiesen sind, schnell angezeigt werden, was zu einem effektiverem und für viele Entwickler*innen auch intuitiverem Arbeiten führt:
Mit dieser Extension können IDs und Klassennamen in Hyperlinks zu den entsprechenden Definitionen in der CSS/SCSS/Less-Datei umgewandelt werden. Anstatt den Tab zu wechseln und in der Styling-Datei nach einem bestimmten Abschnitt zu suchen, kannst du diesen dann durch einen Mausklick öffnen. Außerdem ist es möglich, Styling-Dateien inline in den HTML-Code zu laden oder dir bestimmte Style-Anweisungen durch Hovern über Klassennamen und IDs direkt anzeigen zu lassen.
- Preis: kostenlos
- Downloadzahlen: ca. 4 Mio.
PHP Intelephense
Diese PHP-Extensionfür VS Code bietet dir die Möglichkeit, wichtige PHP-Unterstützungen in deine Entwicklungsumgebung zu holen: Neben einem Live Syntaxchecker wird vor allem die Autovervollständigung von unseren Entwickler*innen gerne genutzt. Wenn du oft mit PHP arbeitest, könnte diese Erweiterung für dich interessant sein.
- Preis: kostenlos in der Light-Version; ansonsten einmalig 16,81 Euro
- Downloadzahlen: ca. 8 Mio. (Gratis-Version)
Zum Download der Light-Version
Zum Download der kostenpflichtigen Version
PHPDoc Comment
Ein ausreichend und verständlich kommentierter Code ist für Entwickler*innen unabdingbar. Sowohl für dich selbst, als auch für dein Team trägt ein gut kommentierter Code zum Verständnis und Weiterentwicklung in der Zukunft bei und steigert so die Effektivität. Je nach Programmiersprache bietet VS Code zahlreiche Extensions, die dir dabei helfen. Für die Programmiersprache PHP, die auch bei wigital häufig zum Einsatz kommt, kann das PHPDoc Comment Erweiterung genutzt werden, um automatisch PHPDoc-Blöcke für Funktionen, Variablen und Klassen hinzuzufügen.
- Preis: kostenlos
- Downloadzahlen: ca. 122.000
GitLens
Visual Studio Code besitzt bereits integrierte nützliche Git-Funktionen. Mit der GitLens-Extension, das eines der beliebtesten Git-Extensions für VS Code darstellt, kannst du diese Git-Funktionen erweitern. Dabei bietet GitLens eine Vielzahl an Features: So können beispielsweise auf Zeilenebene Blame-Informationen (Autoren-Metadaten) angezeigt, Git-Repositories durchsucht und Branch-Historien sowie Änderungs-Heatmaps angezeigt werden, um nur eine geringe Auswahl an Möglichkeiten zu nennen.
Vor allem bei großen Projekten mit einer Vielzahl an Änderungen von mehreren Personen trägt GitLens zum Code-Verständnis und Überblick bei. Diese kostenlose Erweiterung ist deshalb bei vielen Entwickler*innen kaum noch wegzudenken.
- Preis: kostenlos
- Downloadzahlen: ca. 21 Mio.
Docker
Mit der Open-Source-Plattform Docker können containerisierte Anwendungen erstellt, zur Verfügung gestellt und verwaltet werden. Wer Docker benutzt, sollte sich diese Extension einmal genauer anschauen: Mit einem Syntax-Highlighter, Code-Vervollständigung, Debugging-Optionen und der Möglichkeit, Container innerhalb von VS Code aus der Docker-Datei zu erstellen, erleichtert diese Erweiterung die Erstellung, Bearbeitung und das Debugging von containerisierten Anwendungen.
- Preis: kostenlos
- Downloadzahlen: ca. 22 Mio.
Fazit
Schon nach dieser kleinen Auswahl wirst du vielleicht bemerkt haben, dass die Auswahl an Visual Studio Code Extensions so vielfältig wie der Bereich der Anwendungsentwicklung selbst ist. Je nach deinem Aufgabenbereich, der von den Aufgaben hier bei wigital abweichen könnte, sind die vorgestellten Extensions mehr oder weniger relevant für dich. Vor allem vor dem Hintergrund der Individualisierung von Entwicklungsumgebungen – sicherlich einer der größten Vorteile von VS Code Extensions - ist es letztendlich wichtig festzuhalten, dass die Wahl der Erweiterungen ganz von deinen Aufgaben, Zielen und Vorlieben abhängt.
Mit dieser Auswahl liefern wir einen kleinen Überblick und zeigen, welche Vorteile dir VS Code Extensions beispielsweise bieten können. Aufgrund der Erfahrungen unserer Entwickler*innen sowie den hohen Downloadzahlen sind wir überzeugt davon, dass einige der Erweiterungen auch für dich hilfreich sein könnten. Falls noch nicht das passende für dich dabei war oder du darüber hinaus nach weiteren Extensions sucht, könntest du sie auf dem VS Code Marketplace finden.
Insgesamt sollen die vorgestellten Extensions dich dazu inspirieren, die Vorteile die die vorgestellten, aber auch andere Extensions liefern können, zu nutzen.
Autorin: Christin Rimbach