Nahaufnahme einer Person, die mit einem Tablet auf einer Decke sitzt.

TechWiese Blog

Visual Studio Code (5): Die Arbeitsumgebung

23. Dezember 2015

Portrait Bild von Tobias Kahlert

Tobias Kahlert

Dieser Blogbeitrag ist ein Repost und stammt im Original aus dem Know-how-Bereich von TechWiese, dessen Artikel in diesem Blog aufgegangen sind.

Nachdem im letzten Artikel die Installation besprochen wurde, dreht sich nun alles um die erste Verwendung von Visual Studio Code (VS Code). Sobald VS Code gestartet ist, kann mit der Arbeit begonnen werden. Das Anlegen eines Projektes ist nicht erforderlich, denn VS Code arbeitet auf Datei- und Ordnerbasis. Trotzdem braucht man auf die Vorteile von Projekten nicht zu verzichten. Werden bestimmte Projektdateien im geöffneten Hauptverzeichnis erkannt, passt sich das Verhalten von VS Code entsprechend an.

Bevor es losgeht, hier nochmal eine Übersicht über die fünf Bereiche des Editors:

  1. Editor: Der große Bereich in der Mitte, hier können eine oder mehrere Dateien bearbeitet werden.
  2. Menüzeile: Hiersind die üblichen Editor-Befehle (wie Speichern, Laden, Rückgängigmachen) sowie einige spezielle Funktionen zu finden (Codenavigation usw.).
  3. Status Bar: DieZeile am unteren Rand des Editors zeigt allgemeine Informationen, wie Cursor-Position, Encoding und Git-Status über die momentan editierte Datei an.
  4. Side Bar: Diese Leiste zeigt eine von vier Views (Explorer, Suche, Git, Debug) an, die beim Arbeiten mit dem Code helfen.
  5. View Bar: Dieser Bereich ermöglichtdas Wechseln der Views und zeigt Kurzinformationen zu diesen an (z.B. wie viele Dateien im Explorer ungespeichert sind).

Die Explorer-Ansicht

Die wichtigste Ansicht auf der linken Seite ist die Explorer-Ansicht. Sie zeigt alle geöffneten Dateien und für den Fall, dass ein Ordner geöffnet wurde, dessen Inhalt. Durch Anklicken kann eine Datei im Editor geöffnet werden. Wird eine Datei aus dem Ordnerbereich angeklickt, wird sie zwar im Editor angezeigt, aber noch nicht zu den Working Files hinzugefügt. Dies geschieht erst nach einem Doppelklick auf die Datei oder, wenn man beginnt diese zu editieren. Die Working Files sind quasi das, was bei Visual Studio die Tabs sind.

Abbildung 1: VS Code Explorer (links mit geöffneten Ordnern und Dateien, rechts ist nur eine Datei geöffnet)
Abbildung 1: VS Code Explorer (links mit geöffneten Ordnern und Dateien, rechts ist nur eine Datei geöffnet)

In der gesamten Explorer-Ansicht werden Kontextmenüs unterstützt, die wie üblich über einen Rechtsklick geöffnet werden können. Über die Einträge lassen sich zum Beispiel Dateien erzeugen, umbenennen und löschen.

Ein kleiner Punkt links neben dem Dateinamen zeigt an, dass die Datei noch nicht gespeichert wurde. In der Sidebar weist eine Zahl auf dem Explorer-Icon darauf hin, wie viele Dateien noch nicht gespeichert wurden.

Abbildung 2: Working Files. Der weiße Punkt zeigt an, dass die Datei noch nicht gespeichert wurde. Ein Klick auf ihn schließt die Datei.
Abbildung 2: Working Files. Der weiße Punkt zeigt an, dass die Datei noch nicht gespeichert wurde. Ein Klick auf ihn schließt die Datei.

Das Speichern erfolgt wie üblich mit der Tastenkombination „Strg+S“. Außerdem unterstützt VS Code eine Autospeicher-Funktion. Diese kann einfach über das Kommando „Files: Enable Auto Save“ aktiviert werden. Wie man ein Kommando ausführt erfahren Sie im nächsten Abschnitt. Neben dem Explorer enthält VS Code noch drei weitere Views: die Suche, die Git-Steuerung und den Debugger – diese werden in weiteren Artikeln behandelt.

Tipp: Über „View->Move Side Bar” können die Side Bar und die View Bar von links nach rechts verschoben werden.

Die Kommando-Palette

Das wichtigste Tool in VS Code ist die Kommando-Palette. Sie erlaubt es, den kompletten Editor mit Kommandos zu bedienen. Mit F1 lässt sie sich im Kommando-Modus öffnen. Es erscheint eine Eingabebox und eine Liste mit allen Befehlen. Die Liste lässt sich durch Eingabe des gesuchten Kommandos filtern und mit den Pfeiltasten durchsuchen. Mit Enter kann ein Kommando ausgewählt werden, das dann ausgeführt wird.

Command Palette

Abbildung 3: Die Kommando-Palette mit einer Liste aller möglichen Befehle.
Abbildung 3: Die Kommando-Palette mit einer Liste aller möglichen Befehle.

Auf den zweiten Blick fällt auf, dass nach einem Klick auf F1 bereits ein „>“ in der Eingabebox steht. Tatsächlich hat die Kommando-Palette neben dem Ausführen von Befehlen noch eine ganze Reihe weiterer Funktionen. Die jeweilige Funktion wird vom ersten Zeichen bestimmt. Um Kommandos auszuführen ist ein „>“ notwendig. Mit der Tastenkombination „Strg+P“ lässt sich die Kommando-Palette im Navigations-Modus öffnen. Durch Eingabe eines Dateinamens kann dann eine gewünschte Datei in den Editor geholt werden. Durchsucht werden dabei alle offenen Dateien und alle Dateien, die sich im momentan offenen Ordner befinden. Ist eine Datei mit IntelliSense-Unterstützung geöffnet, werden außerdem alle Symbole durchsucht und zur Auswahl angezeigt.

Abbildung 4: Kommandozeile im Navigations-Modus. Neben Dateien werden auch gefundene Symbole gelistet.
Abbildung 4: Kommandozeile im Navigations-Modus. Neben Dateien werden auch gefundene Symbole gelistet.

Neben dem Kommando-Modus und dem Navigations-Modus gibt es noch weitere Modi. Durch Eingabe von „?“ kann eine Liste aller Modi angezeigt werden.

Abbildung 5: Die Eingabe von „?“ zeigt eine Liste mit allen unterstützten Modi der Kommando-Palette an.
Abbildung 5: Die Eingabe von „?“ zeigt eine Liste mit allen unterstützten Modi der Kommando-Palette an.

Side by Side Editing

VS Code unterstützt von Haus aus Side by Side Editing mit bis zu drei Dateien. Um eine neue Datei neben den bestehenden zu öffnen, muss einfach Strg gedrückt gehalten und eine neue Datei in der Explorer-Ansicht anklickt oder aus dem Kontextmenü „Open to the Side“ auswählt werden. Um die momentan aktive Datei zu teilen, einfach „Strg+/“ drücken. Mit Strg und einer Nummerntaste lässt sich zwischen den offenen Editoren wechseln. Per Drag and Drop lassen Sie sich neu anordnen.

Abbildung 6: Zwei verschiedene Dateien können gleichzeitig nebeneinander bearbeitet werden.
Abbildung 6: Zwei verschiedene Dateien können gleichzeitig nebeneinander bearbeitet werden.

Die Statusbar

Ganz unten am Editor befindet sich die Statusbar. Sie enthält Informationen über die geöffnete Datei und das geöffnete Projekt (sollte eines geöffnet sein). Ist ein Projekt geöffnet, befinden sich auf der linken Seite der Statusbar von links nach rechts der momentane Git-Branch und ein Git-Refresh-Button, wenn das Projekt per Git verwaltet wird, und jeweils eine Anzeige mit der Anzahl der Fehler bzw. Warnungen im Projekt. Danach folgt Platz, in dem installierte Extensions Statusbar-Einträge registriert werden können. Hier ist zum Beispiel der Status Bar Read-Only Indicator installiert.

Auf der rechten Seite sind von links nach rechts die Zeilen- und Spaltennummer der momentanen Position im Editor, das Encoding, der verwendete Zeilenumbruch und die erkannte Sprache der aktuellen Datei gelistet.

Abbildung 7: Die Statuszeile zeigt eine ganze Reihe von Informationen zur geöffneten Datei an.
Abbildung 7: Die Statuszeile zeigt eine ganze Reihe von Informationen zur geöffneten Datei an.

Die meisten Statusbar-Einträge können auch angeklickt werden. So lässt sich zum Beispiel die Sprache der Datei einstellen, wenn VS Code sie nicht automatisch erkannt hat.

Wichtige Ressourcen

Visual Studio Code Artikelserie

Grundlagen

Extensions

Weitere Beiträge