IDEs wie Visual Studio Code gehören zum Alltag jeder Softwareentwicklerin und jedes Softwareentwicklers – egal ob im Mobile-, Web- oder Backend-Bereich. Was VS Code besonders spannend macht, ist, dass es sich erweitern lässt. Sogenannte “Extensions” ermöglichen es, die Arbeitsumgebung individuell zu gestalten, Prozesse zu automatisieren und neue Funktionen direkt in den Editor zu integrieren.

Obwohl ich bereits unzählige Stunden in IDEs wie VS Code verbracht habe, um Apps und mehr zu entwickeln, hatte ich mich bisher nie damit beschäftigt, wie sich die Entwicklungsumgebung selbst erweitern lässt.

Da ich die Idee hatte, in meiner Masterarbeit eine VS Code Extension zu entwickeln, wollte ich das Einzelprojekt im 3. Semester der Masterklasse Mobile nutzen, um erste praktische Erfahrungen mit der Entwicklung von VS Code Extensions zu sammeln, bevor ich mich an die separate Entwicklung des Masterarbeitsprojekts mache.

Das Ergebnis dieses explorativen Projekts ist “Cute Cat”: eine süße VS Code Extension, die unterschiedliche Möglichkeiten von VS Code Extensions kombiniert.

Features

Commands

Die Extension stellt mehrere Commands zur Verfügung, die direkt über die Command Palette in VS Code aufgerufen werden können:

• “Meow!” zeigt eine kurze Informationsnachricht.
• “Show me the cat“ öffnet ein Informations-Popup, in welchem auch mehrzeiliger Text verwendet werden kann.
• “Wake up cat“ aktiviert die WebView im Side Panel (falls sie nicht schon angezeigt wird) und zeigt eine überraschte Katze für ein paar Sekunden. Die WebView wird weiter unten im Detail beschrieben.
• “Wrap selection in try catch block“ erweitert den ausgewählten Code automatisch um einen try-catch-Block oder gibt eine Warnung aus, falls keine Auswahl getroffen wurde.

Themes

Neben funktionalen Features wurden auch eigene Designkomponenten umgesetzt:

• “Cute Cat Pastel Dark” Colour Theme
• “Cute Cat Pastel Icons” Icon Theme

Dabei lag der Fokus auf einer konsistenten visuellen Identität. Die Kombination aus sanften Pastelltönen und angepassten Icons verleiht der Extension einen klaren Wiedererkennungswert.

WebView Side Panel

Ein zentrales Element der Extension ist die WebView im Side Panel. Dort wird ein animiertes Katzen-GIF angezeigt, das dynamisch auf Kontextinformationen reagiert:

• Anpassung an die Tageszeit (z. B. „Good Morning“)
• Reaktion auf lange Coding-Sessions (z. B. schlägt die Katze dem*der User*in nach 4 Stunden vor, eine Kaffeepause einzulegen)
• Anzeige der aktuellen Session-Dauer
• Anzeige, wie lange die Extension insgesamt schon aktiv ist (“Did you know we have been friends for 19h 58min?“)

Zusätzlich kann innerhalb der WebView über ein Settings-Icon ein Modal geöffnet werden, in dem User*innen mit einem Klick die bereitgestellte Colour bzw. Icon Theme (de)aktivieren können.

Text Decorations

Ein weiteres Feature der Extension sind dynamische Text Decorations. In den geöffneten Texteditoren werden Schlüsselwörter wie “cat” und “cute” mit kleinen dekorativen Elementen versehen.

Projektaufbau

Vereinfacht dargestellt ist das Projekt wie folgt aufgebaut:

- media/
  - webViewScript.js
  - webViewStyles.css
  - [...Bilder]
- src/
  - extension.ts (Einstiegspunkt)
  - [...]
- themes/
  - color-theme.json
  - icon-theme.json
- [...]
- package.json (Manifest)

Wichtig sind hierbei die package.json Datei, in welcher die Commands, WebView und Themes deklariert werden, und die src/extension.ts Datei, welche den Einstiegspunkt der Extension darstellt:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    // ...
}

export function deactivate() {}

Challenges und Learnings

API-Dokumentation

VS Code bietet einen “Your First Extension” Guide und stellt viele Beispielprojekte zu unterschiedlichen Extension-Funktionalitäten für Entwickler*innen zur Verfügung. Trotzdem ist es manchmal nicht so leicht, das genaue Beispielprojekt, welches man sucht, zu finden. Ich würde zukünftigen Extension-Developer*innen empfehlen, direkt auf GitHub zu schauen (https://github.com/microsoft/vscode-extension-samples), anstatt nur in der VS Code Extension API zu suchen.

Falls man etwas Bestimmtes zur VS Code API nachschauen will, ist diese recht gut dokumentiert. Leider funktionieren einige Links auf der Website allerdings nicht, weshalb ich mich hauptsächlich mit der Suchfunktion (STRG+F) durch die API-Dokumentation arbeiten musste.

Von der Community gibt es eher weniger Tutorials und Online-Beiträge. Um die VS Code Extension zu entwickeln, kombinierte ich daher Informationen aus der API-Dokumentation, aus Beispielprojekten und Tutorials und erarbeitete mir die fehlenden Details eigenständig durch “Learning by Doing”.

Text Decoration Icons

Man würde denken, ein Bild als Text Decoration zu setzen, wäre trivial. Doch hat es mich einige Zeit gekostet, bis ich Folgendes realisiert habe: Wenn man ein SVG Icon verwenden will, darf dieses nicht selbst “width” und “height” angeben. Obwohl man der Text Decoration sowohl width, als auch height, mitgeben kann, werden diese Angaben ignoriert, wenn das SVG seine eigene Größe vorgibt.

Weiters werden die Icons nicht mitting in der Zeile positioniert (siehe das Bild der Text Decorations: die Icons sind etwas weiter oben positioniert als der Text). Man kann der Decoration zwar auch einen Margin mitgeben, allerdings würde z. B. ein Top-Margin (um den extra Platz unterhalb des Icons auszugleichen) nicht nur das Icon, sondern die ganze Zeile nach unten schieben.

Kommunikation zwischen Extension und WebView

Eine weitere Challenge war die Kommunikation zwischen der Extension und der WebView, um insbesondere bei den “Theme Toggles” beide Seiten am gleichen Stand zu halten (wenn das Theme (extern) aktiviert wurde, sollte auch der Toggle in der WebView automatisch aktiviert werden). Dank der VS Code API können aber Nachrichten recht einfach zwischen der Extension und der WebView ausgetauscht werden.

Debugging

Ich fand es sehr spannend, insbesondere die WebView zu debuggen. Über die Command Palette in VS Code lässt sich der Web Inspector öffnen (“Toggle Developer Tools”), mit welcher sowohl der Console-Output, als auch die HTML-Elemente der ganzen IDE inspiziert werden können. Innerhalb von den Sourcefiles (abgesehen von webViewScript.js) lassen sich allerdings auch Breakpoints setzen.

Obwohl der sogenannte “Extension Development Host” (das separate VS Code Fenster, in welchem die Extension während der Entwicklung läuft) viel zu bieten hat, konnte ich nicht die komplette Funktionalität meiner Extension darin testen. Das Icon Theme lässt sich innerhalb des Extension Hosts zum Beispiel nicht programmatisch für den Workspace setzen (innerhalb von .vscode/settings.json), weshalb ich die Extension mit dem “vsce package” Command zuerst builden und installieren musste, um den “Icon Theme Toggle” innerhalb der WebView zu testen.

Conclusion

Mit dem Projekt “Cute Cat” konnte ich einen intensiven Einblick in die Möglichkeiten und Herausforderungen von VS Code Extensions gewinnen. Besonders wertvoll war für mich dabei der explorative Charakter des Projekts: Ich konnte vieles ausprobieren und dadurch ein tiefes Verständnis für die Entwicklung von VS Code Extensions aufbauen.

Ich bin stolz auf das, was ich erreicht habe, und fühle mich nun bestens vorbereitet, das nächste Projekt anzugehen: die Entwicklung meiner eigenen VS Code Extension im Rahmen der Masterarbeit.