HTML lernen leicht gemacht: Die Entwicklungsumgebung Visual Studio Code

In diesem Blogartikel erkläre ich die Installation und grundsätzliche Bedienung der Entwicklungsumgebung Visual Studio Code.

Was ist Visual Studio Code?

Visual Studio Code (oft einfach VS Code genannt) ist ein kostenloser, leichtgewichtiger und leistungsstarker Texteditor, der speziell für Programmierer entwickelt wurde. Hier sind die wesentlichen Punkte leicht verständlich erklärt:

1. Texteditor für Programmierer: VS Code ist ein Programm, in dem man Code schreiben kann, ähnlich wie man in einem Textverarbeitungsprogramm wie Word Texte schreibt. Es ist jedoch speziell dafür gemacht, um Programmiersprachen wie HTML, JavaScript, Python und viele andere zu unterstützen.
2. Kostenlos und Open-Source: Das Programm ist kostenlos verfügbar und kann von jedem heruntergeladen und genutzt werden. Es ist auch Open-Source, was bedeutet, dass der Quellcode von jedem eingesehen und verbessert werden kann.
3. Plattformübergreifend: VS Code funktioniert auf verschiedenen Betriebssystemen, einschließlich Windows, macOS und Linux. Egal welches Betriebssystem man benutzt, VS Code läuft darauf.
4. Erweiterbar: Man kann VS Code mit vielen zusätzlichen Funktionen ausstatten, indem man Erweiterungen installiert. Diese Erweiterungen können das Programmieren erleichtern, indem sie beispielsweise Code-Vervollständigungen anbieten oder das Arbeiten mit bestimmten Programmiersprachen verbessern.
5. Intuitive Benutzeroberfläche: VS Code bietet eine benutzerfreundliche Oberfläche, die leicht zu navigieren ist. Es gibt verschiedene Bereiche, wie z.B. den Explorer zum Anzeigen von Dateien, den Editor zum Schreiben von Code und das Terminal zum Ausführen von Befehlen.
6. Live-Vorschau: Eine besonders nützliche Funktion für HTML-Entwicklung ist die Möglichkeit, die Änderungen sofort zu sehen. Mit einer Erweiterung namens „Live Server“ kann man seine Webseite im Browser öffnen und jede Änderung, die man in VS Code macht, wird sofort im Browser aktualisiert.

Zusammengefasst ist Visual Studio Code ein vielseitiger und benutzerfreundlicher Texteditor, der Programmierern hilft, effizient und effektiv Code zu schreiben und zu bearbeiten.

Installation von Visual Studio Code

Schritt 1: Download

1. Gehen Sie zur offiziellen Visual Studio Code Webseite: Öffnen Sie einen Webbrowser und gehen Sie zu Visual Studio Code
2. Download starten: Auf der Webseite siehst du einen großen blauen Button mit der Aufschrift „Download for Windows“. Klicken Sie auf diesen Button, um den Download zu starten.

Schritt 2: Installation

1. Installationsdatei ausführen:
   – Sobald der Download abgeschlossen ist, finden Sie die Installationsdatei (normalerweise im Download-Ordner deines Computers) mit dem Namen `VSCodeUserSetup-x64-.exe`.
   – Doppelklicken Sie auf diese Datei, um den Installationsprozess zu starten.
2. Willkommen-Bildschirm: – Ein Begrüßungsfenster erscheint. Klicke auf „Weiter“ (Next).
3. Lizenzvereinbarung: Lesen Sie die Lizenzbedingungen und akzeptiere sie, indem Sie das Kästchen „Ich stimme zu“ (I accept the agreement) anklickst. Klicke dann auf „Weiter“ (Next).
4. Installationsort wählen: Sie können den Standard-Installationsort beibehalten oder einen anderen Ort auswählen, indem Sie auf „Durchsuchen“ (Browse) klicke. Klicke auf „Weiter“ (Next), wenn du fertig bist.
5. Zusätzliche Aufgaben: Hier können Sie auswählen, ob Sie Verknüpfungen erstellen möchten. Es ist hilfreich, die Optionen „Open with Code“ (Rechtsklick-Option) und „Add to PATH“ (Umgebungspfad hinzufügen) auszuwählen. Klicken Sie auf „Weiter“ (Next).
6. Installation starten: Klicken Sie auf „Installieren“ (Install), um die Installation zu starten. Warten Sie, bis der Vorgang abgeschlossen ist.
7. Abschluss: Sobald die Installation abgeschlossen ist, kannst du das Kästchen „Visual Studio Code starten“ (Launch Visual Studio Code) anklicken und auf „Fertig stellen“ (Finish) klicken.

Schritt 3: Visual Studio Code starten

• Starten von Visual Studio Code
• Falls du das Kästchen „Visual Studio Code starten“ aktiviert hast, öffnet sich das Programm automatisch.
• Du kannst VS Code auch jederzeit starten, indem du das Programm über das Startmenü oder eine Desktop-Verknüpfung öffnest.

Jetzt ist Visual Studio Code auf deinem Windows-Computer installiert und bereit für die Verwendung! Sie können beginnen, HTML, CSS, Javascript und viele andere Programmiersprachen zu schreiben.

Barrierefreiheit von Visual Studio Code

Die gute Nachricht gleich zu beginn. Visual Studio Code ist komplett barrierefrei und auch blinde Menschen können mit Visual Studio Code programmieren.
In diesem Blogartikel habe ich die Barrierefreiheit der Entwicklungsumgebung Visual Studio Code erklärt:
Barrierefreiheit bei Visual Studio Code – Barrierefreiheit bei Entwicklungsumgebungen

Für alle, die mit der englischen Sprache gut vertraut sind, gibt es hier eine Anleitung von Microsoft zur Barrierefreiheit von Visual Studio Code:
Accessibility in Visual Studio Code

Einführung in Visual Studio Code

Um den Einstieg in diese tolle, aber auch sehr komplexe Entwicklungsumgebung zu erleichtern hier ein Link von Microsoft:
Erste Schritte mit der Webentwicklung mit Visual Studio Code

Tipparbeit sparen

Aufgrund meiner Körperbehinderung suche ich immer nach Möglichkeiten Zeit zu sparen beim Tippen von Code. In Visual Studio Code gibt es hierfür Code-Snippets. Code-Snippets sind Vorlagen, die die Eingabe wiederkehrender Codemuster, wie etwa Schleifen oder bedingter Anweisungen, erleichtern.

In Visual Studio Code werden Snippets in IntelliSense ( Strg+Leertaste ) gemischt mit anderen Vorschlägen sowie in einem speziellen Snippet-Picker ( Snippet einfügen in der Befehlspalette) angezeigt. Es gibt auch Unterstützung für die Tab-Vervollständigung: Aktivieren Sie sie mit „editor.tabCompletion“: „on“, geben Sie ein Snippet-Präfix (Triggertext) ein und drücken Sie die Tabulatortaste , um ein Snippet einzufügen.

Die Snippet-Syntax folgt der Snippet-Syntax von TextMate mit Ausnahme von „interpoliertem Shell-Code“ und der Verwendung von \u; beides wird nicht unterstützt.

Eine englischsprachige Anleitung von Mircosoft zu Code-Snippets gibt es auf dieser Webseite:
Snippets in Visual Studio Code

Schlussbemerkung

Die Entwicklungsumgebung Visual Studio Code benötigen wir um HTML programmieren zu können. Visual Studio Code ist komplett barrierefrei und auch für blinde Menschen bedienbar.

Wenn Sie Fragen zu obige Themen haben, schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463 .

Weiterlesen

HTML lernen leicht gemacht: Ein inklusiver Kurs für alle