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.

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.

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.

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.

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

code --version

Aktueller Stand:

1.132.0
df53daabb18cd157bdb08c7f01c34df936cf12f4
x64

Dabei bedeutet:

• 1.132.0 → installierte VS-Code-Version
• die lange Zeichenfolge → Kennung des zugrunde liegenden Programmstands
• x64 → installierte 64-Bit-Version

Für meinen Einstieg verwende ich VS Code mit deutscher Benutzeroberfläche.

Die Anzeigesprache kann über die Befehlspalette geändert werden:

Strg + Umschalt + P

Anschließend:

Configure Display Language

Als Anzeigesprache ist bei mir Deutsch eingestellt.

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.

Der Explorer zeigt die Ordner und Dateien des aktuell geöffneten Projekts.

Mein erstes geöffnetes Projekt ist:

E:\xampp\htdocs\thecruiserblog

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.

Im Editor werden die Dateien geöffnet und bearbeitet.

Zum ersten Kennenlernen habe ich aus meinem TheCruiserBlog-Projekt die Datei

wp-config.php

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.

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:

Terminal → Neues Terminal

Bei mir startet VS Code standardmäßig PowerShell.

Da TheCruiserBlog als Projektordner geöffnet ist, startet das Terminal direkt in diesem Verzeichnis:

PS E:\xampp\htdocs\thecruiserblog>

Damit kann ich später beispielsweise Git- oder WP-CLI-Befehle direkt aus VS Code heraus ausführen.

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:

main

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.