Visual Studio Code - Start der Serie

Einer der spannensten Momente der Build 2015 (#bldwin2015) für mich war die Ankündigung von Scott Hanselmann zu Microsoft Visual Studio Code.

Was ist Visual Studio Code?

Visual Studio Code ist ein leichtgewichtiger Code-Editor, der sowohl auf Windows, Linux als auch MacOS X läuft. Mit dieser Visual Studio-Version wird nicht jeder Entwickler angesprochen, der einen reinen Texteditor sucht, noch diejenigen, die auf der Suche nach einer mächtigen IDE sind: Visual Studio Code ist ideal für Webentwickler, die moderne Sprachen verwenden, um Webapplikationen und Dienste zu realisieren.

Visual Studio Code hat die selbe Basis wie die Visual Studio Online Tools Monaco, Napa und der Code-Editor von OneDrive. Das Projekt selbst ist in Node.js und TypeScript geschrieben und unterstützt derzeit die folgenden Sprachen:

Color Highlighting:

C#, JavaScript, Node.js, C++, Jade, TypeScript, PHP, Python, HTML, CSS, XML, Batch, F#, DockerFile, Coffee Script, Clojure, Java, HandleBars, JSON, MarkDown, R, Objective-C, PowerShell, Luna, Less, Visual Basic, Ruby, Perl, ...

Editing und Outlining:

C#, JavaScript, Node.js, C++, Jade, TypeScript, PHP, Python, HTML, CSS

Enhanced Editing and Navigation

C#, JavaScript, Node.js, HTML, CSS

Debugging

C#, JavaScript, Node.js

Eine Liste der zur Verfügung stehenden Sprachen kann man über das Menü „Select Language“ einsehen

Für mich persönlich ist eines der Highlights, das via Omnisharp auch C#6-Webanwendungen in Form von ASP.NET 5 unterstützt werden. Ein weiterer Pluspunkt von Visual Studio Code ist natürlich auch der Support von "Webby"-Sprachen. Neidisch bin ich allerdings auf den Twitter Handle von Visual Studio Code: @Code

Da ich es kaum schaffen werde, in diesem Blogpost mehr über die Geschichte von Visual Studio Code zu erzählen, überlasse ich das niemand geringerem als Erich Gamma, der auf der Build Conference 2014 in der Session "Building Large Scale JavaScript Application in TypeScript" mehr über die Entwicklung von Monaco und Visual Studio Code erzählt hat.

Einführung in Visual Studio Code

Visual Studio Code ist ein leichtgewichtiger Editor und man findet Ihn auf der Microsoft Visual Studio Code Startseite. Bevor wir uns den Editor und dessen Funktionalität genauer anschauen, möchte ich kurz den Installationsprozess zeigen. Bei der Installation ist zu erwähnen, dass Visual Studio Code im Gegensatz zu Visual Studio nicht den Ballast von rund einem Dutzend Software Development Kits (SDKs) mitbringt. Dem Entwickler von Node.js wird also zum Beispiel nicht Express oder Node.js Server in einer speziellen Version installiert, wenn er Microsoft Visual Studio Code installiert. Und auch das zu installierende Packet hat mit 58.1 Megabyte noch nicht einmal ein Prozent der Größe der Visual Studio IDE.

Installation auf Windows

  1. Download Visual Studio Code für Windows
  2. Doppel-Klick auf VSCodeSetup.exe um die Installation zu starten.

Der Installationspfad ist: c:\Users{username}\AppData\Local\Code

Es kann sein, dass ein Neustart benötigt wird um die Installation abzuschließen, so dass die "Umgebungsvariablen" gesetzt sind.

Tipp: Anders als bei Mac OS X werden die Umgebungsvariablen direkt mit der Installation gesetzt. Man kann also über die Command Shell oder PowerShell direkt code . verwenden, um Visual Studio Code zu starten.

Installation auf Mac OS X

  1. Download Visual Studio Code für Mac OS X
  2. Doppelklick auf "VSCode-osx.zip", um die Inhalte anzuzeigen
  3. Visual Studio Code.app in den Applications-Ordner ziehen, um es via des Launchpads verfügbar zu machen.
    1. Um VSCode zum Dock hinzuzufügen einfach einen Rechtsklick auf das Icon von Visual Studio Code und unter dem Menüpunkt Options „Keep in Dock“ wählen.

Tipp: Um Visual Studio Code vom Terminal aus zu starten, kann man folgende Zeilen Code zur .bashrc-Datei hinzufügen:

code () { if [[ $# = 0 ]] then open -a "Visual Studio Code" else [[ $1 = /* ]] && F="$1" || F="$PWD/${1#./}" open -a "Visual Studio Code" --args "$F" fi }

Jetzt kann man über Terminal einfach "code ." in jedem Ordner eingeben, um das Editieren mit Microsoft Visual Studio Code zu starten.

Weiter Tools

Eine Liste von weiteren Tools, die unabdingbar für den Webentwickler sind, findet man auf der Hilfeseite von Microsoft Visual Studio Code. Und natürlich werden auch eine ganze Reihe von Tools, die einem das Leben leichter machen, unterstützt.

Microsoft Visual Studio Überblick

Anders als Visual Studio arbeitet Visual Studio Code auf Basis von Datei- und Ordnerstrukturen. Ich lege also einen neuen Ordner "stuff" an und starte Visual Studio Code. Das kann ich entweder über den Befehl code . aus dem Ordner selbst machen oder ich starte Visual Studio Code und erzeuge einen neuen Ordner über den "File" Menu-Dialog.
Microsoft Visual Studio Code - File Menu

Bevor wir uns größeren Dingen widmen, sollten wir uns mit der IDE vertraut machen:

Visual Studio Code - Editor UI Überblick

Visual Studio Code basiert auf einem modernen Workbench-Konzept, das via Viewlets angesteuert werden kann. Bei der Konzeption des Tools lag, wie bereits bei den Monaco Tools, der Fokus auf einer klaren und übersichtlichen UI, bei der die Steuerung per Keyboard im Vordergrund steht.

Über das Menü lassen sich die Befehle zur Interaktion mit Projekten bzw. Dateien (bei Visual Studio Code spricht man besser von Dateien als von Projekten) kontrollieren. Hier kann man einige wichtige Einstellungen vornehmen, wie beispielsweise das automatische Speichern von geöffneten Dateien. Während dies bei den Visual Studio Monaco Tools von Haus aus aktiviert war, muss es bei Visual Studio Code eigenständig aktiviert werden.

Automatisches Speichern von Dateien in Visual Studio Code

Darüber hinaus stehen über den Menüpunkt View weitere Einstellungsmöglichkeiten wie das Verschieben von Viewbar und Sidebar über den Befehl "Move Sidebar" zur Verfügung. Auch das "Andocken" der Sidebar ist über das View-Menü via "Toggle Sidebar" bzw. die Tastenkombination STRG + B möglich.

Themes

Visual Studio Code unterstützt die drei unterschiedlichen Themes "Dark", "Light" und "High Contrast", welche über View -> Themes ausgewählt werden können und per CSS implementiert sind. Es kommt ein CSS Schema für den Editor zum Einsatz. In der aktuellen Version von Visual Studio Code genügt es nicht, die CSS-Dateien anzupassen. Später gehe ich näher auf dieses Thema ein.
Im Werkszustand unterstützt Visual Studio Code die drei Themes "Dark", "Light" und "High Contrast".

Die Themes können über View -> Themes ausgewählt werden.

Viewbar

Die Viewlets in der Viewbar sind die Hauptmenü-Einträge von Visual Studio Code. Das erste Viewlet ist "Explore" und erlaubt einen Blick auf Dateien und Ordner.

Explore Viewlet

Das Explore Viewlet ist die Dateiansicht von Visual Studio Code. Hier sieht man den Kontext, in dem man sich befindet. In diesem Fall arbeite ich im Ordner "Stuff1". Fährt man mit der Maus über den Ordner, wird das Interaktionsmenü eingeblendet.

Es erscheinen die folgenden vier Buttons:

  • New File
  • New Folder
  • Refresh
  • Collapse

New File erlaubt das Anlegen einer neuen Datei. In diesem Szenario lege ich eine neue Markdown-Datei mit der Endung md an.

Erstellen einer neuen Datei mit Microsoft Visual Studio Code

Der Editor

Nachdem ich die Dateiendung eingetragen habe und das ganze mit der Return- bzw. Enter-Taste bestätigt habe, öffnet sich automatisch ein Editor-Fenster in meinem Workbench-Bereich.

Was einem hier sofort ins Auge springt, ist die Darstellung des Editors. Im Sidebar-Bereich sehen wir den Reiter "Working Files", der die aktuell bearbeiteten Dateien auflistet. Das ist sehr hilfreich, wenn es darum geht, einen Überblick der zuletzt bearbeiteten oder noch nicht gespeicherte Dateien zu bekommen.

Außerdem sind in der rechten oberen Ecke des Editor-Fenster unterschiedliche Symbole zu sehen, zum Beispiel der Preview-Button.

Visual Studio Code - Editor Window

Visual Studio Code unterstützt, mehrere Dateien gleichzeitig geöffnet zu haben. Dazu "klicke" ich mit gedrückter STRG-Taste im Explore Viewbar auf die Datei agenda.md.

Mehrere Editor Fenster in Microsoft Visual Studio Code

Das aktive Editor-Fenster hat das Highlighting und immer noch die Buttons an der "Rechten oberen Ecke". Ich wechsle auf das rechte Editor-Fenster und klicke auf den "Show Preview"-Button.

Der Editor-Bereich in Visual Studio Code wurde mit unterschiedlichen Open Source-Lösungen entwickelt. Unter anderem wurden Lösungen wie Electron und FirstMate verwendet. Die gerade erwähnte Vorschau wurde via Chromium implementiert.

Show Preview Fenster in Microsoft Visual Studio Code

Ich wechsle mit "STRG + TAB" zurück auf den linken Editor. Das Command Palette-Fenster hilft mir dabei, mich für das Editor-Fenster für das agenda.md-File zu entscheiden und nicht im Editor-Fenster mit der Preview zu bleiben. Wir werden im weiteren Verlauf der Serie noch häufiger auf das Command Pallette-Fenster zu sprechen kommen.

Microsoft Visual Studio Code - Command Pallette - Wechseln von Dateien via STRG+TAB

Mein Blog ist in Markdown geschrieben – dank des großartigen Tools Ghost, das auf Basis von Node.js funktioniert. Markdown ist eine Beschreibungssprache, die Ihren Einsatz nicht nur auf Blogs, sondern auch auf Github findet. Visual Studio Code versteht die Markdown-Syntax und bietet mir ein entsprechendes Color Highlighting an. Und während ich die Datei links bearbeite, wird Sie auf der rechten Seite in Echtzeit dargestellt, wie das ganze später auf meinem Blog aussehen könnte.

Visual Studio Code - Markdown Bearbeiten und Vorschau Fenster

Nun stellt sich natürlich die Frage, woher Visual Studio Code weiß, wie das CSS auf meiner Seite aussieht? Das Tool hat pro Folder, in dem man arbeitet, gewisse Einstellungen. Diese nennen wir Workspace Settings. Das Konzept dahinter heißt Workbench oder auch Werkbank, auf der man von Null anfangen kann, ein neues Projekt zu gestalten, oder aber bestehende Projekte editieren kann.

Visual Studio Code - Workspace Settings

Über diesen Menüpunkt werden Einstellungen in einer neuen Datei mit dem Namen "settings.json" gespeichert, die nun für unseren Workspace gültig sind. Da die neu erzeugte Datei "settings.json" leer ist, öffnet Visual Studio Code die Default Settings-Datei "settings.json", die relativ groß ist. Daher verwende ich die Suche, die sich via "STRG + F" aufrufen lässt. Die Suche selbst ist echt ziemlich abgefahren und ich wünschte ich dürfte mehr über die Implementierung erzählen. Für jetzt sollte es genügen, dass wir wissen, dass die Suche mit "Regular Expressions" auf "Wortvergleich" und "Exact" einstellbar ist. Wie in Visual Studio drücke ich Enter und gelange zum Abschnitt Markdown.

Microsoft Visual Code - Workspace Settings File (settings.json)

Hier sehen wir die Standard-Einstellungen. Da ich nun einen entsprechenden Style eintragen möchte, mache ich das in meiner lokal erzeugten settings.json, die unsere "Default Settings" überschreiben wird.

Spoiler ALARM: Was man hier auch schon sehen kann, ist dass sich mit den Tasks LESS und SASS dynamische CSS-Dateien erzeugen lassen. Mehr zu diesem Thema gibt es in einem späteren Blogpost.

"Visual Studio Code - Default settings.json und Workspace settings.json"

Hier trage ich nun die agenda.css als Markdown Style ein. Diese Datei existiert noch nicht, weshalb ich nun in der Explore Sidebar eine neue Datei mit dem Namen "agenda.css" hinzufüge. Die Datei wird automatisch geöffnet.

Visual Studio Code hat für CSS zwar keinen Colorpicker, dafür jedoch mehr oder weniger eine Art Code Snippet, über das sich Farben auswählen lassen. Dafür drücke ich direkt nach der Syntax { color: STRG + Leertaste und es erscheint ein IntelliSense-Fenster mit den entsprechenden Farben.
"Visual Studio Code - CSS Color Selection (Picker)"

Ich habe mich für die Visual Studio-Farbe "mediumpurple" entschieden und wechsle nun zum agenda.md-Vorschaufenster und klicke dort den "Refresh-"Button.

"Microsoft Visual Studio Code - Vorschaufenser CSS-Änderung"

Was wir bisher gesehen haben ist, dass wir mehrere Fenster offen haben können. Und auch hier gibt es noch viele Tipps und Tricks zu entdecken. Wer sich jetzt wünschen würde, dass sich das Vorschaufenster automatisch aktualisieren würde, dem sei gesagt, dass dies natürlich auch möglich ist. Diesen Job übernehmen in der Webentwicklung Tools wie "grunt" und "gulp", also Task Runner. Hierzu später mehr in einem weiteren Blog-Beitrag.

Wir haben gerade erst angefangen, den neuen Editor aus dem Hause Microsoft zu erkunden. Und es gibt so viel mehr zu entdecken. Dinge wie z.B. ASP.NET-Entwicklung, natürlich auch die Entwicklung von JavaScript-Lösungen und selbst das Thema Git-Integration sollte auf alle Fälle noch angesprochen werden. Dieses einfache Beispiel hat Ihnen einen einfachen Einstieg und hoffentlich einen guten Eindruck der primären Funktionsweise von Visual Studio Code gegeben.

Zusammenfassung

Mit Microsoft Visual Studio Code bietet Microsoft einen Editor auf Basis von Node.js an, der in TypeScript geschrieben ist, und damit auf allen Platformen zur Verfügung steht. Für Visual Studio-Entwickler ist mit Sicherheit ein wenig Umdenken gefragt. Konzepte wie Solutions sucht man hier vergeblich, dafür wurde auf die Editor Experience und die Unterstützung von vielen bestehenden Technologien ein starker Fokus gelegt. Code zwingt dem Entwickler keine neuen SDKs auf sondern verwendet bestehende. Was mit Sicherheit den Einstieg erschwert, aber von den Profis geschätzt wird.
Die Idee der Werkbank beschreibt ganz gut, was Visual Studio Code auszeichnet. Wer den vollen Funktionsumfang von Visual Studio erwartet, wird enttäuscht sein. Wer aber einen schnellen und leichtgewichtigen "Companion" sucht, wird mit Microsof Visual Studio Code mehr als glücklich werden. Und den Bruder, die "Microsoft Visual Studio Online Tools Monaco", in der Cloud gäbe es ja auch noch.

Wer jetzt nicht warten will, bis meine Artikelserie fertig ist, bekommt mehr Informationen zur neuen Visual Studio-Version in der Session-Aufzeichnung von Erich Gamma, John Papa und Chris Dias auf der Build-Konferenz 2015 mit dem Titel: Visual Studio Code: A Deep Dive on the Redefined Code Editor for OS X, Linux and Windows

Weitere Artikel zu Microsoft Visual Studio Code folgen in kürze.