blog.atwork.at

news and know-how about microsoft, technology, cloud and more.

Visual Studio Code den Run-Button für Websites beibringen

Visual Studio Code ist eine feine Sache. Das kostenlose Entwicklungssystem für Windows, OS X und Linux ist unter https://code.visualstudio.com downloadbar und stellt neben einem sehr leistungsfähigen Editor mit IntelliSense und Debugging, Git-Support und Extensions auch Runtimes für Node.js, .NET Core, Unity und Office bereit. Apropos Runtime: Wie sieht es mit Webprojekten aus? Das müssen wir Visual Studio Code erst beibringen...

Visual Studio Code for all

Für alle jene, die neu in Visual Studio Code (VSC) sind, informiert die Startseite The Basics of Visual Studio Code über den Editor und seine Leistungsfähigkeit.

image

Damit gleich zur Realität...

Wo ist der Run Button?

Gerade, wenn man von Visual Studio kommt, erwartet man einen "Run"-Button und einen gewohnten, ähnlichen Komfort für Webprojekte. Nun, im Gegensatz zu Visual Studio stellt VSC eine "lightweight" Developing-Environment bereit. Es gibt keinen "Run" Button (F5)...

Ein Webprojekt starten

In meinem Beispiel wollte ich ein Office-AddIn für Word bauen und mit VSC bearbeiten. Das Framework habe ich übrigens in Node.js mit npm install -g bower yo generator-office gulp tsd und yo Office erstellt, aber das ist eine andere Geschichte.

Man bearbeitet also ein Webprojekt mit VSC - am besten mit File / Open Folder...

image

Nun kann die Bearbeitung erfolgen. Nur, wie sieht man nun den Output? Wie kann man dieses Webprojekt starten...?

image

Klar, man benötigt einen lokalen Webserver. Nur, wie integriert man diesen in VSC?

Command Palette

Zuvor noch einen kleinen Exkurs in VSC: Ein sehr wichtiges Feature in VSC ist die "Command Palette". Diese ist mit Ctrl+Shift+P (oder am PC schneller mit der F1-Taste) jederzeit erreichbar und bietet Zugriff zur ganzen Funktionalitäten von VSC. In der Anzeige wird nach der Eingabe gefiltert. Wenn verfügbar, wird gleich neben der Funktion die entsprechende Tastenkombination angezeigt. Praktisch und schnell!

image

Gut, Kommandos können also ganz rasch abgesetzt werden. Diese können Formatierungsbefehle oder auch umfangreiche Befehle sein. Das führt uns zu den Erweiterungen...

Extensions

Wer, so wie ich von Visual Studio kommt, sucht hier mal einige Zeit nach einer Methode, das Projekt zu "starten". Zum Glück gibt es eine einfache Lösung für mein Thema mit dem Webprojekt: Die gute Botschaft ist, dass Visual Studio Code mit sog. "Extensions" erweitert werden kann.

Und es gibt eine ganze Reihe von coolen Extensions für VSC!

image

Die Lösung: IIS Express Extension

Die Integration wird am einfachsten durch eine weitere Extension zu VSC hinzugefügt. Im Visual Studio Marketplace hat Warren Buckley eine Extension für die Integration von IIS Express bereitgestellt. Danke Warren!

IIS Express (Run websites straight from VS Code using IIS Express)

image

Der Code ist übrigens unter https://github.com/warrenbuckley/IIS-Express-Code verfügbar.
(IIS Express - und somit diese Extension - ist nur unter Windows Systemen lauffähig.)

image

Nach der Installation muss die Extension aktiviert werden und VS Code einmal neu gestartet werden.

image

IIS Express Extension verwenden

Nach dem VSC Restart wird der IIS Express (für die Website) gestartet: IIS Express: Run Website. Die Suche nach "run" liefert sogleich die Extension.

image

Nun wird die Website mit dem Start Website Command gestartet.

image

Das Output Window zeigt den Erfolg und die localhost Adresse an (in meinem Beispiel Port 3498).

image

Zusätzlich wird auch sogleich der Default Browser geöffnet. Je nach Projekt-Struktur wird das Default Dokument im Root Folder geöffnet - oder auch nicht...

image

In meinem Beispiel habe ich eine tiefere Ordnerstruktur und ein home.html Startdokument. Somit lautet mein Pfad natürlich http://localhost:3498/app/home/home.html. Damit klappts auch im Browser.

SNAGHTML461a4fd

Der Webserver läuft. Code-Änderungen werden wie erwartet durch Speichern des Files und Refresh im Browser aktualisiert.

Wer den IIS Express Webserver wieder beenden möchte, führt in der Command Palette IIS Express: Run Website und hier den Stop Webserver Befehl aus.

image

Das wars. Die IIS Express Extension bietet eine rasche Methode, Webprojekte mit Visual Studio Code zu entwickeln und zu starten!

Hier noch rasch ein paar Links zu den wichtigsten Themen in VSC:

  • Setup - Install VS Code for your platform and configure the tool set for your development needs.
  • The Basics - Introduction to the basic UI, commands, and features of the VS Code editor.
  • Settings - Customize VS Code for how you like to work.
  • Languages - Learn about VS Code's support for your favorite programming languages.
  • Node.js - This tutorial gets you quickly running and debugging a Node.js web app.
  • Why VS Code? - Read about the design philosophy and architecture of VS Code.
  • Download VS Code - Quickly find the appropriate install for your platform (Windows, OS X and Linux).

Visual Studio Code ist cool! Viel Spaß beim Entwickeln mit VSC!

Pingbacks and trackbacks (2)+

Loading