Effiziente Webentwicklung mit Visual Studio Code

Mit etwas Einrichtungsarbeit wird Visual Studio Code auf allen Betriebssystemen zur Arbeitsumgebung für Webentwicklung und schnelle Prototypen mit HTML und CSS.

Artikel verschenken
In Pocket speichern vorlesen Druckansicht 9 Kommentare lesen
Effiziente Webentwicklung mit Visual Studio Code

(Bild: Albert Hulm)

Lesezeit: 10 Min.
Von
  • Manuel Ottlik
Inhaltsverzeichnis

Wer mit dem Entwickeln eines Web-Projekts beginnt, einen Prototyp abliefern muss, eine neue Funktion ausprobieren oder einen Programmierartikel nachvollziehen will, möchte sich nicht lange mit dem Einrichten einer Arbeitsumgebung aufhalten. Ein lokaler Webserver muss her, für die meisten CSS-Projekte ist ein Präprozessor wünschenswert – und der Editor sollte etwas mehr können als nur Code-Highlighting.

Eine Option ist, viele Tools für diese Aufgaben zu installieren und einzurichten. Wesentlich schneller zum Ziel kommt man mit Visual Studio Code (VSC oder VS Code), aufgebohrt mit den richtigen Erweiterungen. Die IDE gibt es kostenlos zum Download für Linux, macOS und Windows. Entwickelt wird VSC unter Open-Source-Lizenz mit großem Personaleinsatz von Microsoft-Mitarbeitern.

Der Artikel verwendet als anschauliches Beispiel für die schnelle Webentwicklung eine einfache statische Steckbrief-Webseite. Neben einer Willkommensseite soll es eine "Über Mich"-Seite und ein Impressum geben – natürlich mit ausgelagerten Styles. Legen Sie für das Projekt einen leeren Ordner an und öffnen Sie diesen mit "File/Open Folder" in Visual Studio Code. Die Arbeit beginnt in der Datei index.html. Wenn Sie das Beispiel nicht abtippen möchten, finden Sie das fertige Projekt auf GitHub.