Visual Studio Code installieren und besser programmieren

Wie wir Visual Studio Code installieren und benutzen. Samt einer Liste an hilfreichen Extensions für die Webseiten-Entwicklung.Tags: | | | | | | |
Noch nicht sicher genug im Webdesign? Lass dir in unseren Programmier-Kursen in Kirchdorf oder unserer Wichtel-Webdesign-Agentur in Pettenbach weiterhelfen!

Worum geht´s?

Bisher haben wir festgestellt, dass HTML-Dateien nichts anderes sind als Text-Dateien. Man kann sie mit jedem beliebigem Text-Editor öffnen und ändern. Warum wir viele Vorteile haben, wenn wir eine IDE wie Visual Studio Code installieren und nützen, erfährst du hier. Außerdem, wie du es installierst, welche Erweiterungen („Extensions“) hilfreich sind und wie du auch diese installierst.

1. Was ist eine IDE?

Die Abkürzung IDE steht für „integrated development environment“, was grob übersetzt so viel bedeutet wie „gesammelte hilfreiche Werkzeuge, um besser Programme und Webseiten zu entwickeln“. Eine IDE unterstützt dich je nach Programmiersprache auf mehrere Arten, beispielsweise mit:

  • besser lesbarer und organisierter Code
  • unterstützte Fehlersuche
  • leichtere Zusammenarbeit mit anderen
  • praktische Shortcuts

Je nach Programmiersprache gibt es viele verschiedene Anbieter von IDEs. Für manche muss man bezahlen, andere sind kostenlos. Im Web-Bereich habe ich lange Eclipse verwendet, bin aber seit einiger Zeit auf Visual Studio Code umgestiegen.

In all den Tutorials hier, die mit Web-Programmierung zu tun haben, werde ich Visual Studio Code verwenden. Wenn du lieber eine andere IDE verwendest, kannst du das jedoch gerne tun.

2. Wie du Visual Studio Code installierst

Visual Studio Code kannst du dir auf dieser Webseite kostenlos herunterladen.

Sobald du das gemacht hast, installierst du es wie jedes andere Programm in Windows durch einen Doppelklick.

Nach dem ersten Start solltest du in etwa so etwas sehen:

Visual Studio Code erste Schritte

Links habe ich einige meiner aktuellen Projekte als Liste, die hast du womöglich noch nicht.

3. Visual Studio Code kennen und lieben lernen

3.1 Wie du einen Ordner in Visual Studio Code zum Arbeitsbereich hinzufügst

Machte links auf deiner vermutlich noch leere Liste der Arbeitsbereiche einen Rechtsklick und wähle dann „Ordner zum Arbeitsbereich hinzufügen“:

Visual Studio Code Ordner zum Arbeitsbereich hinzufügen

Am besten wählst du dann gleich den Ordner auf dem Desktop (oder sonstwo) aus, in dem bereits deine .html-Dateien drin sind.

Es kann sein, dass du dann noch gefragt wirst, ob du dem Inhalt des Ordners vertraust. Falls es dein eigener Ordner ist, kannst du beruhigt „Ja“ anklicken.

Dann solltest du links nun deinen Ordner sehen, mit allen Dateien darin.

3.2 Wie du Dateien in Visual Studio Code ansiehst, veränderst und speicherst

Klickst du nun auf deine index.html, solltest du den Inhalt der Datei sehen können. In etwa so:

HTML-Code in Visual Studio Code anzeigen

Wie du sicher bemerkt hast, sind die HTML-Tags nun in einer anderen Farbe eingefärbt als der restliche Text. HTML-Kommentare sind grün, und die Attribute (z.B: lang=“de“) sind rot.

Diese farbliche Unterscheidung ist sehr hilfreich, wenn du später mehr Programm-Code hast. Und das beste ist: Auch in CSS, PHP, MySQL und JavaScript gibt es solche farblichen Unterscheidungen!

Wenn du nun mit der Maus auf ein HTML-Tag klickst, dass einen „Freund“ hat (z.B. das <body>-Tag), dann wird gleich das dazugehörige HTML-Tag mit markiert. Auch sehr praktisch!

Dateien speichern kannst du in Visual Studio Code wie in fast jedem Windows-Programm mit Hilfe von STRG + S.

4. Visual Studio Code Extensions installieren, die dein Leben noch leichter machen

Du kannst Extensions (=Erweiterungen) verwalten, wenn du links unten auf das Zahnrad klickst und dann auf „Erweiterungen“:

Visual Studio Code Extensions

Dort kannst du dann in das Suchfeld eingeben, was du suchst, und sie installieren.

Hier eine kurze Liste an hilfreichen Erweiterungen im Web-Bereich:

  • Auto Close Tag: Macht für die den schließenden HTML-Tag zum öffnenden HTML-Tag dazu.
  • Auto Rename Tag: Wenn du ein HTML-Tag veränderst, ändert sich das dazu gehörige gleich mit.
  • HTML End Tag Labels: Zeigt am Ende eines zusammengehörenden HTML-Tags die ID/Klasse des Start-Tags an. Sehr praktisch.
  • CSS Peek: Zeigt in HTML-Elementen an, welche CSS-Befehle darauf angewendet werden.
  • HTML CSS Support: Macht die Verbindung von CSS und HTML leichter
  • PHP Intellisense: Versucht gute Vorschläge zu geben, was kommen könnte.
  • PHP Extension Pack: Alles mögliche Hilfreiche für PHP
  • PHP Debug: Hilft bei der Fehlersuche.
  • Bracket Pair Colorizer: Färbt zusammengehörige Klammern der gleichen Stufe in verschiedenen Farben ein (für PHP/JavaScript/CSS extrem hilfreich)
  • colorize: Färbt Farbcodes und Farben in der angegebenen Farbe ein.
  • Path Intellisense: Hilft beim Finden der richtigen Pfade.
  • Better comments: Man kann z.B. TODO: -Kommentare in PHP schreiben, die dann orange werden. Bessere Übersicht.
  • Todo Tree: Zeigt in einer Liste alle TODO:-Kommentare in allen Dateien an, damit man nicht vergisst, was noch alles zu tun ist.
  • Tabnine AI Autocomplete: Lernt dazu, was man wahrscheinlich schreiben wollte, und schlägt genau das vor. Funktioniert nicht immer, aber erstaunlich oft.

Nicht alle wirst du brauchen, aber manche davon sind echt hilfreich. Vor allem die ersten drei würde ich dir auf jeden Fall ans Herz legen.

Diskussion zum Tutorial

Du bist aus Oberösterreich? Dann nütze doch auch unsere flexiblen Programmier-Kurse in Kirchdorf - oder gib deine Website gerne in die guten Hände unserer erfahrenen Wichtel-Webdesign-Agentur.