RoWaWorld

Eine ältere Version des Dokuments wurde geladen! Beim Speichern wird eine neue Version des Dokuments mit diesem Inhalt erstellt.

<WRAP rww-back>
[[werkzeuge:start|←]] [[werkzeuge:start|Werkzeuge]]
</WRAP>

</WRAP>

===== Was ist Visual Studio Code? =====

Visual Studio Code – kurz **VS Code** – ist ein Quelltexteditor für die Arbeit mit Programmcode und anderen Textdateien.

Mit VS Code kann ich beispielsweise Dateien eines Projekts bearbeiten, Ordner und Projektstrukturen verwalten sowie verschiedene Werkzeuge direkt in einer gemeinsamen Arbeitsumgebung nutzen.

Durch Erweiterungen lässt sich VS Code um zusätzliche Funktionen für unterschiedliche Programmiersprachen und Aufgaben ergänzen.

Für mich ist VS Code noch Neuland. Diese Seite dokumentiert deshalb meinen Einstieg und wächst zusammen mit meiner tatsächlichen Nutzung.

===== Warum möchte ich VS Code verwenden? =====

VS Code möchte ich vor allem für meine eigenen Entwicklungsprojekte kennenlernen.

Bisher erledige ich viele Arbeiten an Quelltextdateien mit einem einfachen Texteditor. Mit VS Code möchte ich künftig eine Arbeitsumgebung nutzen, die mich beim Bearbeiten und Verwalten von Programmcode besser unterstützt.

Besonders interessant ist VS Code für mich im Zusammenhang mit:

* WordPress- und Theme-Entwicklung
  * PHP, HTML, CSS und JavaScript
  * Git und GitHub
  * übersichtlicher Verwaltung meiner Projektdateien

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 =====

Visual Studio Code ist auf meinem Rechner bereits installiert.

Praktisch gearbeitet habe ich damit bisher jedoch noch nicht. Meine bisherigen Arbeiten an Quelltextdateien erledige ich hauptsächlich mit **Notepad++**.

Ich beginne bei VS Code deshalb bewusst bei den Grundlagen:

* Wie ist die Oberfläche aufgebaut?
  * Wie öffne ich ein bestehendes Projekt?
  * Wie bearbeite und speichere ich Dateien?
  * Wie hilft mir VS Code beim Programmieren?
  * Wie arbeiten VS Code, Git und GitHub zusammen?

Diese Seite soll meinen tatsächlichen Lernweg begleiten. Funktionen werden deshalb erst ausführlicher dokumentiert, wenn ich sie kennenlerne und praktisch einsetze.

===== Meine Installation =====

VS Code ist auf meinem Windows-Rechner bereits installiert.

Bevor ich mit der eigentlichen Arbeit beginne, dokumentiere ich zunächst meine vorhandene Installation und die wichtigsten Grundeinstellungen.

==== Installierte Version ====

Meine aktuell installierte Version kann ich in der Windows-Eingabeaufforderung prüfen mit:

<code>
code --version
</code>

Aktueller Stand:

<code>
1.132.0
df53daabb18cd157bdb08c7f01c34df936cf12f4
x64
</code>

Dabei bedeutet:

* ''1.132.0'' → installierte VS-Code-Version
  * 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.
===== 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.

==== 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:

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 =====

===== Probleme & Lösungen =====

Zusammenfassung