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

TechWiese Blog

Visual Studio Code (2): Installation

29. Oktober 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.

In dieser Folge der Artikelserie geht es um die Installation von Visual Studio Code (VS Code), welche sehr einfach ist. Da Visual Studio Code auf verschiedenen Plattformen läuft, folgen nun drei verschiedene Installationsanleitungen.

Windows

  1. Visual Studio Code für Windows kann hier heruntergeladen werden.
  2. Die Installation kann mit einem Doppelklick auf die heruntergeladene Datei VSCodeSetup.exe gestartet werden.

VS Code kann danach über das Hauptmenü oder mit code . aus der Konsole heraus gestartet werden.

Linux

  1. Visual Studio Code für Linux kann hier heruntergeladen werden.
  2. Das heruntergeladene Archiv muss dann in einen beliebigen Ordner extrahiert werden.
  3. Visual Studio Code kann anchließend über einen Klick auf die Datei Code ausgeführt werden.

Soll VS Code jederzeit im Terminal über code . verfügbar sein, muss folgender Befehl im Terminal ausgeführt werden: 

sudo ln -s /path/to/vscode/Code /usr/local/bin/code

Mac OS X

  1. Visual Studio Code für Mac OS X kann hier heruntergeladen werden.
  2. Die heruntergeladene Datei VSCode-osx.zip muss geöffnet werden …
  3. … und Visual Studio Code.app in den Applications-Ordner verschoben werden. Damit wird die Anwendung für das Launchpad sichtbar.

Soll VS Code jederzeit im Terminal über code . verfügbar sein, muss folgende Zeile in die ~/.bash_profile-Datei (~/.zshrc im Falle von zsh) angehängt werden: 

code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $* ;}

Anbindung an zusätzliche Tools

Visual Studio Code arbeitet wunderbar mit anderen Tools zusammen. Folgende Tools könnten bei der Entwicklung mit VS Code weiterhelfen:

  • ASP.NET 5 – ein Framework zum Entwickeln von Web- und Cloudanwendungen, Open Source und verfügbar auf GitHub
  • Node.js (includes NPM) – Plattform für schnelle und skallierbare Netzwerkanwendungen
  • Yeoman – ein Projekt-Erstellungstool: wie ein Datei | Neues Projekt für VS Code
  • hottowel – ein Generator um mit yeoman AngularJSApplikationen zu erzeugen; einfach npm install -g generator-hottowel zum Installieren ausführen
  • gulp – ein Task-Runner; kann mit VS Code Tasks kombiniert werden
  • mocha – ein JavaScript Test Framework, das mit Node.js läuft
  • bower – ein Packet Manager für Abhängigkeiten auf Clientseite bei Webprojekten
  • TypeScript – typisierte Programmiersprache, die direkt zu JavaScript übersetzt wird. Hilft den Code zu strukturieren und sicherer zu machen, ohne auf Features von JavaScript verzichten zu müssen.

Überblick

Ist VS Code installiert und gestartet, erwartet einen die Standardansicht. Diese sieht zwar ein bisschen minimalistisch aus, man sollte sich aber nicht täuschen lassen: Visual Studio Code strotzt nur so von Funktionen, die aber meist nur über einen Shortcut oder Command ausgeführt werden können. Um sofort mit dem Coden beginnen zu können, wird beim Start immer der Zustand der letzten Sitzung wiederhergestellt. Gibt es keine letzte Sitzung, wird einfach eine leere neue Datei geöffnet.

Abbildung 1: Visual Studio Code nach dem Start

Ein Projekt ist nicht notwendig, um zu arbeiten. Alles geschieht direkt auf Ordner- und Dateiebene. Somit sind auch die meisten Tools sofort beim Öffnen einer Datei verfügbar. Wie in einer IDE werden an unterschiedlichen Stellen verschiedene Informationen angezeigt. Das Layout von VS Code besteht dabei aus fünf Bereichen:

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

Die genauen Funktionen könnt Sie dann in den weiteren Artikeln dieser Serie nachlesen. Bis dahin viel Spaß mit Visual Studio Code. Probieren Sie es einfach mal aus, die Installation ist ja oben beschrieben.

Tipp zum Loslegen: der Text in einer Datei von VS Code nicht eingefärbt, ist wahrscheinlich keine Sprache ausgewählt, und unten rechts neben dem Smiley steht Plain. Mit einem Klick darauf kann dann die Sprache für die momentan geöffnete Datei gewählt werden.

Abbildung 2: Visual Studio Code mit mehreren geöffneten Datein und links die Explorer-View

Wichtige Ressourcen

Visual Studio Code Artikelserie

Grundlagen

Extensions

Weitere Beiträge