Visual Studio Code, Teil 2: Den Code-Editor durch Erweiterungen ausbauen
VS Code ist vielseitig erweiterbar und lässt sich zudem für unterschiedliche Bedürfnisse konfigurieren. Teil 2 der Serie stellt die Erweiterungen vor.
- Dr. Fabian Deitelhoff
Viele Features von Visual Studio Code basieren auf Erweiterungen: Der Host von Visual Studio lädt kleine oder auch große Plug-ins und stellt sie anschließend seinen Nutzerinnen und Nutzern zur Verfügung. Beispielsweise lassen sich damit verschiedene Programmiersprachen, Compiler oder Debugger einbinden. Im zweiten Teil geht es um die Erweiterbarkeit von Visual Studio Code und die zahlreichen Anpassungsmöglichkeiten. Da der Editor an die eigenen Bedürfnisse anpassbar ist, unterstützt er den Arbeitsprozess zahlreicher Zielgruppen. Zum Schluss wirft dieser Teil einen Blick auf die verwirrende Lizenzthematik, das Thema Open Source und auf die Telemetrie-Daten, die vielen Nutzern ein Dorn im Auge sind, unter anderem beim Einsatz im Bildungsbereich.
Umfangreiche Erweiterbarkeit
Die Erweiterbarkeit von VS Code basiert auf einigen APIs und dem Extension Marketplace, der es erlaubt, Erweiterungen direkt aus dem Visual Studio Code Marketplace herunterzuladen und zu installieren. Abbildung 1 zeigt die Übersicht der Erweiterungen in VS Code. Die linke Seite des Dashboards ist unterteilt in installierte (oben) und empfohlene Erweiterungen (unten). Auf der rechten Seite ist eine Erweiterung im Detail angezeigt, in diesem Beispiel die C#-Erweiterung von Microsoft auf Basis von OmniSharp. Über die Schaltfläche im oberen Bereich auf der rechten Seite der Nutzeroberfläche lässt sich eine Erweiterung aktivieren und deaktivieren beziehungsweise installieren und deinstallieren.
Bei der Erweiterung für die Google-Programmiersprache Go war das Interesse daran so groß, dass zuletzt mehr als 40 Prozent der Go-Entwicklerinnen und -Entwickler VS Code nutzten. Die Go-Erweiterung hatte ursprünglich Microsoft gepflegt, mittlerweile kümmert sich Google selbst um die weitere Entwicklung. Andere Erweiterungen binden das Language Server Protocol (LSP) als Server ein, um beispielsweise IDEs (Entwicklungsumgebungen) wie Apache NetBeans einzubinden. Auch umfangreiche Frameworks wie Spring Boot arbeiten mittlerweile problemlos mit Visual Studio Code zusammen. Der Extension Manager innerhalb von VS Code listet zahlreiche Möglichkeiten zur Erweiterung auf (s. Abb. 1).
Zusätzlich zu den einzelnen Erweiterungen existieren sogenannte Extension Packs, Sammlungen von Erweiterungen, die gemeinsam installierbar sind. Abbildung 2 zeigt das am Beispiel der Azure Tools. Beim Installieren landen elf Erweiterungen zugleich in VS Code, darunter solche für Azure Functions, CLI Tools (Command Line Interface), Databases, App Service und Pipelines. Zwar lassen die jeweiligen Erweiterungen sich auch einzeln installieren, ein gebündeltes Paket gebräuchlicher Erweiterungen dürfte aber eine willkommene Erleichterung darstellen.
Die Implementierung einer Erweiterung Schritt für Schritt zu beschreiben, würde an dieser Stelle zu weit führen. Die Liste der Erweiterungen im VS Code Repository auf GitHub verdeutlicht, wie viele bereits verfügbar sind und dass eine Reihe von Standard-Funktionen in VS Code ebenfalls auf Erweiterungen basieren – von außen betrachtet bleibt das unsichtbar. Im Marketplace zu Visual Studio Code lassen sich die Erweiterungen durchsuchen und zum Beispiel nach dem Grad der Verbreitung oder den abgegeben Bewertungen filtern.
Einstellungen und ein minimalistischer Code-Editor
VS Code lässt sich weitreichend konfigurieren. Über die Einstellungen des Code-Editors ist praktisch jeder Bereich, von Funktionen über Verhaltensweisen und das Aussehen, für die eigenen Bedürfnisse anpassbar. Die Einstellungen befinden sich in der Datei settings.json, die man entweder direkt als JSON-Datei oder über ein User Interface (UI) konfigurieren kann. Die Konfigurationsdatei hat Bereiche für die Benutzer- und für die Workspace-Einstellungen. Erstere gelten global für alle aktuellen und zukünftigen VS-Code-Instanzen. Letztere beziehen sich auf den momentan geöffneten Workspace. Eine Suche für Einstellungen rundet das Angebot ab, sodass eine spezifische Option schnell wieder auffindbar ist.
Die schiere Anzahl der Einstellungen erlaubt es nicht, an dieser Stelle alle vorzustellen. Das ist auch nicht notwendig, einige ausgewählte Beispiele können einen ersten Überblick verschaffen. Die folgende Auswahl stellt einige besonders nützliche Einstellungen vor.
Wer einen Formatter wie Prettier oder Ähnliches einsetzt, kann mit "editor.formatOnPaste": true VS Code veranlassen, beim Einfügen den Code aus der Zwischenablage direkt zu formatieren. Das spart Zeit und beugt Verwirrungen vor, weil der Quellcode nicht ungeordnet im Editor steht. In eine ähnliche Richtung geht die Einstellung "editor.formatOnSave": true, um den Code beim Speichern zu formatieren.
Viele Entwicklerinnen und Entwickler schwören mittlerweile auf Schriftarten mit Ligaturen, und die Schriftart Fira Code scheint besonders beliebt zu sein. Die beiden Einstellungen "editor.fontFamily": "Fira Code" und "editor.fontLigatures": true aktivieren diese Schrift, die durch ihre Ligaturen die Lesbarkeit erhöhen sollen.
Wer oft auf der Suche nach ungespeicherten Änderungen in Editor-Fenstern ist, kann sich diese Tabs mit nicht gespeichertem Inhalt zusätzlich über die Einstellung "workbench.editor.highlightModifiedTabs": true hervorheben lassen. Änderungen lassen sich aber auch direkt speichern, zum Beispiel mit "files.autoSave": "afterDelay" nach einer Verzögerung.
Wer die Sortierreihenfolge im Datei-Explorer anpassen möchte, kann das unter anderem wie folgt machen: "explorer.sortOrder": "type"/[code]. Dadurch sind die Dateien nach dem Dateityp sortiert. Alternativ sortiert [code]"modified" nach der letzten Änderung.
Die Extension "Settings Sync" speichert die Einstellungen von VS Code über GitHub in einem Gist (Pastebin Service), sodass auf verschiedenen Geräten identische Einstellungen zur Verfügung stehen. Wer sich besser auf den Code konzentrieren möchte, kann seinen Editor entsprechend einstellen. Über die einzelnen Schritte zum Erzeugen eines minimalistischen User Interface informiert ein Blogbeitrag. Weitere Tipps und Tricks sind beispielsweise auf der Website von VS Code zu finden.
Unter dem Begriff des "Minimal User Interface" oder "VS Code Minimalism" arbeitet eine lebhafte Community daran, die Oberfläche so anzupassen, dass viele Elemente vereinfacht sind oder direkt entfallen. Dazu gehören die Bereiche Activity Bar, Status Bar, Minimap, die geöffnete Editor-Sektion und das Hauptmenü. Zudem passen Entwicklerinnen und Entwickler häufig Schriftart und Größe an und verändern Tastaturbefehle. Dabei verändern sie die Standardeinstellungen von VS Code meist stark. Allerdings sind diese Einstellungen auch nicht für jeden etwas, da viele Features zunächst standardmäßig deaktiviert beziehungsweise versteckt sind. Wer die Einstellungen ausprobieren möchte, findet in zahlreichen Blogbeiträgen vorgefertigte Setting-Dateien zum direkten Testen (beispielsweise im Blogeintrag von Istiaq Nirab auf dev.to "VSCode Clean & Minimal Setup" oder im Webentwicklungs-Blog von Amit Merchant der Eintrag "Making my VS Code minimal and distraction-free").
