Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- werkzeuge:vscode:start [11.08.2026 16:02] – [Meine Installation] admin
+++ werkzeuge:vscode:start [29.09.2026 05:36] (aktuell) – admin
@@ Zeile 1: / Zeile 1: @@
-<WRAP rww-subpage-header>
+<WRAP rww-page-header>
+<WRAP rww-page-header-main>
-<WRAP rww-subpage-heading>
+<WRAP rww-page-title>
 ====== VS Code ======
 </WRAP>
-<WRAP rww-back>
+<WRAP rww-page-icon>
-[[werkzeuge:start|←]] [[werkzeuge:start|Werkzeuge]]
+<iconify mdi:microsoft-visual-studio-code>
+</WRAP>
 </WRAP>
+<WRAP rww-page-back>
+[[werkzeuge:start|← Werkzeuge]] · [[:start|Startseite]]
 </WRAP>
+</WRAP>
+----
 ===== Was ist Visual Studio Code? =====
@@ Zeile 35: / Zeile 41: @@
 Mein Ziel ist zunächst nicht, möglichst viele Funktionen von VS Code kennenzulernen. Ich möchte Schritt für Schritt genau die Werkzeuge verstehen, die ich bei meiner eigenen Arbeit tatsächlich benötige.
 ===== Meine Ausgangssituation =====
@@ Zeile 52: / Zeile 57: @@
 Diese Seite soll meinen tatsächlichen Lernweg begleiten. Funktionen werden deshalb erst ausführlicher dokumentiert, wenn ich sie kennenlerne und praktisch einsetze.
 ===== Meine Installation =====
@@ Zeile 81: / Zeile 85: @@
   * die lange Zeichenfolge → Kennung des zugrunde liegenden Programmstands
   * ''x64'' → installierte 64-Bit-Version
+==== Sprache ====
+Für meinen Einstieg verwende ich VS Code mit deutscher Benutzeroberfläche.
+Die Anzeigesprache kann über die Befehlspalette geändert werden:
+<code>
+Strg + Umschalt + P
+</code>
+Anschließend:
+<code>
+Configure Display Language
+</code>
+Als Anzeigesprache ist bei mir **Deutsch** eingestellt.
+==== Farbdesign ====
+Für die Oberfläche von VS Code verwende ich das Farbdesign:
+<code>
+Dunkel Modern
+</code>
+Das Farbdesign kann über das Zahnrad unten links geändert werden:
+<code>
+Zahnrad → Designs → Farbdesign
+</code>
+Alternativ kann die Auswahl über folgendes Tastenkürzel geöffnet werden:
+<code>
+Strg + K
+Strg + T
+</code>
+Für meinen Einstieg verwende ich das mit VS Code mitgelieferte Farbdesign **Dunkel Modern**.
 ===== Die Oberfläche kennenlernen =====
+VS Code bietet sehr viele Funktionen. Für meinen Einstieg konzentriere ich mich zunächst nur auf die Bereiche, die ich für meine tägliche Arbeit tatsächlich benötige.
+Die wichtigsten Bereiche lerne ich direkt an einem echten Projekt kennen, statt die komplette Oberfläche theoretisch durchzugehen.
+{{:rww:infografiken:vscode_wichtigste_bereiche.png|Visual Studio Code – Meine wichtigsten Bereiche}}
+==== Explorer ====
+Der Explorer zeigt die Ordner und Dateien des aktuell geöffneten Projekts.
+Mein erstes geöffnetes Projekt ist:
+<code>
+E:\xampp\htdocs\thecruiserblog
+</code>
+Nach dem Öffnen erscheint die komplette Ordner- und Dateistruktur von TheCruiserBlog links im Explorer.
+Damit kann ich innerhalb meines Projekts zu Dateien navigieren und sie direkt in VS Code öffnen.
+==== Editor ====
+Im Editor werden die Dateien geöffnet und bearbeitet.
+Zum ersten Kennenlernen habe ich aus meinem TheCruiserBlog-Projekt die Datei
+<code>
+wp-config.php
+</code>
+geöffnet.
+Die Datei erscheint in einem eigenen Tab im Editorbereich. Dadurch kann ich mehrere Dateien gleichzeitig geöffnet halten und zwischen ihnen wechseln.
+Für diesen ersten Test habe ich die Datei nur angesehen und nicht verändert.
+==== Integriertes Terminal ====
+VS Code besitzt ein integriertes Terminal. Dadurch kann ich Befehle ausführen, ohne zusätzlich eine separate Windows-Eingabeaufforderung öffnen zu müssen.
+Das Terminal öffne ich über:
+<code>
+Terminal → Neues Terminal
+</code>
+Bei mir startet VS Code standardmäßig PowerShell.
+Da TheCruiserBlog als Projektordner geöffnet ist, startet das Terminal direkt in diesem Verzeichnis:
+<code>
+PS E:\xampp\htdocs\thecruiserblog>
+</code>
+Damit kann ich später beispielsweise Git- oder WP-CLI-Befehle direkt aus VS Code heraus ausführen.
+==== Quellcodeverwaltung ====
+VS Code besitzt eine integrierte Quellcodeverwaltung und erkennt mein vorhandenes Git-Repository von TheCruiserBlog automatisch.
+Über das Symbol **Quellcodeverwaltung** in der Aktivitätsleiste kann ich den Git-Zustand meines Projekts sehen.
+Bei meinem ersten Aufruf wird unten der aktuelle Branch angezeigt:
+<code>
+main
+</code>
+Der Bereich **Änderungen** ist leer. Das bedeutet, dass Git momentan keine geänderten Dateien anzeigt.
+Damit kann ich den Git-Status meines Projekts direkt in VS Code verfolgen, ohne dafür ausschließlich Git-Befehle im Terminal verwenden zu müssen.
+Commit- und weitere Git-Funktionen in VS Code werde ich erst verwenden, wenn ich ihren Ablauf praktisch kennengelernt habe.
 ===== Mein erstes Projekt mit VS Code =====
+Mein erstes Projekt, das ich mit VS Code geöffnet habe, ist **TheCruiserBlog**.
+Das Projekt befindet sich lokal unter:
+<code>
+E:\xampp\htdocs\thecruiserblog
+</code>
+Ich habe nicht einzelne Dateien geöffnet, sondern den kompletten Projektordner. Dadurch kennt VS Code die gesamte Ordner- und Dateistruktur des Projekts.
+Gleichzeitig erkennt VS Code das bereits vorhandene Git-Repository. Auch das integrierte Terminal startet automatisch im Projektverzeichnis.
+Damit stehen mir innerhalb einer gemeinsamen Arbeitsumgebung unter anderem zur Verfügung:
+  * Navigation durch die Projektdateien über den Explorer
+  * Bearbeitung von Dateien im Editor
+  * Terminalbefehle direkt im Projektverzeichnis
+  * Git-Funktionen über die Quellcodeverwaltung
+TheCruiserBlog dient mir damit als erstes praktisches Lernprojekt für VS Code.
 ===== Funktionen, die ich tatsächlich nutze =====
+Meine Liste der tatsächlich genutzten VS-Code-Funktionen wächst zusammen mit meiner praktischen Arbeit.
+Aktuell habe ich folgende Funktionen selbst verwendet:
+  * **Projektordner öffnen** → TheCruiserBlog als komplettes Projekt in VS Code öffnen
+  * **Explorer** → Ordner und Dateien des Projekts anzeigen
+  * **Editor** → eine Datei öffnen und deren Inhalt ansehen
+  * **Integriertes Terminal** → PowerShell direkt im Projektverzeichnis öffnen
+  * **Quellcodeverwaltung** → vorhandenes Git-Repository und den aktuellen Branch ''main'' anzeigen
+  * **Befehlspalette** → Anzeigesprache von VS Code auf Deutsch einstellen
+Weitere Funktionen ergänze ich erst, wenn ich sie tatsächlich verwendet habe.
 ===== Erweiterungen =====
+VS Code kann durch Erweiterungen um zusätzliche Funktionen ergänzt werden.
+Für meinen Einstieg installiere ich jedoch nicht sofort eine große Sammlung von Erweiterungen. Zunächst möchte ich die Grundfunktionen von VS Code kennenlernen und verstehen.
+Erweiterungen nehme ich erst dann auf, wenn ich für meine praktische Arbeit einen konkreten Bedarf dafür habe.
+So kann ich später auch nachvollziehen, welche Erweiterung ich installiert habe, warum ich sie benötige und welchen Nutzen sie mir tatsächlich bringt.
 ===== Tastenkürzel & kleine Helfer =====
+Hier sammle ich Tastenkürzel und kleine Hilfen, die mir bei meiner praktischen Arbeit mit VS Code tatsächlich begegnen.
+==== Befehlspalette öffnen ====
+<code>
+Strg + Umschalt + P
+</code>
+Die Befehlspalette ermöglicht den schnellen Zugriff auf zahlreiche Funktionen und Befehle von VS Code.
+Bei meinem Einstieg habe ich sie erstmals verwendet, um die Anzeigesprache auf Deutsch umzustellen.
+Weitere Tastenkürzel ergänze ich erst, wenn ich sie selbst verwendet habe und sie für meinen Arbeitsablauf nützlich sind.
+==== Farbdesign auswählen ====
+<code>
+Strg + K
+Strg + T
+</code>
+Die beiden Tastenkombinationen werden nacheinander ausgeführt.
+Damit öffne ich die Auswahl der verfügbaren Farbdesigns für die VS-Code-Oberfläche.
+Bei meinem Einstieg habe ich dieses Tastenkürzel verwendet, um das Farbdesign **Dunkel Modern** auszuwählen.
 ===== Probleme & Lösungen =====
+VS Code ist für mich noch neu. Deshalb dokumentiere ich hier Probleme und Stolpersteine, die mir bei der praktischen Arbeit tatsächlich begegnen.
+Für jeden Fall möchte ich möglichst festhalten:
+  * Was wollte ich machen?
+  * Was ist passiert?
+  * Welche Meldung wurde angezeigt?
+  * Was war die Ursache?
+  * Wie habe ich das Problem gelöst?
+Dieser Bereich wächst zusammen mit meiner praktischen Erfahrung.
+<WRAP rww-to-top>
+[[#vs_code|↑]]
+</WRAP>