Aufgaben-Python/04b_umstieg_vscode/index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kapitel 04b: Umstieg auf Visual Studio Code</title>
  <link rel="stylesheet" href="../assets/style.css">
</head>
<body>

  <header>
    <div class="header-container">
      <nav class="nav-links">
        <a href="../index.html">🏠 Zur Kursübersicht</a>
        <span>&rsaquo;</span>
        <a href="../04_str_und_darstellung/index.html">Kapitel 04</a>
        <span>&rsaquo;</span>
        <span style="color: white; font-weight: 600;">Kapitel 04b (VS Code)</span>
        <span>&rsaquo;</span>
        <a href="../05_objekte_kombinieren/index.html">Kapitel 05 &rarr;</a>
      </nav>
      <div class="header-badge">Exkurs &amp; Praxissprung</div>
      <h1>Umstieg von Thonny auf Visual Studio Code 🚀💻</h1>
      <p>Willkommen in der Profi-Entwicklungsumgebung! Lerne die besten Plugins, Shortcuts und Arbeitsabläufe kennen.</p>
    </div>
  </header>

  <main class="container">

    <!-- 1. Warum wechseln? -->
    <section class="card">
      <h2>1. Warum wechseln wir von Thonny zu VS Code?</h2>
      
      <p>
        <strong>Thonny</strong> war für den Anfang genial: Es ist einfach, hat einen Variablen-Inspektor und man kann Zeile für Zeile durch ein Skript gehen.
      </p>
      <p>
        Doch je größer deine Projekte werden (mehrere Dateien, Klassen, Tests und Git), desto mehr stößt Thonny an seine Grenzen. <strong>Visual Studio Code (VS Code)</strong> ist der weltweite Standard in der professionellen Softwareentwicklung.
      </p>

      <div class="box box-analogie">
        <div class="box-title">🏎️ Vom Fahrschulauto zum Rennwagen:</div>
        <ul>
          <li><strong>Thonny</strong> ist das Fahrschulauto mit Doppelpedalen – perfekt für die ersten Fahrstunden auf dem Parkplatz.</li>
          <li><strong>VS Code</strong> ist ein modernes Sportauto mit Navi, Spurhalteassistent, Tempomat und Turbolader. Es hilft dir beim Tippen, findet Fehler automatisch und macht das Coden viel schneller!</li>
        </ul>
      </div>

      <h3>Die 4 größten Vorteile von VS Code:</h3>
      <ul style="margin-left: 20px; margin-top: 10px;">
        <li style="margin-bottom: 6px;"><strong>IntelliSense:</strong> Schlägt dir automatisch Methoden und Variablennamen vor (kein Vertippen mehr!).</li>
        <li style="margin-bottom: 6px;"><strong>Projekt-Ordner:</strong> Du siehst alle Dateien deines Projekts auf einen Blick in der Seitenleiste.</li>
        <li style="margin-bottom: 6px;"><strong>Integriertes Terminal:</strong> Führe Tests und Skripte direkt im Editor aus, ohne Fenster zu wechseln.</li>
        <li style="margin-bottom: 6px;"><strong>Tausende Erweiterungen:</strong> Passe VS Code mit Themes, Formatierern und Fehleranzeigen perfekt an dich an.</li>
      </ul>
    </section>

    <!-- 2. Wichtigstes Grundkonzept: Open Folder -->
    <section class="card">
      <h2>2. Das wichtigste Grundkonzept: "Ordner öffnen" (Open Folder)</h2>

      <div class="box box-warning">
        <div class="box-title">⚠️ Wichtigster Unterschied zu Thonny:</div>
        In Thonny hat man meist nur eine einzelne Datei geöffnet (z.B. <code>aufgabe.py</code>).<br>
        In <strong>VS Code öffnet man immer den gesamten Projektordner</strong> (z.B. <code>Aufgaben-Python</code>)!
      </div>

      <h3>So öffnest du dein Projekt richtig:</h3>
      <ol style="margin-left: 20px; margin-top: 10px;">
        <li style="margin-bottom: 8px;">Starte <strong>Visual Studio Code</strong>.</li>
        <li style="margin-bottom: 8px;">Klicke im Menü oben auf <strong>Datei &rarr; Ordner öffnen...</strong> (oder <kbd>Strg</kbd> + <kbd>K</kbd>, dann <kbd>Strg</kbd> + <kbd>O</kbd> / auf Mac: <kbd>Cmd</kbd> + <kbd>O</kbd>).</li>
        <li style="margin-bottom: 8px;">Wähle den Hauptordner <code>Aufgaben-Python</code> aus und klicke auf <strong>Öffnen</strong>.</li>
        <li style="margin-bottom: 8px;">Bestätige eventuell die Frage <em>"Vertrauen Sie den Autoren?"</em> mit <strong>Ja</strong>.</li>
      </ol>
      <p style="margin-top: 10px;">Jetzt siehst du links im Explorer alle Kapitelordner, Tests und Dateien sauber aufgelistet!</p>
    </section>

    <!-- 3. Die besten Plugins / Extensions -->
    <section class="card">
      <h2>3. 🧩 Die unverzichtbaren Erweiterungen (Plugins)</h2>

      <p>
        Um Erweiterungen zu installieren, klicke ganz links in der Seitenleiste auf das <strong>Erweiterungs-Icon</strong> (die vier Quadrate mit einem fliegenden Würfel) oder drücke <kbd>Strg</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd> (Mac: <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd>).
      </p>

      <div class="extension-grid">
        
        <!-- Python -->
        <div class="extension-card">
          <div class="extension-icon">🐍</div>
          <div class="extension-info">
            <h4>Python (von Microsoft)</h4>
            <p><strong>Pflicht-Plugin!</strong> Aktiviert Syntax-Highlighting, Code-Ausführung, IntelliSense und Debugging.</p>
          </div>
        </div>

        <!-- Pylance -->
        <div class="extension-card">
          <div class="extension-icon">⚡</div>
          <div class="extension-info">
            <h4>Pylance (von Microsoft)</h4>
            <p>Macht die Autovervollständigung blitzschnell und warnt dich sofort bei falschen Typen.</p>
          </div>
        </div>

        <!-- Error Lens -->
        <div class="extension-card" style="border: 2px solid var(--primary);">
          <div class="extension-icon">🔍</div>
          <div class="extension-info">
            <h4>Error Lens <span style="font-size: 0.75rem; background: var(--primary); color: white; padding: 2px 6px; border-radius: 10px;">Geheimtipp!</span></h4>
            <p>Zeigt Fehler und Warnungen <strong>direkt als farbigen Text in der Codezeile</strong> an – kein Suchen im Terminal nötig!</p>
          </div>
        </div>

        <!-- Material Icon Theme -->
        <div class="extension-card">
          <div class="extension-icon">🎨</div>
          <div class="extension-info">
            <h4>Material Icon Theme</h4>
            <p>Verleiht Python-, HTML- und Git-Dateien im Explorer hübsche und bunte Symbole.</p>
          </div>
        </div>

        <!-- Better Comments -->
        <div class="extension-card">
          <div class="extension-icon">💬</div>
          <div class="extension-info">
            <h4>Better Comments</h4>
            <p>Färbt Kommentare ein: <code># TODO:</code> wird orange, <code># !</code> wird rot, <code># ?</code> wird blau.</p>
          </div>
        </div>

        <!-- Black Formatter -->
        <div class="extension-card">
          <div class="extension-icon">🪄</div>
          <div class="extension-info">
            <h4>Black Formatter</h4>
            <p>Formatiert deinen Code beim Speichern (<kbd>Strg</kbd>+<kbd>S</kbd>) automatisch nach den offiziellen Python-Regeln.</p>
          </div>
        </div>

      </div>
    </section>

    <!-- 4. Die Oberfläche verstehen -->
    <section class="card">
      <h2>4. 🖥️ Die Benutzeroberfläche im Überblick</h2>

      <ul style="margin-left: 20px;">
        <li style="margin-bottom: 12px;">
          <strong>Seitenleiste links:</strong>
          <br>📁 <strong>Explorer:</strong> Dateibaum durchsuchen.
          <br>🔍 <strong>Suche:</strong> Text im gesamten Projekt finden.
          <br>🌿 <strong>Quellcodeverwaltung:</strong> Git Commits &amp; Pushes.
          <br>🧩 <strong>Erweiterungen:</strong> Neue Plugins installieren.
        </li>
        <li style="margin-bottom: 12px;">
          <strong>Das integrierte Terminal:</strong>
          <br>Drücke <kbd>Strg</kbd> + <kbd>`</kbd> (Taste links neben der Backspace-Taste / bzw. <kbd>Strg</kbd> + <kbd>J</kbd>).
          <br>Hier kannst du direkt wie gewohnt deine Befehle tippen:
          <div class="code-container" style="margin: 8px 0;">
            <pre><code>python3 test_all.py</code></pre>
          </div>
        </li>
        <li style="margin-bottom: 12px;">
          <strong>Python-Interpreter auswählen:</strong>
          <br>Unten rechts in der Statusleiste steht deine Python-Version (z.B. <code>3.11.x</code>). Falls dort <em>"Select Interpreter"</em> steht, klicke darauf und wähle den empfohlenen Python-Pfad aus.
        </li>
      </ul>
    </section>

    <!-- 5. Die wichtigsten Shortcuts -->
    <section class="card">
      <h2>5. ⌨️ Die wichtigsten Tastenkombinationen (Shortcuts)</h2>

      <p>Mit diesen Shortcuts codest du wie ein echter Profi:</p>

      <table style="width: 100%; border-collapse: collapse; margin: 15px 0;">
        <thead>
          <tr style="background: var(--primary-light); text-align: left;">
            <th style="padding: 10px; border: 1px solid var(--border-color);">Aktion</th>
            <th style="padding: 10px; border: 1px solid var(--border-color);">Windows / Linux</th>
            <th style="padding: 10px; border: 1px solid var(--border-color);">macOS</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style="padding: 10px; border: 1px solid var(--border-color);">💾 Datei speichern</td>
            <td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Strg</kbd> + <kbd>S</kbd></td>
            <td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Cmd</kbd> + <kbd>S</kbd></td>
          </tr>
          <tr style="background: #fafafa;">
            <td style="padding: 10px; border: 1px solid var(--border-color);">💻 Terminal öffnen / schließen</td>
            <td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Strg</kbd> + <kbd>`</kbd> (oder <kbd>Strg</kbd> + <kbd>J</kbd>)</td>
            <td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Cmd</kbd> + <kbd>`</kbd> (oder <kbd>Cmd</kbd> + <kbd>J</kbd>)</td>
          </tr>
          <tr>
            <td style="padding: 10px; border: 1px solid var(--border-color);">⚡ Command Palette (Alles suchen)</td>
            <td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Strg</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd></td>
            <td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd></td>
          </tr>
          <tr style="background: #fafafa;">
            <td style="padding: 10px; border: 1px solid var(--border-color);">🪄 Code automatisch formatieren</td>
            <td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd></td>
            <td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Option</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd></td>
          </tr>
          <tr>
            <td style="padding: 10px; border: 1px solid var(--border-color);">✨ Nächstes gleiches Wort markieren</td>
            <td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Strg</kbd> + <kbd>D</kbd></td>
            <td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Cmd</kbd> + <kbd>D</kbd></td>
          </tr>
          <tr style="background: #fafafa;">
            <td style="padding: 10px; border: 1px solid var(--border-color);">🚀 Skript direkt ausführen</td>
            <td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Strg</kbd> + <kbd>F5</kbd> (oder Play-Button oben rechts)</td>
            <td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Cmd</kbd> + <kbd>F5</kbd></td>
          </tr>
        </tbody>
      </table>
    </section>

    <!-- 6. Mitmach-Experiment -->
    <section class="card">
      <h2>6. 🧪 Dein Mitmach-Check in <code>vscode_test.py</code></h2>

      <p>Öffne die Datei <code>04b_umstieg_vscode/vscode_test.py</code> in VS Code und probiere die neuen Features aus:</p>

      <ul class="task-list">
        <li class="task-item">
          <input type="checkbox" class="task-checkbox" id="c1">
          <label for="c1" class="task-label">
            <strong>Schritt 1:</strong> Öffne das Projekt <code>Aufgaben-Python</code> als Ordner in VS Code.
          </label>
        </li>
        <li class="task-item">
          <input type="checkbox" class="task-checkbox" id="c2">
          <label for="c2" class="task-label">
            <strong>Schritt 2:</strong> Installiere die Erweiterungen <strong>Python</strong> und <strong>Error Lens</strong>.
          </label>
        </li>
        <li class="task-item">
          <input type="checkbox" class="task-checkbox" id="c3">
          <label for="c3" class="task-label">
            <strong>Schritt 3:</strong> Öffne <code>vscode_test.py</code> und beobachte, wie Error Lens sofort Fehler hervorhebt.
          </label>
        </li>
        <li class="task-item">
          <input type="checkbox" class="task-checkbox" id="c4">
          <label for="c4" class="task-label">
            <strong>Schritt 4:</strong> Tippe <code>auto.</code> und sieh dir die Autovervollständigung (IntelliSense) an.
          </label>
        </li>
        <li class="task-item">
          <input type="checkbox" class="task-checkbox" id="c5">
          <label for="c5" class="task-label">
            <strong>Schritt 5:</strong> Öffne das Terminal mit <kbd>Strg</kbd> + <kbd>`</kbd> und führe <code>python3 vscode_test.py</code> aus.
          </label>
        </li>
      </ul>

      <div class="box box-success">
        <div class="box-title">🎉 Perfekt vorbereitet!</div>
        Du beherrschst nun die Grundlagen von VS Code. Jetzt bist du bereit für Kapitel 05 (Objekte kombinieren)!
      </div>

      <div class="footer-nav">
        <a href="../04_str_und_darstellung/index.html" class="btn btn-secondary">&larr; Zurück zu Kapitel 04</a>
        <a href="../05_objekte_kombinieren/index.html" class="btn">Weiter zu Kapitel 05: Komposition &rarr;</a>
      </div>
    </section>

  </main>

</body>
</html>