VS 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.

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.

Für die Oberfläche von VS Code verwende ich das Farbdesign:

Dunkel Modern

Das Farbdesign kann über das Zahnrad unten links geändert werden:

Zahnrad → Designs → Farbdesign

Alternativ kann die Auswahl über folgendes Tastenkürzel geöffnet werden:

Strg + K
Strg + T

Für meinen Einstieg verwende ich das mit VS Code mitgelieferte Farbdesign Dunkel Modern.

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.

Mein erstes Projekt, das ich mit VS Code geöffnet habe, ist TheCruiserBlog.

Das Projekt befindet sich lokal unter:

E:\xampp\htdocs\thecruiserblog

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.

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.

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.

Hier sammle ich Tastenkürzel und kleine Hilfen, die mir bei meiner praktischen Arbeit mit VS Code tatsächlich begegnen.

Strg + Umschalt + P

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.

Strg + K
Strg + T

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.

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.