513 lines
27 KiB
HTML
513 lines
27 KiB
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 & Installation von Visual Studio Code</title>
|
||
<link rel="stylesheet" href="../../assets/style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<div class="app-layout">
|
||
<aside class="app-sidebar">
|
||
<div class="sidebar-header">
|
||
<a href="../../index.html" class="sidebar-brand-link">
|
||
<div class="sidebar-logo">🐍</div>
|
||
<div>
|
||
<div class="sidebar-title">Python Portal</div>
|
||
<div class="sidebar-subtitle">Lernplattform</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="sidebar-quick-nav">
|
||
<a href="../../index.html" class="sidebar-link">🏠 Startseite</a>
|
||
<a href="../../index.html#tutorial" class="sidebar-link">📖 Tutorial & Workflow</a>
|
||
<a href="../../index.html#zertifikate" class="sidebar-link">🏆 Zertifikate</a>
|
||
</div>
|
||
|
||
<div class="sidebar-nav">
|
||
<div class="sidebar-group">
|
||
<div class="sidebar-group-title">
|
||
<span>🌱 1. Grundlagen</span>
|
||
<span style="background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 99px; font-size: 0.7rem;">G01–G10</span>
|
||
</div>
|
||
<div style="display: flex; flex-direction: column; gap: 2px;">
|
||
<a href="../../lehrpfad_1_grundlagen/01_erste_schritte_taschenrechner/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🧮</span>
|
||
<span class="sidebar-link-text">G01. Taschenrechner</span>
|
||
</a>
|
||
<a href="../../lehrpfad_1_grundlagen/02_variablen_und_datentypen/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">📦</span>
|
||
<span class="sidebar-link-text">G02. Variablen & Typen</span>
|
||
</a>
|
||
<a href="../../lehrpfad_1_grundlagen/03_ein_und_ausgabe/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">💬</span>
|
||
<span class="sidebar-link-text">G03. Ein- & Ausgabe</span>
|
||
</a>
|
||
<a href="../../lehrpfad_1_grundlagen/04_verzweigungen_und_bedingungen/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🚦</span>
|
||
<span class="sidebar-link-text">G04. Bedingungen (if)</span>
|
||
</a>
|
||
<a href="../../lehrpfad_1_grundlagen/05_schleifen_und_wiederholungen/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🎡</span>
|
||
<span class="sidebar-link-text">G05. Schleifen (for/while)</span>
|
||
</a>
|
||
<a href="../../lehrpfad_1_grundlagen/06_funktionen_und_module/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🪄</span>
|
||
<span class="sidebar-link-text">G06. Funktionen & Module</span>
|
||
</a>
|
||
<a href="../../lehrpfad_1_grundlagen/07_listen_und_sequenzen/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">📋</span>
|
||
<span class="sidebar-link-text">G07. Listen & Sequenzen</span>
|
||
</a>
|
||
<a href="../../lehrpfad_1_grundlagen/08_textverarbeitung_und_strings/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🔤</span>
|
||
<span class="sidebar-link-text">G08. String-Methoden</span>
|
||
</a>
|
||
<a href="../../lehrpfad_1_grundlagen/09_dictionaries_und_sets/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🗃️</span>
|
||
<span class="sidebar-link-text">G09. Dicts & Sets</span>
|
||
</a>
|
||
<a href="../../lehrpfad_1_grundlagen/10_comprehensions_datum_algorithmen/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🚀</span>
|
||
<span class="sidebar-link-text">G10. Comprehensions</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="sidebar-group">
|
||
<div class="sidebar-group-title">
|
||
<span>🏗️ 2. OOP Einstieg</span>
|
||
<span style="background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 99px; font-size: 0.7rem;">00–06</span>
|
||
</div>
|
||
<div style="display: flex; flex-direction: column; gap: 2px;">
|
||
<a href="../../lehrpfad_2_oop_einstieg/00_fehlersuche_und_grundlagen/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🔍</span>
|
||
<span class="sidebar-link-text">00. Fehlersuche & Debug</span>
|
||
</a>
|
||
<a href="../../lehrpfad_2_oop_einstieg/01_einstieg_klassen/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🏗️</span>
|
||
<span class="sidebar-link-text">01. Einstieg in Klassen</span>
|
||
</a>
|
||
<a href="../../lehrpfad_2_oop_einstieg/02_init_und_self/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">⚙️</span>
|
||
<span class="sidebar-link-text">02. Konstruktor & self</span>
|
||
</a>
|
||
<a href="../../lehrpfad_2_oop_einstieg/03_methoden_und_verhalten/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🏎️</span>
|
||
<span class="sidebar-link-text">03. Methoden & Verhalten</span>
|
||
</a>
|
||
<a href="../../lehrpfad_2_oop_einstieg/04_str_und_darstellung/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🧾</span>
|
||
<span class="sidebar-link-text">04. __str__ Darstellung</span>
|
||
</a>
|
||
<a href="../../lehrpfad_2_oop_einstieg/04b_umstieg_vscode/index.html" class="sidebar-link active">
|
||
<span class="sidebar-link-icon">💻</span>
|
||
<span class="sidebar-link-text">04b. VS Code Setup</span>
|
||
</a>
|
||
<a href="../../lehrpfad_2_oop_einstieg/04c_git_und_versionskontrolle/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🌿</span>
|
||
<span class="sidebar-link-text">04c. Git-Versionskontrolle</span>
|
||
</a>
|
||
<a href="../../lehrpfad_2_oop_einstieg/05_objekte_kombinieren/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🎵</span>
|
||
<span class="sidebar-link-text">05. Objekte kombinieren</span>
|
||
</a>
|
||
<a href="../../lehrpfad_2_oop_einstieg/06_abschlussprojekt_tamagotchi/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🥚</span>
|
||
<span class="sidebar-link-text">06. Projekt: Tamagotchi</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="sidebar-group">
|
||
<div class="sidebar-group-title">
|
||
<span>🚀 3. Fortgeschritten</span>
|
||
<span style="background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 99px; font-size: 0.7rem;">07–16</span>
|
||
</div>
|
||
<div style="display: flex; flex-direction: column; gap: 2px;">
|
||
<a href="../../lehrpfad_3_fortgeschrittenes_oop/07_referenzen_und_speicher/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🧠</span>
|
||
<span class="sidebar-link-text">07. Referenzen & Speicher</span>
|
||
</a>
|
||
<a href="../../lehrpfad_3_fortgeschrittenes_oop/08_operator_overloading_dunder/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">➕</span>
|
||
<span class="sidebar-link-text">08. Operator Overloading</span>
|
||
</a>
|
||
<a href="../../lehrpfad_3_fortgeschrittenes_oop/09_eigene_unit_tests_schreiben/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🧪</span>
|
||
<span class="sidebar-link-text">09. Unit Tests & TDD</span>
|
||
</a>
|
||
<a href="../../lehrpfad_3_fortgeschrittenes_oop/10_vererbung_und_super/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🧬</span>
|
||
<span class="sidebar-link-text">10. Vererbung & super()</span>
|
||
</a>
|
||
<a href="../../lehrpfad_3_fortgeschrittenes_oop/11_polymorphie_und_interfaces/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🎭</span>
|
||
<span class="sidebar-link-text">11. Polymorphie</span>
|
||
</a>
|
||
<a href="../../lehrpfad_3_fortgeschrittenes_oop/12_exceptions_und_fehlerbehandlung/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🛡️</span>
|
||
<span class="sidebar-link-text">12. Exceptions & Fehler</span>
|
||
</a>
|
||
<a href="../../lehrpfad_3_fortgeschrittenes_oop/13_persistenz_json_und_csv/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">💾</span>
|
||
<span class="sidebar-link-text">13. Persistenz (JSON/CSV)</span>
|
||
</a>
|
||
<a href="../../lehrpfad_3_fortgeschrittenes_oop/14_gui_mit_tkinter/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🖥️</span>
|
||
<span class="sidebar-link-text">14. Desktop-GUIs (Tkinter)</span>
|
||
</a>
|
||
<a href="../../lehrpfad_3_fortgeschrittenes_oop/15_parameter_und_container/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🎒</span>
|
||
<span class="sidebar-link-text">15. Container & *args</span>
|
||
</a>
|
||
<a href="../../lehrpfad_3_fortgeschrittenes_oop/16_master_abschlussprojekt/index.html" class="sidebar-link">
|
||
<span class="sidebar-link-icon">🏆</span>
|
||
<span class="sidebar-link-text">16. Master-Abschlussprojekt</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar-footer">
|
||
<div style="display: flex; align-items: center; justify-content: space-between;">
|
||
<div style="font-size: 0.85rem; font-weight: 700; color: white;" id="sidebar-level-text">⭐ Level 1</div>
|
||
<div style="font-size: 0.82rem; font-weight: 700; color: #38bdf8;" id="sidebar-xp-text">0 XP</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="app-main">
|
||
<header>
|
||
<div class="header-container">
|
||
<nav class="nav-links">
|
||
<a href="../../index.html">🏠 Zur Kursübersicht</a>
|
||
<span>›</span>
|
||
<a href="../04_str_und_darstellung/index.html">Kapitel 04</a>
|
||
<span>›</span>
|
||
<span style="color: white; font-weight: 600;">Kapitel 04b (VS Code)</span>
|
||
<span>›</span>
|
||
<a href="../05_objekte_kombinieren/index.html">Kapitel 05 →</a>
|
||
</nav>
|
||
<div class="header-badge">Installation & Setup</div>
|
||
<h1>Umstieg von Thonny auf Visual Studio Code 🚀💻</h1>
|
||
<p>Schritt-für-Schritt-Installationsanleitung (Windows, Mac, Linux), die besten Plugins und Profi-Tipps.</p>
|
||
</div>
|
||
</header>
|
||
<main class="container">
|
||
|
||
<!-- 📂 Schnellzugriff & Download aller Dateien dieser Einheit -->
|
||
<div style="background: #ffffff; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 14px 20px; margin-bottom: 25px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; box-shadow: var(--shadow-sm);">
|
||
<div style="font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 8px;">
|
||
<span>📂 Dateien dieser Einheit:</span>
|
||
</div>
|
||
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
|
||
<a href="../../workspace.html?course=python&track=lehrpfad_2_oop_einstieg&chapter=04b_umstieg_vscode" class="btn" style="background: #10b981; color: #fff; font-weight: 700;">💻 In Web-IDE öffnen →</a>
|
||
<a href="README.md" class="btn btn-secondary" style="padding: 6px 14px; font-size: 0.88rem;">📖 README.md</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 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 Einstieg super: Es ist schlank und man sieht Variablen sofort.
|
||
</p>
|
||
<p>
|
||
Aber ab jetzt werden unsere Projekte größer (mehrere Dateien, Klassen, Tests und Git). <strong>Visual Studio Code (VS Code)</strong> von Microsoft ist die weltweit beliebteste Entwicklungsumgebung für Python.
|
||
</p>
|
||
|
||
<div class="box box-analogie">
|
||
<div class="box-title">🏎️ Die 4 größten Vorteile von VS Code:</div>
|
||
<ul>
|
||
<li><strong>IntelliSense:</strong> Schlägt dir automatisch Methoden und Attribute vor (z.B. wenn du <code>mein_auto.</code> tippst).</li>
|
||
<li><strong>Projekt-Explorer:</strong> Alle Dateien und Ordner deines Kurses auf einen Blick.</li>
|
||
<li><strong>Integriertes Terminal:</strong> Skripte und Tests direkt im Editor mit <kbd>Strg</kbd> + <kbd>`</kbd> ausführen.</li>
|
||
<li><strong>Erweiterungen (Extensions):</strong> Fehler werden direkt farbig im Code markiert (Error Lens).</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 2. Installationsanleitung für alle Betriebssysteme -->
|
||
<section class="card">
|
||
<h2>2. 📥 Schritt-für-Schritt Installationsanleitung</h2>
|
||
|
||
<p>Wähle dein Betriebssystem aus und befolge die Schritte:</p>
|
||
|
||
<!-- Windows Installation -->
|
||
<details open>
|
||
<summary style="font-size: 1.15rem;">🪟 Anleitung für Windows 10 / 11</summary>
|
||
<div class="details-content">
|
||
<ol style="margin-left: 20px;">
|
||
<li style="margin-bottom: 10px;">
|
||
Gehe auf die offizielle Website: <a href="https://code.visualstudio.com" target="_blank" style="color: var(--primary); font-weight: bold;">code.visualstudio.com</a> und klicke auf den blauen Button <strong>"Download for Windows"</strong>.
|
||
</li>
|
||
<li style="margin-bottom: 10px;">
|
||
Starte die heruntergeladene Installationsdatei (<code>VSCodeUserSetup-x64-...exe</code>).
|
||
</li>
|
||
<li style="margin-bottom: 10px;">
|
||
Akzeptiere die Lizenzvereinbarung und klicke auf <strong>Weiter</strong>.
|
||
</li>
|
||
<li style="margin-bottom: 10px;">
|
||
<div class="box box-warning" style="margin: 6px 0;">
|
||
<div class="box-title">⚠️ Sehr wichtig bei der Windows-Installation:</div>
|
||
Setze im Schritt <em>"Zusätzliche Aufgaben auswählen"</em> unbedingt <strong>alle Haken</strong>:
|
||
<ul style="margin-left: 20px; margin-top: 6px;">
|
||
<li>✓ <strong>Aktion "Mit Code öffnen" zum Windows Explorer-Dateikontextmenü hinzufügen</strong></li>
|
||
<li>✓ <strong>Aktion "Mit Code öffnen" zum Windows Explorer-Verzeichniskontextmenü hinzufügen</strong></li>
|
||
<li>✓ <strong>Code als Editor für unterstützte Dateitypen registrieren</strong></li>
|
||
<li>✓ <strong>Zu PATH hinzufügen (nach Neustart verfügbar)</strong></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li style="margin-bottom: 10px;">
|
||
Klicke auf <strong>Installieren</strong> und danach auf <strong>Fertigstellen</strong> (VS Code startet automatisch).
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</details>
|
||
|
||
<!-- macOS Installation -->
|
||
<details>
|
||
<summary style="font-size: 1.15rem;">🍎 Anleitung für macOS (MacBook / iMac)</summary>
|
||
<div class="details-content">
|
||
<ol style="margin-left: 20px;">
|
||
<li style="margin-bottom: 10px;">
|
||
Gehe auf <a href="https://code.visualstudio.com" target="_blank" style="color: var(--primary); font-weight: bold;">code.visualstudio.com</a> und lade <strong>"Download for Mac"</strong> herunter (Universal).
|
||
</li>
|
||
<li style="margin-bottom: 10px;">
|
||
Öffne deinen <strong>Downloads-Ordner</strong> und entpacke die <code>.zip</code>-Datei (falls nicht automatisch geschehen).
|
||
</li>
|
||
<li style="margin-bottom: 10px;">
|
||
<div class="box box-tipp" style="margin: 6px 0;">
|
||
<div class="box-title">💡 Wichtig für Mac-Nutzer:</div>
|
||
Ziehe die Datei <strong>Visual Studio Code</strong> aus dem Downloads-Ordner in deinen Ordner <strong>Programme (Applications)</strong>!
|
||
</div>
|
||
</li>
|
||
<li style="margin-bottom: 10px;">
|
||
Öffne VS Code aus dem Programme-Ordner. (Falls eine Warnung erscheint: Klicke auf <em>"Öffnen"</em>).
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</details>
|
||
|
||
<!-- Linux Installation -->
|
||
<details>
|
||
<summary style="font-size: 1.15rem;">🐧 Anleitung für Linux (Ubuntu / Debian / Mint)</summary>
|
||
<div class="details-content">
|
||
<p>Lade das <code>.deb</code>-Paket von <a href="https://code.visualstudio.com" target="_blank" style="color: var(--primary);">code.visualstudio.com</a> herunter und doppelklicke darauf, oder installiere es direkt per Terminal:</p>
|
||
<div class="code-container">
|
||
<pre><code>sudo apt update && sudo apt install snapd
|
||
sudo snap install --classic code</code></pre>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
|
||
<!-- Sprache auf Deutsch umstellen -->
|
||
<div class="box box-tipp" style="margin-top: 20px;">
|
||
<div class="box-title">🇩🇪 Sprache auf Deutsch umstellen (Optional):</div>
|
||
Wenn du VS Code auf Deutsch haben möchtest:
|
||
<ol style="margin-left: 20px; margin-top: 6px;">
|
||
<li>Drücke <kbd>Strg</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (Mac: <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>).</li>
|
||
<li>Tippe: <code>Configure Display Language</code> und drücke <kbd>Enter</kbd>.</li>
|
||
<li>Wähle <code>Deutsch (German)</code> aus. VS Code startet kurz neu und ist komplett auf Deutsch!</li>
|
||
</ol>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3. Projektordner öffnen -->
|
||
<section class="card">
|
||
<h2>3. 📁 Das Projekt in VS Code öffnen</h2>
|
||
|
||
<div class="box box-warning">
|
||
<div class="box-title">⚠️ Grundregel: Immer "Ordner öffnen", nicht nur eine Datei!</div>
|
||
In VS Code öffnet man immer den <strong>gesamten Hauptordner</strong> (<code>Aufgaben-Python</code>), damit alle Kapitel, Hilfsdateien und Tests auf einmal verknüpft sind.
|
||
</div>
|
||
|
||
<ol style="margin-left: 20px;">
|
||
<li style="margin-bottom: 8px;">Klicke oben im Menü auf <strong>Datei → Ordner öffnen...</strong> (Mac: <strong>File → Open Folder...</strong>).</li>
|
||
<li style="margin-bottom: 8px;">Wähle deinen Ordner <code>Aufgaben-Python</code> aus und klicke auf <strong>Ordner auswählen</strong>.</li>
|
||
<li style="margin-bottom: 8px;">Bestätige die Meldung <em>"Vertrauen Sie den Autoren dieser Dateien?"</em> mit <strong>Ja</strong>.</li>
|
||
</ol>
|
||
<p style="margin-top: 10px;">Jetzt siehst du links in der Leiste den gesamten Dateibaum aller Kapitel!</p>
|
||
</section>
|
||
|
||
<!-- 4. Die besten Plugins / Extensions -->
|
||
<section class="card">
|
||
<h2>4. 🧩 Die wichtigsten Erweiterungen (Plugins)</h2>
|
||
|
||
<p>
|
||
Klicke ganz links in der Seitenleiste auf das <strong>Erweiterungs-Icon</strong> (die 4 Kacheln) oder drücke <kbd>Strg</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd> (Mac: <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd>).
|
||
</p>
|
||
<p>Suche nach den folgenden Namen und klicke jeweils auf <strong>Installieren (Install)</strong>:</p>
|
||
|
||
<div class="extension-grid">
|
||
|
||
<!-- Python -->
|
||
<div class="extension-card">
|
||
<div class="extension-icon">🐍</div>
|
||
<div class="extension-info">
|
||
<h4>1. Python (von Microsoft)</h4>
|
||
<p><strong>Pflicht!</strong> Aktiviert Syntax-Hervorhebung, Code-Ausführung und IntelliSense.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pylance -->
|
||
<div class="extension-card">
|
||
<div class="extension-icon">⚡</div>
|
||
<div class="extension-info">
|
||
<h4>2. Pylance (von Microsoft)</h4>
|
||
<p>Macht die Autovervollständigung blitzschnell und warnt bei falschen Parametern.</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>3. Error Lens <span style="font-size: 0.75rem; background: var(--primary); color: white; padding: 2px 6px; border-radius: 10px;">Must-Have!</span></h4>
|
||
<p>Zeigt Fehler <strong>direkt farbig in der Codezeile</strong> an – du musst nicht lange suchen!</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Material Icon Theme -->
|
||
<div class="extension-card">
|
||
<div class="extension-icon">🎨</div>
|
||
<div class="extension-info">
|
||
<h4>4. Material Icon Theme</h4>
|
||
<p>Gibt allen Dateien im Explorer schöne, bunte Symbole (Python-Logo, HTML-Icon etc.).</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Better Comments -->
|
||
<div class="extension-card">
|
||
<div class="extension-icon">💬</div>
|
||
<div class="extension-info">
|
||
<h4>5. Better Comments</h4>
|
||
<p>Färbt Kommentare ein: <code># TODO</code> (orange), <code># !</code> (rot), <code># ?</code> (blau).</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Black Formatter -->
|
||
<div class="extension-card">
|
||
<div class="extension-icon">🪄</div>
|
||
<div class="extension-info">
|
||
<h4>6. Black Formatter</h4>
|
||
<p>Formatiert Code beim Speichern (<kbd>Strg</kbd>+<kbd>S</kbd>) automatisch perfekt.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5. Die wichtigsten Shortcuts -->
|
||
<section class="card">
|
||
<h2>5. ⌨️ Tastenkombinationen (Shortcuts) für Profis</h2>
|
||
|
||
<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 (Befehle 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 starten</td>
|
||
<td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Strg</kbd> + <kbd>F5</kbd> (oder Play-Button ▶️)</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> VS Code herunterladen, installieren und den Ordner <code>Aufgaben-Python</code> öffnen.
|
||
</label>
|
||
</li>
|
||
<li class="task-item">
|
||
<input type="checkbox" class="task-checkbox" id="c2">
|
||
<label for="c2" class="task-label">
|
||
<strong>Schritt 2:</strong> Die Erweiterungen <strong>Python</strong> und <strong>Error Lens</strong> installieren.
|
||
</label>
|
||
</li>
|
||
<li class="task-item">
|
||
<input type="checkbox" class="task-checkbox" id="c3">
|
||
<label for="c3" class="task-label">
|
||
<strong>Schritt 3:</strong> In <code>vscode_test.py</code> die Autovervollständigung (IntelliSense) ausprobieren (<code>tesla.</code> tippen).
|
||
</label>
|
||
</li>
|
||
<li class="task-item">
|
||
<input type="checkbox" class="task-checkbox" id="c4">
|
||
<label for="c4" class="task-label">
|
||
<strong>Schritt 4:</strong> Das Terminal mit <kbd>Strg</kbd> + <kbd>`</kbd> öffnen und mit <code>python3 test_all.py</code> deinen Kurs-Fortschritt prüfen!
|
||
</label>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="box box-success">
|
||
<div class="box-title">🎉 Perfekt eingerichtet!</div>
|
||
Du bist jetzt mit modernem Profi-Werkzeug ausgestattet und bereit für Kapitel 05 (Objekte kombinieren)!
|
||
</div>
|
||
|
||
<div class="footer-nav">
|
||
<a href="../04_str_und_darstellung/index.html" class="btn btn-secondary">← Zurück zu Kapitel 04</a>
|
||
<a href="../04c_git_und_versionskontrolle/index.html" class="btn">Weiter zu Kapitel 04c: Git 🌿 →</a>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="button" class="sidebar-mobile-toggle"><span>☰ Menü</span></button>
|
||
<div class="sidebar-overlay"></div>
|
||
|
||
<!-- Scripts -->
|
||
<script src="../../assets/gamification_data.js"></script>
|
||
<script src="../../assets/gamification.js"></script>
|
||
<script src="../../assets/interpreter.js"></script>
|
||
<script src="../../assets/certificate.js"></script>
|
||
<script src="../../assets/parsons.js"></script>
|
||
<script src="../../assets/runner.js"></script>
|
||
<script src="../../assets/ui_enhancements.js"></script>
|
||
<script src="../../assets/sidebar.js"></script>
|
||
</body>
|
||
</html>
|