iX 1/2018
S. 54
Review
Code-Editor
Aufmacherbild

Microsoft Visual Studio Code

Einer für alles

Microsofts Code-Editor VS Code läuft unter Linux, macOS und Windows und glänzt mit einem eingebauten Debugger und GitHub-Integration.

Visual Studio Code, kurz VS Code, ist ein plattformunabhängiger, kostenloser und quelloffener Code-Editor von Microsoft vor allem zum Entwickeln und Debuggen moderner Cloud- und Webanwendungen (siehe ix.de/ix1801054). VS Code kennt über 30 unterschiedliche Programmier-, Auszeichnungs- und Datenbanksprachen, darunter JavaScript, C#, C++, Python, PHP, CSS, SQL und TypeScript. Zum Standardumfang gehört neben einem integrierten Debugger, der auch mit ASP.NET- und Node.js-Anwendungen funktioniert, die direkte Anbindung an die Versionsverwaltung Git.

Dateien, Ordner und Projekte

Bis auf den Namen und einige Funktionen wie die automatische Codevervollständigung IntelliSense hat VS Code nichts mit Visual Studio gemeinsam. Visual Studio Code ist mit dem Open-Source-Framework Electron zur Erstellung von Cross-Plattform-Applikationen mit JavaScript, HTML und CSS entwickelt. Der Code-Editor läuft unter Windows, macOS und Linux.

Anders als große IDEs wie Microsoft Visual Studio oder Eclipse arbeitet VS Code nicht mit Projektdateien, sondern auf Datei- und Ordnerebene – es genügt, eine Datei oder einen Ordner zu öffnen, um mit der Entwicklung zu beginnen. VS Code ist aber durchaus in der Lage, Projektdateien verschiedener Frameworks und Plattformen zu nutzen. Wenn der geöffnete Ordner beispielsweise eine Datei package.json, project.json, tsconfig.json oder eine .NET-Core-Visual-Studio-Solution-/Projekt-Datei enthält, liest VS Code diese Dateien ein. Der Code-Editor verwendet die gelesenen Informationen, um projekt- und plattformspezifische Funktionen wie IntelliSense zur Verfügung zu stellen.

Wie viele andere Code-Editoren verwendet VS Code ein gängiges UI-Pattern: Links befindet sich eine Side Bar mit dem Datei-Explorer, der alle Dateien und Ordner des aktuell ausgewählten Verzeichnisses anzeigt. Daneben befindet sich der Quelltexteditor und unter dem Editor ist Platz für verschiedene Panels. Hier lassen sich beispielsweise Fehler und Warnungen ausgeben, Debugger-Meldungen und Programmausgaben anzeigen oder ein integriertes Terminal darstellen.

Funktional und mächtig: Die Oberfläche

Über die Activity Bar links neben der Side Bar lässt sich deren Ansicht umschalten. Außer dem bereits erwähnten Dateimanager stehen hier eine Suchfunktion, der Zugriff auf Git, der Debugger und die Verwaltung der Erweiterungen zur Verfügung. Die Minimap ganz rechts dient zur schnellen Navigation im Quelltext. Die Oberfläche lässt sich flexibel konfigurieren und es werden standardmäßig verschiedene Themes mitgeliefert, um das Farbschema den persönlichen Vorlieben anzupassen.

VS Code enthält eine Vorschaufunktion für Markdown (Abb. 1).

Es ist möglich, bis zu drei Editorfenster nebeneinander zu öffnen (Side-by-Side-Editing). Ein neues Fenster öffnet sich, wenn man mit gedrückter Strg- oder Cmd-Taste auf eine Datei im Datei-Explorer klickt – oder einfach über den Button „Editor teilen“ oben rechts im Editor. Mit den Tastenkombinationen Strg + 1, 2 und 3 wechselt man zwischen den Editoren. Fenstergröße und Positionierung der Fenster lassen sich einfach via Drag-and-Drop ändern.