leestott
7cfaffabb5
|
7 days ago | |
|---|---|---|
| .. | ||
| README.md | 7 days ago | |
| assignment.md | 7 days ago | |
README.md
Verwendung eines Code-Editors
Diese Lektion behandelt die Grundlagen der Nutzung von VSCode.dev, einem webbasierten Code-Editor, damit du Änderungen an deinem Code vornehmen und zu einem Projekt beitragen kannst, ohne etwas auf deinem Computer installieren zu müssen.
Lernziele
In dieser Lektion lernst du:
- Einen Code-Editor in einem Code-Projekt zu verwenden
- Änderungen mit Versionskontrolle zu verfolgen
- Den Editor für die Entwicklung anzupassen
Voraussetzungen
Bevor du beginnst, musst du ein Konto bei GitHub erstellen. Navigiere zu GitHub und erstelle ein Konto, falls du noch keines hast.
Einführung
Ein Code-Editor ist ein unverzichtbares Werkzeug zum Schreiben von Programmen und zur Zusammenarbeit an bestehenden Coding-Projekten. Sobald du die Grundlagen eines Editors und dessen Funktionen verstanden hast, kannst du diese beim Schreiben von Code anwenden.
Einstieg in VSCode.dev
VSCode.dev ist ein Code-Editor im Web. Du musst nichts installieren, um ihn zu nutzen – es ist genauso einfach wie das Öffnen einer anderen Website. Um mit dem Editor zu beginnen, öffne den folgenden Link: https://vscode.dev. Falls du nicht bei GitHub angemeldet bist, folge den Anweisungen, um dich anzumelden oder ein neues Konto zu erstellen und dich dann einzuloggen.
Sobald der Editor geladen ist, sollte er ähnlich wie dieses Bild aussehen:
Es gibt drei Hauptbereiche, von links nach rechts:
- Die Aktivitätsleiste, die einige Symbole enthält, wie die Lupe 🔎, das Zahnrad ⚙️ und einige andere.
- Die erweiterte Aktivitätsleiste, die standardmäßig den Explorer zeigt und als Seitenleiste bezeichnet wird.
- Und schließlich der Code-Bereich rechts.
Klicke auf jedes der Symbole, um ein anderes Menü anzuzeigen. Wenn du fertig bist, klicke auf den Explorer, um wieder zum Ausgangspunkt zurückzukehren.
Wenn du anfängst, Code zu erstellen oder bestehenden Code zu ändern, geschieht dies im größten Bereich rechts. Du wirst diesen Bereich auch nutzen, um bestehenden Code zu visualisieren, was du als Nächstes tun wirst.
Ein GitHub-Repository öffnen
Das Erste, was du tun musst, ist ein GitHub-Repository zu öffnen. Es gibt mehrere Möglichkeiten, ein Repository zu öffnen. In diesem Abschnitt siehst du zwei verschiedene Methoden, wie du ein Repository öffnen kannst, um Änderungen vorzunehmen.
1. Mit dem Editor
Verwende den Editor selbst, um ein Remote-Repository zu öffnen. Wenn du zu VSCode.dev gehst, siehst du einen Button "Open Remote Repository":
Du kannst auch die Befehls-Palette verwenden. Die Befehls-Palette ist ein Eingabefeld, in das du ein beliebiges Wort eingeben kannst, das Teil eines Befehls oder einer Aktion ist, um den richtigen Befehl auszuführen. Verwende das Menü oben links, wähle dann View und anschließend Command Palette, oder nutze die folgende Tastenkombination: Strg-Shift-P (auf MacOS wäre es Command-Shift-P).
Sobald das Menü geöffnet ist, gib open remote repository ein und wähle die erste Option. Mehrere Repositories, an denen du beteiligt bist oder die du kürzlich geöffnet hast, werden angezeigt. Du kannst auch eine vollständige GitHub-URL verwenden, um eines auszuwählen. Verwende die folgende URL und füge sie in das Feld ein:
https://github.com/microsoft/Web-Dev-For-Beginners
✅ Wenn erfolgreich, werden alle Dateien dieses Repositorys im Texteditor geladen.
2. Mit der URL
Du kannst auch direkt eine URL verwenden, um ein Repository zu laden. Zum Beispiel lautet die vollständige URL für das aktuelle Repository https://github.com/microsoft/Web-Dev-For-Beginners, aber du kannst die GitHub-Domain durch VSCode.dev/github ersetzen und das Repository direkt laden. Die resultierende URL wäre https://vscode.dev/github/microsoft/Web-Dev-For-Beginners.
Dateien bearbeiten
Sobald du das Repository im Browser/vscode.dev geöffnet hast, besteht der nächste Schritt darin, Updates oder Änderungen am Projekt vorzunehmen.
1. Eine neue Datei erstellen
Du kannst entweder eine Datei in einem bestehenden Ordner erstellen oder sie im Stammverzeichnis/Ordner anlegen. Um eine neue Datei zu erstellen, öffne einen Speicherort/Ordner, in dem die Datei gespeichert werden soll, und wähle das Symbol 'Neue Datei ...' in der Aktivitätsleiste (links), gib ihr einen Namen und drücke Enter.
2. Eine Datei im Repository bearbeiten und speichern
Die Nutzung von vscode.dev ist hilfreich, wenn du schnelle Updates an deinem Projekt vornehmen möchtest, ohne Software lokal zu laden. Um deinen Code zu aktualisieren, klicke auf das Symbol 'Explorer', das sich ebenfalls in der Aktivitätsleiste befindet, um Dateien und Ordner im Repository anzuzeigen. Wähle eine Datei aus, um sie im Code-Bereich zu öffnen, nimm deine Änderungen vor und speichere sie.
Sobald du mit der Aktualisierung deines Projekts fertig bist, wähle das Symbol Source Control, das alle neuen Änderungen enthält, die du an deinem Repository vorgenommen hast.
Um die Änderungen an deinem Projekt anzuzeigen, wähle die Datei(en) im Ordner Changes in der erweiterten Aktivitätsleiste aus. Dadurch wird ein 'Working Tree' geöffnet, in dem du die Änderungen an der Datei visuell sehen kannst. Rot zeigt eine Entfernung aus dem Projekt, während Grün eine Hinzufügung bedeutet.
Wenn du mit den Änderungen zufrieden bist, die du vorgenommen hast, bewege den Mauszeiger über den Ordner Changes und klicke auf die Schaltfläche +, um die Änderungen zu stagen. Staging bedeutet einfach, deine Änderungen vorzubereiten, um sie bei GitHub zu committen.
Falls du jedoch mit einigen Änderungen nicht zufrieden bist und sie verwerfen möchtest, bewege den Mauszeiger über den Ordner Changes und wähle das Symbol Undo.
Gib dann eine Commit-Nachricht ein (Eine Beschreibung der Änderungen, die du am Projekt vorgenommen hast), klicke auf das Check-Symbol, um die Änderungen zu committen und zu pushen.
Sobald du mit deinem Projekt fertig bist, wähle das Hamburger-Menü-Symbol oben links, um zum Repository auf github.com zurückzukehren.
Erweiterungen verwenden
Das Installieren von Erweiterungen in VSCode ermöglicht es dir, neue Funktionen und Optionen für eine angepasste Entwicklungsumgebung in deinem Editor hinzuzufügen, um deinen Entwicklungsworkflow zu verbessern. Diese Erweiterungen helfen dir auch, Unterstützung für mehrere Programmiersprachen hinzuzufügen und sind oft entweder generische Erweiterungen oder sprachbasierte Erweiterungen.
Um die Liste aller verfügbaren Erweiterungen zu durchsuchen, klicke auf das Symbol Extensions in der Aktivitätsleiste und beginne, den Namen der Erweiterung in das Textfeld mit der Bezeichnung 'Search Extensions in Marketplace' einzugeben. Du siehst eine Liste von Erweiterungen, die jeweils den Namen der Erweiterung, den Namen des Herausgebers, eine kurze Beschreibung, die Anzahl der Downloads und eine Sternebewertung enthalten.
Du kannst auch alle zuvor installierten Erweiterungen anzeigen, indem du den Ordner Installed erweiterst, beliebte Erweiterungen, die von den meisten Entwicklern verwendet werden, im Ordner Popular und empfohlene Erweiterungen für dich entweder von Benutzern im selben Arbeitsbereich oder basierend auf deinen zuletzt geöffneten Dateien im Ordner Recommended.
1. Erweiterungen installieren
Um eine Erweiterung zu installieren, gib den Namen der Erweiterung in das Suchfeld ein und klicke darauf, um zusätzliche Informationen über die Erweiterung im Code-Bereich anzuzeigen, sobald sie in der erweiterten Aktivitätsleiste erscheint.
Du kannst entweder auf die blaue Installationsschaltfläche in der erweiterten Aktivitätsleiste klicken, um die Erweiterung zu installieren, oder die Installationsschaltfläche verwenden, die im Code-Bereich erscheint, sobald du die Erweiterung auswählst, um zusätzliche Informationen zu laden.
2. Erweiterungen anpassen
Nach der Installation der Erweiterung musst du möglicherweise deren Verhalten ändern und sie basierend auf deinen Präferenzen anpassen. Um dies zu tun, wähle das Symbol Extensions aus, und diesmal wird deine Erweiterung im Ordner Installed angezeigt. Klicke auf das Zahnrad-Symbol und navigiere zu Extensions Setting.
3. Erweiterungen verwalten
Nach der Installation und Nutzung deiner Erweiterung bietet vscode.dev Optionen, um deine Erweiterung basierend auf verschiedenen Bedürfnissen zu verwalten. Zum Beispiel kannst du:
-
Deaktivieren: (Du kannst eine Erweiterung vorübergehend deaktivieren, wenn du sie nicht mehr benötigst, sie aber nicht vollständig deinstallieren möchtest)
Wähle die installierte Erweiterung in der erweiterten Aktivitätsleiste aus > klicke auf das Zahnrad-Symbol > wähle 'Disable' oder 'Disable (Workspace)' ODER öffne die Erweiterung im Code-Bereich und klicke auf die blaue Schaltfläche Disable.
-
Deinstallieren: Wähle die installierte Erweiterung in der erweiterten Aktivitätsleiste aus > klicke auf das Zahnrad-Symbol > wähle 'Uninstall' ODER öffne die Erweiterung im Code-Bereich und klicke auf die blaue Schaltfläche Uninstall.
Aufgabe
Erstelle eine Lebenslauf-Website mit vscode.dev
Überprüfung & Selbststudium
Lies mehr über VSCode.dev und einige seiner anderen Funktionen.
Haftungsausschluss:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst Co-op Translator übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.