TechWiese Blog
Visual Studio Code (5): Die Arbeitsumgebung
23. Dezember 2015
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:
- Editor: Der große Bereich in der Mitte, hier können eine oder mehrere Dateien bearbeitet werden.
- Menüzeile: Hiersind die üblichen Editor-Befehle (wie Speichern, Laden, Rückgängigmachen) sowie einige spezielle Funktionen zu finden (Codenavigation usw.).
- Status Bar: DieZeile am unteren Rand des Editors zeigt allgemeine Informationen, wie Cursor-Position, Encoding und Git-Status über die momentan editierte Datei an.
- Side Bar: Diese Leiste zeigt eine von vier Views (Explorer, Suche, Git, Debug) an, die beim Arbeiten mit dem Code helfen.
- 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.
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.
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
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.
Neben dem Kommando-Modus und dem Navigations-Modus gibt es noch weitere Modi. Durch Eingabe von „?“ kann eine Liste aller Modi angezeigt werden.
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.
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.
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
- Kostenloser Download: Visual Studio Code
- Video Serie zu Visual Studio Code auf Channel 9
- Übersichtsvideo (english) zu Visual Studio Code
- Visual Studio Code auf Twitter: @Code
- Visual Studio Code-Dokumentation
- Visual Studio Code Blog
- Verwandtes Produkt: Visual Studio Community (ebenfalls kostenlos)
Visual Studio Code Artikelserie
Grundlagen
- Die Grundlagen
- Installation
- Die Arbeitsumgebung
- Produktiver durch den richtigen Einsatz der Suchfunktion
- Git als Quellcodeverwaltung einsetzen
- Tasks, Erstellen und Debuggen
- Konfiguration und Personalisierung
Extensions
Weitere Beiträge