• Code_AutoHandler.zip
• Video_VisualStudioCode_D

Visual Studio Code

Verwendung

Visual Studio Code ist ein kostenloser, plattformübergreifender Code-Editor von Microsoft.

• Läuft auf Linux, Windows und macOS.

• Entwickelt für Programmierer und Webentwickler, aber auch sehr beliebt bei Admins, Data Scientists und Studenten.

Eigenschaften:

• Leichtgewichtig, aber erweiterbar - Extensions

• Syntax-Highlighting & Autovervollständigung

• Debugger

• Git-Integration

• Extensions Marketplace - Erweiterungen für Sprachen, Frameworks (z. B. PHP, LaTeX, Markdown, Docker, Jupyter)

• Themes Oberfläche und Syntaxfarben sind frei anpassbar

• IntelliSense - Code-Completion

• Remote-Entwicklung - per SSH oder Docker direkt auf Servern arbeiten

Visual Studio ist eine große IDE für C#, .NET, Windows-Entwicklung und läuft nur unter Windows.

Verwendung:

• Webentwicklung (HTML, CSS, JavaScript, PHP, Node.js, React, …)

• Datenanalyse (Python)

• Markdown & Dokumentation inkl. HTML/PDF

• Administration - Config-Dateien auf Linux-Servern bearbeiten (per SSH-Plugin)

Installation

Download unter:

(https://code.visualstudio.com/download)

Dach erfolgt die Installation.

Projekt

Im Browser einen neuen Folder anlegen und diesen dann öffnen.

Erstellen Sie die Datei index.html und fügen Sie ein leeres HTML Dokument ein. Wählen Sie dazu html:5 aus.

Als Ergebnis erhalten Sie dann ein leeres HTML Dokument.

Emmet

Emmet ist eine Abkürzungssyntax für HTML und CSS, die das Schreiben von Code stark beschleunigt.

Statt komplette Strukturen auszutippen, werden kurze Kürzel geschrieben, die anschließend automatisch zu vollständigem Code erweitert werden.

Emmet ist in vielen Editoren integriert, unter anderem in Visual Studio Code, Sublime Text, Atom, WebStorm und anderen.

Vorteile

• Schnelleres Schreiben von HTML und CSS

• Automatische Vervollständigung komplexer Strukturen

• Einheitliche Syntax, die in verschiedenen Editoren funktioniert

• Besonders praktisch beim Prototyping oder Erstellen von Layouts

Grundprinzipien der Syntax

• > → Kind-Element (verschachteln)

• + → Geschwister-Element (nebeneinander)

• *N → Wiederholung

• $ → laufende Nummerierung

• . → Klasse (div.box)

• # → ID (div#main)

• [attr=wert] → Attribut

Cheat Sheet

Extensions

Extensions (Erweiterungen) in Visual Studio Code sind kleine Zusatzmodule, die den Editor um neue Funktionen erweitern oder bestehende verbessern.

Damit lässt sich VS Code sehr flexibel an verschiedene Arbeitsweisen, Programmiersprachen und Frameworks anpassen.

Einsatz

• Sprachunterstützung erweitern - Syntax-Highlighting, Autovervollständigung (IntelliSense), Snippets z. B. für PHP, Python, LaTeX, Rust, Docker

• Produktivität steigern - Automatische Codeformatierung (z. B. Prettier); Intelligentes Umbenennen von Tags (z. B. Auto Rename Tag); Live-Server für HTML-Projekte (Live Server)

• Arbeiten mit Frameworks & Tools - React, Angular, Vue.js, Tailwind CSS, Bootstrap Git, Docker, Kubernetes

• Debugger und Testumgebungen - Spracheigene Debugger (z. B. C++, Python, Node.js); Unit-Testing-Frameworks

• Teamarbeit & Kollaboration - GitHub Copilot, GitLens (erweitertes Git-Tracking); Live Share (gemeinsam am Code arbeiten)

• Themes & UI-Anpassungen - Farbthemen (Dark/Light Modes, spezielle Syntaxfarben); Icon Packs für Dateien & Ordner