VS Code for AI

VS Code ist eine kostenlose Anwendung von Microsoft. Öffne es und du siehst drei Dinge.

Der Datei-Explorer (linke Seite). Wie Finder auf Mac oder Datei-Explorer unter Windows. Zeigt alle Dateien und Ordner. Klicke auf eine Datei um sie zu öffnen.

Der Editor (Mitte). Ein Texteditor für Code. Wie Google Docs aber für Code-Dateien. Du kannst hier alles lesen, auch wenn du den Code nicht verstehst. Achte auf englische Wörter: Überschriften, Button-Labels, Inhalte.

Das Terminal (unten). Eine Text-Konversation mit deinem Computer. Du tippst einen Befehl, er antwortet. Das ist alles.

Warum VS Code wichtig ist: fast jedes AI-Coding-Tool läuft darin oder in etwas Ähnlichem. Claude Code, Copilot, Cursor. VS Code zu verstehen bedeutet zu verstehen, wo AI und Code sich treffen.

Probier das

Lade VS Code herunter (kostenlos auf code.visualstudio.com). Öffne es. Schau dir die drei Bereiche an: Datei-Explorer, Editor, Terminal. Öffne eine Textdatei. Bearbeite etwas. Speichere. Du hast gerade einen Code-Editor benutzt.

Öffne ein exportiertes Projekt und du siehst eine Ordnerstruktur. Sieht überwältigend aus. Ist eigentlich nach einfacher Logik organisiert.

src/ steht für "Source". Hier leben die eigentlichen Seiten, Komponenten und Texte. Hier wirst du Zeit verbringen.

public/ enthält Dateien die direkt auf die Website gehen. Bilder, Icons, Schriften.

node_modules/ sind Bibliotheken. Ignoriere diesen Ordner komplett. Niemals öffnen.

package.json listet auf, was das Projekt braucht. Wie die Zutatenliste eines Rezepts.

Das Muster: dein Inhalt ist in src/ und public/. Alles andere ist Infrastruktur. Wenn du exportierten Code öffnest, schau zuerst in src/.

Probier das

Exportiere ein Projekt aus Lovable oder Bolt. Öffne den Ordner in VS Code. Navigiere zum src Ordner. Finde eine Datei mit echtem Inhalt, den du wiedererkennst. Du hast dich gerade in einer Codebasis orientiert.

Öffne eine HTML-Datei. Sieht 10 Sekunden lang beängstigend aus. Dann siehst du englische Wörter. Headlines. Absätze. Button-Labels. Der Inhalt ist genau da, umgeben von Tags.

Nutze Strg+F (Cmd+F auf Mac). Suche nach Text, den du auf der Seite siehst. Da ist er. Ändere ihn. Speichern.

Farben: suche nach "color:" oder "background:". Finde Hex-Codes wie #C4612A. Ändere den Code, ändere die Farbe.

Bilder: suche nach .jpg oder .png. Finde Bild-Referenzen. Ersetze die Datei oder ändere den Pfad.

Du hast gerade Code bearbeitet. Nicht professionell. Aber die Datei funktioniert mit deinen Änderungen. Das ist echt.

Probier das

Öffne eine exportierte HTML-Datei. Finde eine Headline mit Strg+F. Ändere sie. Speichern. Öffne die Datei im Browser. Sieh deine Änderung. Das ist Code bearbeiten.

Öffne das Terminal in VS Code (Ansicht dann Terminal). Ein Cursor blinkt. Tippe etwas. Der Computer antwortet.

Fünf Befehle für 80% von dem, was du brauchst:

ls (oder dir unter Windows): zeig mir was in diesem Ordner ist. Wie einen Ordner im Finder öffnen.

cd ordnername: gehe in diesen Ordner. Wie Doppelklicken.

cd .. : gehe einen Ordner zurück. Der Zurück-Button.

npm run dev: starte das Projekt. Lässt deine Seite lokal im Browser laufen.

npm run build: bereite für den Launch vor. Erstellt die finale Version bereit zum Hosten.

Das war's. Fünf Befehle. Das Terminal ist auch wo Claude Code lebt. Wenn Assisted Coding sagt "führe das im Terminal aus", ist hier der Ort.

Probier das

Öffne das Terminal in VS Code. Tippe 'ls' (oder 'dir'). Sieh deine Dateien aufgelistet. Tippe 'cd' in einen Ordner. Tippe 'ls' erneut. Du hast gerade mit dem Terminal navigiert.

VS Code ist das Original. Kostenlos, von Microsoft. Jede Extension, jedes Plugin oder Tool, das hier funktioniert, funktioniert überall.

Cursor ist VS Code mit AI im Kern. Gleiche Oberfläche. Gleicher Datei-Explorer. Gleiches Terminal. Aber AI ist in alles eingewoben: schlägt Code vor, bearbeitet mehrere Dateien, versteht dein Projekt. VS Code mit einem AI-Kollegen vorinstalliert.

Windsurf ist ein weiterer Fork. Ähnliche Idee, andere Umsetzung. Weniger etabliert, wächst.

Der Punkt: lerne VS Code und du kennst alle. Die Oberfläche ist dieselbe. Das Fundament ist dasselbe. AI-Features sind Ergänzungen, keine Ersetzungen.

Was nutzen: beim Erkunden? VS Code (kostenlos). Die beste AI-Integration willst? Cursor (kostenpflichtig). Beide laufen dieselben Projekte auf dieselbe Weise.

Probier das

Wenn du VS Code nutzt, probiere dasselbe Projekt in Cursor zu öffnen (kostenlose Testversion). Beachte wie ähnlich die Oberfläche ist. Die AI-Features sind der einzige Unterschied.

Weg 1: Inline AI (Copilot, Cursors eingebautes AI). AI beobachtet was du tippst und schlägt vor, was als nächstes kommt. Wie Handy-Autocomplete aber für Code. Du fährst. AI schlägt Abzweigungen vor.

Copilot funktioniert mit dem Modell deiner Wahl: GPT, Claude, Gemini. Es ist eine Extension. Fügt eine Ebene von Vorschlägen hinzu, ohne VS Code zu verändern.

Weg 2: Terminal AI (Claude Code). AI läuft als Gespräch im Terminal. Du beschreibst was du willst: "Füge ein Kontaktformular hinzu." Es erstellt und modifiziert Dateien. Du beschreibst das Ziel. AI fährt.

Der Unterschied: Inline AI ist super, wenn du weißt, was du baust. Terminal AI ist super, wenn du weißt, was du willst, aber nicht wie du es baust.

Viele Profis nutzen beides. Inline für kleine Edits. Terminal für größere Aufgaben. Sie ergänzen sich.

Probier das

Schau dir ein 2-Minuten-Demo von sowohl Copilot als auch Claude Code auf YouTube an. Sieh den Unterschied in Aktion. Eins schlägt Code vor. Das andere schreibt ganze Features.

Schritt 1: exportiere ein Projekt aus Lovable oder Bolt.

Schritt 2: öffne den Ordner in VS Code.

Schritt 3: tippe im Terminal npm install (macht das Projekt bereit). Dann npm run dev (startet es lokal).

Schritt 4: öffne deinen Browser. Gehe zur URL die das Terminal zeigt (normalerweise localhost:3000 oder ähnlich).

Schritt 5: finde eine Headline im Code. Ändere sie. Speichern. Der Browser aktualisiert sich automatisch.

Das ist der Entwicklungs-Loop. Schreiben, speichern, Ergebnis sehen. Der Loop dauert 5 Sekunden. Deshalb fühlt sich Entwicklung schnell an, sobald man drin ist.

Probier das

Mach es. Exportiere ein Projekt. Öffne es in VS Code. Führe npm install und npm run dev aus. Ändere eine Headline. Sieh sie sich aktualisieren. Du hast gerade den Entwicklungs-Workflow erlebt.

Was du gelernt hast: VS Code ist ein Texteditor mit Superkräften. Dateien und Ordner haben eine logische Struktur. Du kannst Code lesen und bearbeiten. Das Terminal ist eine Text-Konversation. AI hilft auf zwei Arten. Cursor ist VS Code mit vorinstalliertem AI.

Was Assisted Coding hinzufügt: Docker für konsistente Umgebungen. Claude Code als dein AI Pair Programmer. Supabase für echte Datenbanken. Vercel für professionelles Deployment. Eine phasenbasierte Methodologie für komplexe Projekte.

Die ehrliche Einschätzung: Assisted Coding erfordert eine technische Denkweise. Keinen Abschluss. Die Bereitschaft, Befehle zu tippen, Fehler zu lesen und in Systemen zu denken. Wenn sich dieser VS Code Kurs machbar anfühlte, bist du bereit.

Wenn es sich überwältigend anfühlte: bleib bei No-Code-Tools. Sie sind leistungsfähig und werden immer besser. Die früheren University-Kurse sind eine vollständige Lösung für die meisten Bedürfnisse.

Probier das

Öffne VS Code. Öffne ein Projekt. Navigiere zu src. Finde Text. Ändere ihn. Wenn sich das machbar anfühlte, bist du bereit für Assisted Coding.