Tutorials

Vibe Coding in VS Code: Der ultimative Setup-Guide mit OpenCode (100% Kostenlos)

Melden

„Vibe Coding“ ist die Kunst des Programmierens, bei der du nicht mehr jede Zeile Syntax selbst schreibst. Stattdessen beschreibst du in natürlicher Sprache deine Vision, steuerst die Architektur und lässt die KI den Code generieren, testen und verfeinern – du bleibst im Flow („in the vibe“).

Kommerzielle Tools wie GitHub Copilot oder Cursor sind teuer. Mit VS Code und OpenCode (unter Nutzung von Open-Source-Frameworks wie Continue und freien Coding-Modellen) baust du dir exakt dasselbe Erlebnis komplett kostenlos auf.

Voraussetzungen

  1. Visual Studio Code installiert (Download).
  2. Ein PC mit Internetzugang (optional: eine solide Grafikkarte, falls du Modelle lokal offline ausführen willst).

Schritt 1: Das Herzstück – OpenCode Extension in VS Code installieren

Für ein vollwertiges Vibe-Coding-Erlebnis in VS Code nutzen wir das führende Open-Source-System (häufig über die Schnittstelle Continue oder dedizierte OpenCode-Erweiterungen realisiert):

  1. Öffne VS Code.
  2. Drücke Strg + Shift + X (Mac: Cmd + Shift + X), um den Extensions-Tab zu öffnen.
  3. Suche nach Continue (das Standard-Open-Source-Tool für KI-Code-Assistenz) oder OpenCode.
  4. Klicke auf Installieren.
  5. Nach der Installation erscheint ein neues KI-Symbol in deiner linken Seitenleiste.

Schritt 2: Den kostenlosen KI-Motor wählen

Vibe Coding braucht ein schnelles, intelligentes Modell für Code-Generierung und Auto-Complete. Du hast zwei 100% kostenlose Optionen:

Option A: Cloud-basiert & Extrem Schnell (Empfohlen)

Nutze kostenlose API-Kontingente von Anbietern wie Groq oder OpenRouter.

  • Vorteil: Keine starke Hardware nötig, extrem schnelle Antwortzeiten.
  1. Erstelle einen kostenlosen Account bei Groq oder OpenRouter.
  2. Generiere einen API Key.
  3. Wähle dort freie Top-Modelle wie Llama 3.3 70B oder Qwen 2.5 Coder 32B.

Option B: Lokal, Offline & 100% Privat

Nutze Ollama, um Modelle direkt auf deinem PC laufen zu lassen.

  1. Lade Ollama herunter und installiere es.
  2. Öffne dein Terminal und lade das aktuell beste Open-Source-Codemodell herunter:
    ollama run qwen2.5-coder:7b

Schritt 3: OpenCode / Continue konfigurieren

Nun verknüpfen wir die VS Code-Erweiterung mit dem Modell.

  1. Klicke auf das Zahnrad-Symbol (Einstellungen) unten im Seitenleisten-Chat der Extension. Dadurch öffnet sich die Datei config.json.
  2. Füge deine Konfiguration ein.

Beispiel-Konfiguration für Option A (OpenRouter / Groq - Cloud):

{
  "models": [
    {
      "title": "Qwen 2.5 Coder (Free via OpenRouter)",
      "provider": "openrouter",
      "model": "qwen/qwen-2.5-coder-32b-instruct:free",
      "apiKey": "DEIN_OPENROUTER_API_KEY"
    }
  ],
  "tabAutocompleteModel": {
    "title": "DeepSeek Coder Autocomplete",
    "provider": "openrouter",
    "model": "deepseek/deepseek-coder:free",
    "apiKey": "DEIN_OPENROUTER_API_KEY"
  }
}

Beispiel-Konfiguration für Option B (Ollama - Lokal):

{
  "models": [
    {
      "title": "Qwen 2.5 Coder Local",
      "provider": "ollama",
      "model": "qwen2.5-coder:7b"
    }
  ],
  "tabAutocompleteModel": {
    "title": "Qwen Autocomplete",
    "provider": "ollama",
    "model": "qwen2.5-coder:1.5b"
  }
}

Speichere die Datei mit Strg + S.

Schritt 4: Der Vibe-Coding Workflow in der Praxis

Vibe Coding basiert auf drei Kerninteraktionen, die du beherrschen musst:

1. In-Line Editing (Strg + I / Cmd + I)

  • Wie es geht: Markiere Code in deiner Datei und drücke Strg + I.
  • Prompt-Beispiel: „Refaktoriere diese Funktion zu async/await und füge sauberes Error-Handling hinzu.“
  • Die KI ändert den Code direkt in der Datei als Diff (Rot/Grün-Vergleich). Mit einem Klick akzeptierst du die Änderung.

2. Kontext-gestütztes Chatten (Strg + L / Cmd + L)

  • Öffnet den Seitenleisten-Chat.
  • Kontext hinzufügen: Tippe @Files oder @Code, um die KI auf bestimmte Ordner oder Dateien zu verweisen.
  • Prompt-Beispiel: „@app.py @models.py Erstelle mir einen neuen REST-Endpunkt, der alle aktiven Benutzer basierend auf der Datenbank-Logik filtert.“

3. Tab-Autocomplete

  • Schreibe einfach deinen Code weiter oder tippe einen Funktionsnamen.
  • Halte kurz inne, warte auf den grauen Vorschlagstext und drücke die Tab-Taste, um die Zeilen automatisch zu vervollständigen.

3 Goldene Regeln für erfolgreiches Vibe Coding

  1. Denke in Meilensteinen: Bitte die KI nicht um „Baue mir eine Klon-App von Instagram“. Bitte sie um: „Baue ein Skript für das Datenbank-Schema“, dann „Erstelle das API-Routing“, dann „Baue das Frontend“.
  2. Nutze die Fehler: Wenn ein Fehler in der Konsole auftaucht, markiere ihn einfach, drücke Strg + Shift + R (oder füge ihn in den Chat ein) und sage: „Fix this“.
  3. Sei der Architekt: Du musst nicht jede Zeile Syntax tippen, aber du musst die Logik und die Architektur hinterfragen. Lies den Code quer, bevor du ihn akzeptierst.

Zusammenfassung

Mit dieser Kombination aus VS Code, einer quelloffenen Schnittstelle wie Continue/OpenCode und kostenlosen Modellen wie Qwen 2.5 Coder hast du eine vollwertige Entwicklungsumgebung geschaffen. Du genießt denselben Flow wie Entwickler mit teuren Abonnements – völlig kostenlos und bei Bedarf zu 100% datenschutzkonform auf deiner eigenen Hardware.

0