zurück zum Artikel

Visual Studio Code, Teil 2: Den Code-Editor durch Erweiterungen ausbauen

Fabian Deitelhoff

VS Code ist vielseitig erweiterbar und lässt sich zudem für unterschiedliche Bedürfnisse konfigurieren. Teil 2 der Serie stellt die Erweiterungen vor.

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.

Visual Studio Code – dreiteilige Serie

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 [3]. Andere Erweiterungen binden das Language Server Protocol (LSP) als Server ein, um beispielsweise IDEs (Entwicklungsumgebungen) wie Apache NetBeans einzubinden [4]. Auch umfangreiche Frameworks wie Spring Boot arbeiten mittlerweile problemlos mit Visual Studio Code zusammen [5]. Der Extension Manager innerhalb von VS Code listet zahlreiche Möglichkeiten zur Erweiterung auf (s. Abb. 1).

Der Extension-Manager in VS Code (Abb. 1)

Der Extension-Manager in VS Code (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.

Ein beispielhaftes Extension Pack zu den Azure Tools (Abb. 2)

Ein beispielhaftes Extension Pack zu den Azure Tools (Abb. 2)

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 [6] 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 [7].

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 [8]. 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.

Übersicht der Einstellungen in VS Code inklusive Suche (Abb. 3)

Übersicht der Einstellungen in VS Code inklusive Suche (Abb. 3)

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 sei [9]n. 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 [10] 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 [11]" oder im Webentwicklungs-Blog von Amit Merchant der Eintrag "Making my VS Code minimal and distraction-free [12]").

VS Code wird oft als quelloffener Code-Editor bezeichnet. Das ist korrekt – allerdings mit Einschränkungen. An dieser Stelle gilt es zwischen VS Code an sich und dem Projekt "Code OSS" zu unterscheiden. VS Code baut mehr auf Open-Source-Software (OSS) auf, als selbst eine zu sein.

"Code – OSS [13]" ist der offizielle Name des Projekts im GitHub-Repository. Es nutzt die MIT-Lizenz, sodass es kompatibel mit der Open Source Initiative ist. Zudem ist die Software dadurch frei und kompatibel zum GNU-GPL-Projekt. Wenn VS Code aber aus diesen Quellen gebaut wird, fügt Microsoft ein paar weitere Funktionen hinzu und veröffentlicht die Dateien unter den proprietären Bedingungen der Lizenz von Microsoft (Microsoft Software License Terms [14]). So kann Microsoft das "Code – OSS"-Projekt nutzen, um daraus einen eigenen Build zu erzeugen – mit proprietärem Logo, proprietären Namen und APIs, der Telemetriedaten sammeln kann. Gerade der letzte Punkt erzeugt immer wieder Reibungen. Deutliche Erwähnung finden sie in den Microsoft Software License Terms.

Dass es mit dem Erheben von Telemetriedaten Probleme gibt, ist nicht verwunderlich: Viele Organisationen, Institutionen oder Personen haben berechtigte Bedenken gegenüber der Übermittlung ihrer Daten an Microsoft. Aus eigener Erfahrung mit einem Start-up im Bildungsbereich lässt sich sagen, dass es dort immer wieder Diskussionen gibt, wenn VS Code zum Einsatz kommen soll.

Der Sachverhalt mit den Telemetriedaten lässt sich auf zwei verschiedene Arten angehen. Da es sich um eine globale Option handelt, kann man telemetry.enableTelemetry in den Benutzerdaten von true auf false setzen. Das unterbindet im Wesentlichen das Sammeln und Übertragen der Daten. Beim sogenannten Crash Reporting sammelt VS Code Daten über den aufgetreten Fehler und schickt sie an Microsoft, damit der Fehler analysiert wird. Dieses Verhalten lässt sich mit der Einstellung enable-crash-reporter deaktivieren, wenn man die Option auf false ändert. In beiden Fällen ist ein Neustart des Programms sinnvoll.

Was beim Deaktivieren der Telemetriedaten nicht zwangsläufig aufhört, ist das mögliche Datensammeln durch die Erweiterungen. Diese halten sich nicht immer an die globale Benutzeroption und können unter Umständen fleißig weiter sammeln. Da hilft es nur, jede einzelne Erweiterung zu prüfen. Ein Blick in das Telemetry-Log offenbart, welche Programme weiterhin Daten erfassen und verschicken. Dazu ist das Log-Level von VS Code über die Einstellungen auf Trace zu setzen, im Output-Fenster erscheint anschließend der Eintrag Log (Telemetry). Abbildung 4 zeigt, wie das Ergebnis aussehen kann, wenn das Fenster geöffnet ist. Zusätzlich landen die Telemetrie-Events in der lokalen Datei telemetry.log.

BBeispielhaft erfasste Telemetriedaten einer VS-Code-Instanz (Abb. 4)

Beispielhaft erfasste Telemetriedaten einer VS-Code-Instanz (Abb. 4)

Es darf nicht unerwähnt bleiben, dass VS Code Online-Dienste nutzt und die Übertragung von Daten davon ebenfalls betroffen ist. In den Einstellungen findet sich die Option @tag:usesOnlineServices: Sie zeigt sämtliche Einstellungen, die das Datensammeln und die Nutzung einzelner Online-Dienste steuern. Für jeden dieser Dienste lässt sich individuell entscheiden, ob die Nutzung in Ordnung geht oder nicht.

Wie oben erwähnt, gibt es noch einen zweiten Weg, mit den Telemetriedaten umzugehen: Sie heißt VSCodium und ist eine Sammlung von Skripten, um aus den Quelltexten von Code OSS ein Binary mit einer von der Community definierten Standardkonfiguration zu erstellen. Das Projekt samt seinen Binaries steht unter der MIT-Lizenz und ist auf GitHub zu finden, VSCodium erhebt keine Telemetriedaten [15]. Die Herausgeber betonen, dass es sich bei VSCodium nicht um einen Fork von VS Code handelt. Dateien damit zu erzeugen, gilt in der Community als gängiger Weg, um das Erfassen von Telemetriedaten zu umgehen.

Ein paar Worte zum Umgang mit Contributions: Neue Issues zum Projekt werden durch einen "issue-tagger"-Bot oder durch ein Team-Mitglied bearbeitet. Pro Woche ist jeweils eine andere Person im Team für die öffentliche Issue-Inbox zuständig. Architekturänderungen diskutiert die Community umfassend. Grundsätzlich ist aber jeder dazu eingeladen, gemeldete Fehler und Verbesserungen zu bearbeiten. Entwickler müssen ein Contributor License Agreement (CLA) unterzeichnen, bevor Änderungen in VS Code übernommen werden können. Dieser Prozess ist automatisiert und stellt für Microsoft sicher, dass der Community-Code von denen, die unterzeichnet haben, genutzt werden darf.

VS Code muss den Vergleich mit anderen etablierten Entwicklungsumgebungen und Code-Editoren nicht mehr scheuen. Je nach Technologie und Zielgruppe gibt es zwar größere Unterschiede, aber die Lücken werden kleiner, da die Palette an Features in VS Code beständig wächst und die Funktionalitäten der Erweiterungen ebenfalls umfassender werden.

Mittlerweile dient VS Code auch als Blaupause für andere Entwicklungsumgebungen [16], beispielsweise bei der Konzeption von Eclipse Theia – ein Vergleich der beiden zeigt das recht deutlich, insbesondere beim Usability-Konzept. Vergleiche zum "großen Bruder", der kompletten Entwicklungsumgebung Visual Studio, sind ebenfalls oft anzutreffen, da beide von Microsoft stammen. Der Abstand schwindet aber zusehends, da die Erweiterungen in VS Code immer mehr Aufgaben einer klassischen Entwicklungsumgebung übernehmen. Zudem hat VS Code mittlerweile einen erheblichen Vorsprung in Sachen Performance.

Die Erweiterbarkeit von Visual Studio Code ist der Grund, warum der Editor in zahlreichen Ökosystemen zum Einsatz kommen kann und recht verbreitet ist bei Entwicklungsteams. Zudem bietet der Sourcecode-Editor zahlreiche Einstellungsmöglichkeiten, und die Flexibilität ist ein Grund für seine Verbreitung.

Das Thema Lizenzen hingegen ist etwas heikel, da die Binaries des von Microsoft ausgelieferten Editors mit einer proprietären Lizenz ausgestattet sind, den Microsoft Software License Terms [17]. Ein Blick in das Repository von VS Code auf GitHub [18] zeigt aber, dass dort die MIT-Lizenz angegeben ist. Für die fertig paketierte Version von VS Code ändert Microsoft also die Lizenz gegenüber der Open-Source-Version. Der Grund dafür sind die Telemetriedaten, die Microsoft sammelt (Punkt 2 "DATA" in der Lizenz). In der quelloffenen Version ist das Sammeln nicht vorgesehen. Die von der Anwendung gesammelten und an Microsoft übermittelten Telemetriedaten erhitzen die Gemüter weiterhin. Wer die vorgefertigte Version nutzen möchte, kommt um die umstrittene Weitergabe der Telemetriedaten an Microsoft nicht herum – alternativ könnte man sich eine eigene lauffähige Version bauen oder auf VSCodium ausweichen [19].

Den Vergleich mit anderen Editoren oder Entwicklungsumgebungen muss Visual Studio Code schon lange nicht mehr fürchten. Selbstverständlich gibt es Gründe, eine andere IDE zu nutzen, wenn beispielsweise ein Ökosystem spezielle Entwicklungsumgebungen verlangt oder bereitstellt. Mitunter ist es jedoch einfach die Gewohnheit. Ein vergleichender Blick auf Visual Studio Code lohnt sich allemal.

Der letzte Teil dieser dreiteiligen Serie wird zeigen, wie man Erweiterungen für Visual Studio Code selbst implementiert und was dabei zu beachten ist.

Dr. Fabian Deitelhoff
lebt und arbeitet in Dortmund, der Metropole des Ruhrgebiets. Am CET (Centrum für Entrepreneurship & Transfer) der TU Dortmund arbeitet er als Innovations- und Transfermanager. Er hat brickobotik gegründet und ist als Softwareentwickler sowie Autor tätig.

(sih [20])


URL dieses Artikels:
https://www.heise.de/-6147512

Links in diesem Artikel:
[1] https://www.heise.de/hintergrund/Visual-Studio-Code-Ein-Code-Editor-fuer-alle-s-6128966.html
[2] https://www.heise.de/hintergrund/Visual-Studio-Code-Teil-2-Den-Code-Editor-durch-Erweiterungen-ausbauen-6147512.html
[3] https://mspoweruser.com/google-vs-code-go-extension-microsoft/
[4] https://www.heise.de/news/Entwicklungsumgebung-Apache-NetBeans-12-3-baendelt-mit-Visual-Studio-Code-an-5078773.html
[5] https://www.golem.de/news/software-entwicklung-spring-boot-meets-visual-studio-code-2103-154241.html
[6] https://github.com/microsoft/vscode/tree/main/extensions
[7] https://marketplace.visualstudio.com/VSCode
[8] https://code.visualstudio.com/docs/getstarted/settings
[9] https://github.com/tonsky/FiraCode
[10] https://www.amitmerchant.com/making-my-vs-code-setup-minimal-and-distraction-free/
[11] https://dev.to/ok9xnirab/vscode-clean-minimal-setup-34f6
[12] https://www.amitmerchant.com/making-my-vs-code-setup-minimal-and-distraction-free/
[13] https://github.com/microsoft/vscode
[14] https://code.visualstudio.com/license
[15] https://github.com/VSCodium/vscodium
[16] https://eclipsesource.com/de/blogs/2019/12/06/the-eclipse-theia-ide-vs-vs-code/
[17] https://code.visualstudio.com/License/
[18] https://github.com/microsoft/vscode/blob/main/LICENSE.txt
[19] https://github.com/VSCodium/vscodium
[20] mailto:sih@ix.de