Tutorial: Erste Schritte mit Visual Studio Code

In diesem Tutorial lernen Sie die Hauptfunktionen von Visual Studio Code kennen, um schnell mit dem Codieren zu beginnen. Sie lernen die verschiedenen Komponenten der Benutzeroberfläche kennen und wie Sie diese nach Ihren Wünschen anpassen können. Anschließend schreiben Sie Code und nutzen die integrierten Codebearbeitungsfunktionen wie IntelliSense und Code Actions und lernen, wie Sie Ihren Code ausführen und debuggen. Durch die Installation einer sprachspezifischen Erweiterung fügen Sie Unterstützung für eine andere Programmiersprache hinzu.

Tipp

Wenn Sie lieber ein Video ansehen möchten, können Sie das Erste Schritte-Video ansehen, das dieselben Schritte wie dieses Tutorial behandelt.

Voraussetzungen

Visual Studio Code herunterladen und auf Ihrem Computer installieren

Ordner in VS Code öffnen

Sie können VS Code verwenden, um an einzelnen Dateien zu arbeiten und schnelle Änderungen vorzunehmen, oder Sie können einen Ordner öffnen, der auch als Arbeitsbereich bezeichnet wird.

Beginnen wir mit dem Erstellen eines Ordners und dem Öffnen in VS Code. Diesen Ordner werden Sie während des gesamten Tutorials verwenden.

Visual Studio Code öffnen.

Wenn Sie VS Code zum ersten Mal öffnen, sollten Sie die Seite Willkommen mit verschiedenen Aktionen für den Einstieg sehen.
Wählen Sie im Menü Datei > Ordner öffnen... aus, um einen Ordner zu öffnen.
Wählen Sie Neuer Ordner, erstellen Sie einen neuen Ordner namens vscode101 und wählen Sie dann Ordner auswählen (auf macOS Öffnen).

Der Ordner, den Sie erstellen, ist die Wurzel Ihres Arbeitsbereichs.
Wählen Sie im Dialogfeld Vertrauen in den Arbeitsbereich die Option Ja, ich vertraue den Autoren, um alle Funktionen im Arbeitsbereich zu aktivieren.

Da Sie den Ordner auf Ihrem Computer erstellt haben, können Sie dem Code im Ordner vertrauen.

Wichtig
Vertrauen in den Arbeitsbereich ermöglicht es Ihnen zu entscheiden, ob Code in Ihrem Projektordner von VS Code ausgeführt werden kann. Wenn Sie Code aus dem Internet herunterladen, sollten Sie ihn zuerst überprüfen, um sicherzustellen, dass er sicher ausgeführt werden kann. Weitere Informationen zu Vertrauen in den Arbeitsbereich.
Sie sollten nun auf der linken Seite die Ansicht Explorer sehen, die den Namen des Ordners anzeigt.

Sie verwenden die Explorer-Ansicht, um die Dateien und Ordner in Ihrem Arbeitsbereich anzuzeigen und zu verwalten.

Tipp

Wenn Sie einen Ordner in VS Code öffnen, kann VS Code den UI-Zustand für diesen Ordner wiederherstellen, z. B. die geöffneten Dateien, die aktive Ansicht und das Layout des Editors. Sie können auch Einstellungen konfigurieren, die nur für diesen Ordner gelten, oder Debugkonfigurationen definieren. Weitere Informationen zu Arbeitsbereichen.

Benutzeroberfläche erkunden

Nachdem Sie nun einen Ordner in VS Code geöffnet haben, machen wir eine schnelle Tour durch die Benutzeroberfläche.

Zwischen Ansichten mit der Aktivitätsleiste wechseln

Verwenden Sie die Aktivitätsleiste, um zwischen verschiedenen Ansichten zu wechseln.

Tipp
Fahren Sie mit der Maus über die Aktivitätsleiste, um den Namen jeder Ansicht und die entsprechende Tastenkombination anzuzeigen. Sie können eine Ansicht öffnen und schließen, indem Sie die Ansicht erneut auswählen oder die Tastenkombination drücken.
Wenn Sie eine Ansicht in der Aktivitätsleiste auswählen, wird die Primäre Seitenleiste geöffnet, um ansichtsspezifische Informationen anzuzeigen.

Die Ansicht "Ausführen und Debuggen" ermöglicht es Ihnen beispielsweise, Debugsitzungen zu konfigurieren und zu starten.

Dateien mit dem Editor anzeigen und bearbeiten

Wählen Sie in der Aktivitätsleiste die Ansicht Explorer aus und klicken Sie auf die Schaltfläche Neue Datei..., um eine neue Datei in Ihrem Arbeitsbereich zu erstellen.
Geben Sie den Namen index.html ein und drücken Sie Enter.

Eine Datei wird Ihrem Arbeitsbereich hinzugefügt und ein Editor öffnet sich im Hauptbereich des Fensters.
Beginnen Sie mit der Eingabe von HTML-Code in die Datei index.html.

Während Sie tippen, sollten Vorschläge erscheinen, die Ihnen helfen, Ihren Code zu vervollständigen (IntelliSense). Sie können die Tasten Auf und Ab verwenden, um durch die Vorschläge zu navigieren, und Tab, um den ausgewählten Vorschlag einzufügen.
Fügen Sie Ihrem Arbeitsbereich weitere Dateien hinzu und stellen Sie fest, dass jede Datei einen neuen Editor-Tab öffnet.

Sie können beliebig viele Editoren öffnen und sie vertikal oder horizontal nebeneinander anzeigen. Erfahren Sie mehr über nebeneinanderliegende Bearbeitung.

Greifen Sie über den Panel-Bereich auf das Terminal zu

VS Code verfügt über ein integriertes Terminal. Öffnen Sie es durch Drücken von ⌃` (Windows, Linux Ctrl+`).

Sie können je nach Betriebssystemkonfiguration zwischen verschiedenen Shells wie PowerShell, Eingabeaufforderung oder Bash wählen.
Geben Sie im Terminal den folgenden Befehl ein, um eine neue Datei in Ihrem Arbeitsbereich zu erstellen.
```
echo "Hello, VS Code" > greetings.txt
```
Der Standardordner ist die Wurzel Ihres Arbeitsbereichs. Beachten Sie, dass die Explorer-Ansicht die neue Datei automatisch erkennt und anzeigt.
Sie können mehrere Terminals gleichzeitig öffnen. Wählen Sie das Dropdown-Menü Startprofil aus, um die verfügbaren Shells anzuzeigen und eine auszuwählen.

Greifen Sie mit der Befehlspalette auf Befehle zu

Öffnen Sie die Befehlspalette durch Drücken von ⇧⌘P (Windows, Linux Ctrl+Shift+P). Sie können auch den Menüpunkt Anzeigen > Befehlspalette... verwenden.

Viele der Befehle in VS Code sind über die Befehlspalette verfügbar. Wenn Sie Erweiterungen installieren, können diese auch Befehle zur Befehlspalette hinzufügen.

Tipp
Beachten Sie, dass die Befehlspalette die Standardtastenkombination für Befehle anzeigt, die eine haben. Sie können die Tastenkombination verwenden, um den Befehl direkt auszuführen.
Die Befehlspalette unterstützt verschiedene Betriebsmodi
1. Geben Sie nach dem Symbol > ein, um die Befehlsliste zu filtern. Geben Sie z. B. Terminal verschieben ein, um Befehle zum Verschieben des Terminals in ein neues Fenster zu finden.
2. Entfernen Sie das Zeichen > und beginnen Sie mit der Eingabe, um Dateien in Ihrem Arbeitsbereich zu suchen. Sie können die Tastenkombination ⌘P (Windows, Linux Ctrl+P) verwenden, um die Befehlspalette zu öffnen und direkt mit der Suche nach Dateien zu beginnen.

Tipp

VS Code verwendet Fuzzy-Matching, um Dateien oder Befehle zu finden. Z. B. gibt die Eingabe von odks den Befehl Standardtastenkombinationen öffnen zurück.

VS Code-Einstellungen konfigurieren

Sie können fast jeden Teil von VS Code anpassen, indem Sie Einstellungen konfigurieren. Sie können den Einstellungen-Editor verwenden, um die Einstellungen in VS Code zu ändern oder die Datei settings.json direkt zu ändern.

Drücken Sie ⌘, (Windows, Linux Ctrl+,), um den Einstellungen-Editor zu öffnen (oder wählen Sie den Menüpunkt Datei > Einstellungen > Einstellungen aus).

Tipp
Verwenden Sie das Suchfeld, um die angezeigte Liste von Einstellungen zu filtern.
Standardmäßig speichert VS Code geänderte Dateien nicht automatisch. Wählen Sie einen Wert aus dem Dropdown-Menü "Automatisch speichern" aus, um dieses Verhalten zu ändern.

VS Code wendet Änderungen an den Einstellungen automatisch an. Wenn Sie eine Datei in Ihrem Arbeitsbereich ändern, sollte diese jetzt automatisch gespeichert werden.
Um eine Einstellung auf ihren Standardwert zurückzusetzen, wählen Sie das Zahnradsymbol neben der Einstellung und wählen Sie Einstellung zurücksetzen aus.

Tipp
Sie können alle geänderten Einstellungen schnell finden, indem Sie @modified in das Suchfeld eingeben oder den Filter Geändert auswählen.
Sie können die Registerkarten im Einstellungen-Editor verwenden, um zwischen Benutzereinstellungen und Arbeitsbereicheinstellungen zu wechseln.

Benutzereinstellungen gelten für alle Ihre Arbeitsbereiche. Arbeitsbereichseinstellungen gelten nur für den aktuellen Arbeitsbereich. Arbeitsbereichseinstellungen überschreiben Benutzereinstellungen. Weitere Informationen zu Einstellungen in VS Code.

Code schreiben

VS Code verfügt über integrierte Unterstützung für JavaScript, TypeScript, HTML, CSS und mehr. In diesem Tutorial erstellen Sie eine Beispiel-JavaScript-Datei und verwenden einige der Codebearbeitungsfunktionen, die VS Code bietet.

VS Code unterstützt viele Programmiersprachen und im nächsten Schritt installieren Sie eine sprachspezifische Erweiterung, um Unterstützung für eine andere Sprache, nämlich Python, hinzuzufügen.

Erstellen Sie in der Explorer-Ansicht eine neue Datei app.js und beginnen Sie mit der Eingabe des folgenden JavaScript-Codes
```
function sayHello(name) {
  console.log('Hello, ' + name);
}

sayHello('VS Code');
```
Während Sie tippen, sollten Vorschläge erscheinen, die Ihnen helfen, Ihren Code zu vervollständigen (IntelliSense). Sie können die Tasten Auf und Ab verwenden, um durch die Vorschläge zu navigieren, und Tab, um den ausgewählten Vorschlag einzufügen.

Beachten Sie auch die Formatierung des Codes (Syntaxhervorhebung), die Ihnen hilft, verschiedene Teile des Codes zu unterscheiden.
Wenn Sie den Cursor auf den String Hello, setzen, sollte ein Glühbirnen-Symbol erscheinen, das anzeigt, dass eine Codeaktion verfügbar ist.

Sie können auch die Tastenkombination ⌃Space (Windows, Linux Ctrl+Space) verwenden, um das Glühbirnen-Menü zu öffnen.
Wählen Sie das Glühbirnen-Symbol aus und wählen Sie dann In Template-String konvertieren aus.

Codeaktionen sind Vorschläge, um schnelle Korrekturen an Ihrem Code vorzunehmen. In diesem Fall konvertiert die Codeaktion ""Hello, " + name in einen Template-String `Hello, ${name}`, was ein spezieller JavaScript-Konstrukt ist, um Ausdrücke in Strings einzubetten.

Erfahren Sie mehr über Codebearbeitungsfunktionen, IntelliSense, Code-Navigation und Refactoring in VS Code.

Quellcodeverwaltung nutzen

Visual Studio Code verfügt über integriertes Quellcodeverwaltungsmanagement (SCM) und enthält standardmäßig Git-Unterstützung.

Nutzen wir die integrierte Git-Unterstützung, um die zuvor vorgenommenen Änderungen zu committen.

Wählen Sie in der Aktivitätsleiste die Ansicht Quellcodeverwaltung aus, um die Ansicht Quellcodeverwaltung zu öffnen.
Stellen Sie sicher, dass Git auf Ihrem Computer installiert ist. Wenn Sie Git nicht installiert haben, sehen Sie in der Ansicht Quellcodeverwaltung eine Schaltfläche, um es auf Ihrem Computer zu installieren.
Wählen Sie Repository initialisieren aus, um ein neues Git-Repository für Ihren Arbeitsbereich zu erstellen.

Nachdem Sie ein Repository initialisiert haben, zeigt die Ansicht Quellcodeverwaltung die Änderungen an, die Sie in Ihrem Arbeitsbereich vorgenommen haben.
Sie können einzelne Änderungen stagen, indem Sie mit der Maus über eine Datei fahren und auf + neben einer Datei klicken.

Tipp
Um alle Änderungen zu stagen, fahren Sie mit der Maus über Änderungen und wählen Sie die Schaltfläche Alle Änderungen stagen aus.
Geben Sie eine Commit-Nachricht ein, z. B. Hallo-Funktion hinzufügen, und wählen Sie dann Commit aus, um die Änderungen in Ihrem Git-Repository zu committen.

Tipp
Wählen Sie in der Ansicht Quellcodeverwaltung Diagramm aus, um eine visuelle Darstellung des Commit-Verlaufs Ihres Git-Repositorys anzuzeigen.

Es gibt noch viel mehr über die Quellcodeverwaltung in VS Code zu entdecken. Erfahren Sie mehr über Quellcodeverwaltung in VS Code.

Sprachspezifische Erweiterung installieren

VS Code verfügt über ein reichhaltiges Ökosystem an Erweiterungen, mit denen Sie Ihrer Installation Sprachen, Debugger und Tools hinzufügen können, um Ihren spezifischen Entwicklungs-Workflow zu unterstützen. Im Visual Studio Marketplace sind Tausende von Erweiterungen verfügbar.

Installieren wir eine sprachspezifische Erweiterung, um Unterstützung für Python oder eine andere Programmiersprache Ihrer Wahl hinzuzufügen.

Wählen Sie in der Aktivitätsleiste die Ansicht Erweiterungen aus.

Die Ansicht Erweiterungen ermöglicht es Ihnen, Erweiterungen direkt in VS Code zu durchsuchen und zu installieren.
Geben Sie Python in das Suchfeld der Erweiterungsansicht ein, um nach Python-bezogenen Erweiterungen zu suchen. Wählen Sie die von Microsoft veröffentlichte Python-Erweiterung aus und klicken Sie dann auf die Schaltfläche Installieren.
Erstellen Sie nun eine neue Python-Datei hello.py in Ihrem Arbeitsbereich und beginnen Sie mit der Eingabe des folgenden Python-Codes
```
def say_hello(name):
    print("Hello, " + name)

say_hello("VS Code")
```
Beachten Sie, dass Sie jetzt auch Vorschläge und IntelliSense für den Python-Code erhalten.

Code ausführen und debuggen

VS Code verfügt über integrierte Unterstützung für die Ausführung und das Debuggen von Node.js-Anwendungen. In diesem Tutorial verwenden Sie die im vorherigen Schritt installierte Python-Erweiterung, um ein Python-Programm zu debuggen.

Lassen Sie uns das im vorherigen Schritt erstellte Programm hello.py debuggen.

Stellen Sie sicher, dass Python 3 auf Ihrem Computer installiert ist.

Wenn kein Python-Interpreter auf Ihrem Computer installiert ist, wird in der unteren rechten Ecke des Fensters eine Benachrichtigung angezeigt. Wählen Sie Interpreter auswählen aus, um die Befehlspalette zu öffnen und den gewünschten Python-Interpreter auszuwählen oder einen zu installieren.
Setzen Sie in der Datei hello.py den Cursor auf die Zeile print und drücken Sie F9, um einen Haltepunkt festzulegen.

Ein roter Punkt erscheint im linken Rand des Editors und zeigt an, dass ein Haltepunkt gesetzt ist. Mit einem Haltepunkt können Sie die Ausführung Ihres Programms an einer bestimmten Codezeile anhalten.
Drücken Sie F5, um eine Debugsitzung zu starten.
1. Wählen Sie den Python-Debugger aus
2. Wählen Sie aus, die aktuelle Python-Datei auszuführen
Beachten Sie, dass das Programm startet und die Ausführung am gesetzten Haltepunkt stoppt.

Tipp
Inspizieren Sie den Wert der Variablen name, indem Sie im Editor mit der Maus darüber fahren, während die Ausführung angehalten ist. Sie können den Wert von Variablen jederzeit in der Ansicht Variablen in der Ansicht Ausführen und Debuggen anzeigen.
Drücken Sie die Schaltfläche Fortsetzen in der Debug-Symbolleiste oder drücken Sie F5, um die Ausführung fortzusetzen.

Es gibt viele weitere Debugging-Funktionen in VS Code, wie z. B. Überwachungsvariablen, bedingte Haltepunkte und Startkonfigurationen. Tauchen Sie ein in die Details des Debuggens in VS Code.

Codierung mit KI und GitHub Copilot verbessern

GitHub Copilot ist ein KI-gestützter Assistent, der Ihnen hilft, schneller Code zu schreiben, und Sie bei einer Vielzahl von Aufgaben unterstützen kann, wie z. B. Codevervollständigung, Code-Refactoring und Fehlerbehebung.

Beginnen wir damit, Codevorschläge von Copilot zu erhalten.

Stellen Sie sicher, dass Sie Copilot in VS Code eingerichtet haben. Befolgen Sie die Schritte in unserem Leitfaden zur Copilot-Einrichtung.

Tipp
Wenn Sie noch kein Copilot-Abonnement haben, können Sie Copilot kostenlos nutzen, indem Sie sich für den Copilot Free Plan anmelden und ein monatliches Kontingent für Vervollständigungen und Chat-Interaktionen erhalten.
Setzen Sie in der Datei hello.py den Cursor am Ende der Datei und geben Sie diesen Funktionsheader ein.
```
def say_day_of_week(date)
```
GitHub Copilot schlägt automatisch den Rest der Funktion vor. Akzeptieren Sie den Codevorschlag durch Drücken von Tab.
Rufen Sie als Nächstes unsere neue Funktion auf.
```
say_day_of_week(date.today())
```
Beachten Sie, dass ein Unterstrich um das Schlüsselwort date angezeigt wird, was auf einen Fehler hinweist.
Setzen Sie den Cursor auf das Schlüsselwort date, wählen Sie das Glühbirnen-Symbol aus und wählen Sie dann Mit Copilot beheben aus.

GitHub Copilot schlägt eine Korrektur für den Fehler vor. Wählen Sie Akzeptieren, wenn Sie mit dem Vorschlag zufrieden sind.

Tipp
Sie können auch die Tastenkombination ⌘. (Windows, Linux Ctrl+.) verwenden, um eine schnelle Korrektur manuell auszulösen.

Mit Copilot in VS Code können Sie noch viel mehr tun. Entdecken Sie mehr über GitHub Copilot in VS Code mit unserer Copilot-Schnellstartanleitung.

Nächste Schritte

Herzlichen Glückwunsch! Sie haben das Tutorial abgeschlossen und einige der Hauptfunktionen von Visual Studio Code kennengelernt. Jetzt, da Sie die Grundlagen von Visual Studio Code gelernt haben, erfahren Sie mehr darüber, wie Sie

12/10/2025