Übung: Verwenden von Visual Studio Code für das Web

  • 2 Minuten

Bevor Sie mit dem Programmieren unterwegs beginnen können, müssen Sie sich zunächst mit Visual Studio Code für das Web vertraut machen.

In dieser Übung erkunden Sie die Benutzeroberfläche von VS Code für das Web und die Installation von Erweiterungen.

Zunächst erkunden Sie die Benutzeroberfläche von VS Code für das Web.

  1. Navigieren Sie in einem Browser zu https://vscode.dev.

  2. Die Oberfläche im Browser ähnelt der von VS Code Desktop. Es gibt beispielsweise den Editorbereich, die Befehlspalette und mehrere Ansichten, z. B. den Quellcodeverwaltungs-Explorer und Erweiterungen auf der Randleiste. Diese Benutzeroberfläche ist beim Arbeiten im Browser stets konsistent.

    Screenshot der vscode.dev Startseite.

Installieren einer Erweiterung

Nun können Sie VS Code für das Web anpassen, indem Sie eine Erweiterung installieren.

  1. Wählen Sie auf der Randleiste die Erweiterungsansicht aus.

    Screenshot des Erweiterungsansichtssymbols in der Aktivitätsleiste von VS Code.

  2. Hier sehen Sie, welche Erweiterungen bereits installiert sind, und können weitere Erweiterungen durchsuchen.

  3. Versuchen Sie, die GitHub-Designerweiterung zu installieren, indem Sie nach „github theme“ suchen.

  4. Wählen Sie die GitHub-Designerweiterung und dann „Installieren“ aus.

    Screenshot der GitHub-Designerweiterung in VS Code, hervorgehoben das Suchfeld und die Schaltfläche

  5. Beachten Sie, wie schnell die Erweiterung installiert wird – direkt in Ihrem Browser!

Gut gemacht! Sie haben damit die ersten Schritte bei der Navigation in VS Code für das Web abgeschlossen. Auch wenn Sie vielleicht zum ersten Mal zu https://vscode.dev navigiert sind, sollte Ihnen die Umgebung vertraut sein, wenn Sie bereits VS Code Desktop verwendet haben.

Im nächsten Abschnitt erfahren Sie, wie Sie mit Remoterepositorys in VS Code für das Web arbeiten.