VSCode Benutzeroberflächenbeschreibung

1. Startseite

Nach Abschluss der VSCode-Installation klicken Sie auf das VSCode-Symbol, und der Startbildschirm erscheint wie folgt:

Das obige Bild zeigt den Willkommensbildschirm von Visual Studio Code (VS Code). Es ist die Startseite eines Code-Editors und bietet schnellen Zugriff auf verschiedene Funktionen und Ressourcen.

Im Folgenden werden die einzelnen Teile im Bild beschrieben:

Aktivitätsleiste：

• Sie befindet sich auf der linken Seite und enthält mehrere Symbole, die jeweils eine funktionale Ansicht von VS Code darstellen.
• Vier Funktionen sind im Bild mit roten Pfeilen markiert:
  • Dokumentenverwaltung: Bezieht sich möglicherweise auf den Explorer, der zum Verwalten von Dateien und Ordnern verwendet wird.
  • Suche: Wird verwendet, um Dateien oder Text im gesamten Arbeitsbereich zu suchen.
  • Versionskontrolle: Normalerweise mit Git für die Code-Versionsverwaltung integriert.
  • Debuggen: Wird verwendet, um eine Debugsitzung zum Debuggen von Code zu starten.

Start：

• Befindet sich über der Aktivitätsleiste und enthält Verknüpfungen für allgemeine Funktionen.
• Drei Optionen sind im Bild mit roten Kästen markiert:
  • Neue Datei: Eine neue Datei erstellen.
  • Öffnen...: Eine Datei oder einen Ordner öffnen.
  • Befehl ausführen...: Befehle über die Befehlspalette ausführen.

Zuletzt geöffnete Ordner (Zuletzt verwendet)：

• Zeigt eine Liste der zuletzt geöffneten Ordner an, sodass schnell zu einem vorherigen Arbeitsverzeichnis gewechselt werden kann.
• Die zuletzt geöffneten Ordner sind im Bild mit einem roten Kasten markiert, zum Beispiel "example-test".

Exemplarische Vorgehensweise (Tutorial)：

• Befindet sich auf der rechten Seite des Willkommensbildschirms und bietet einige schnelle Links, die Benutzern helfen, VS Code kennenzulernen und zu verwenden.
• Drei Links sind im Bild mit roten Kästen markiert:
  • Erste Schritte mit VS Code: Bietet Anleitungen zu Anpassungsmethoden und zur spezifischen Verwendung von VS Code.
  • Die Grundlagen kennenlernen: Verlinkt zu VS Code-Grundlagen und hilft Benutzern, wesentliche Funktionen zu verstehen.
  • Produktivität verbessern: Bietet Tipps zur Effizienzsteigerung bei der Verwendung von VS Code.

VS Code-Dokumentation：

• Befindet sich oberhalb des Walkthrough-Abschnitts; es ist wahrscheinlich ein Link zur offiziellen VS Code-Dokumentation.

2. Bearbeitungsseite

Die Oberfläche zum Öffnen oder Bearbeiten von Code wird unten angezeigt:

Aktivitätsleiste und Seitenleiste

Auf der linken Seite der Oberfläche wechseln Sie über Symbole zwischen verschiedenen Funktionsmodulen:

• Explorer (erstes Symbol): Zeigt die Projektdateistruktur im Bild an, die Folgendes umfasst:
  • EXAMPLE-TESTOrdner: der Projektordner des aktuellen Arbeitsbereichs.
  • test.htmlDateien: die HTML-Datei, die derzeit bearbeitet wird.
• Suche (zweites Symbol): Wird für die globale Suche im Dateiinhalt verwendet (inaktiv).
• Quellcodeverwaltung (drittes Symbol): Zeigt den Git-Status für eine einfache Codeversionsverwaltung an.
• Ausführen und Debuggen (viertes Symbol): Ermöglicht das Setzen von Haltepunkten und das Ausführen von Code.
• Erweiterungen (fünftes Symbol): Wird zum Installieren und Verwalten von Plugins verwendet.

Unmittelbar rechts neben der Aktivitätsleiste wird der spezifische Inhalt des aktuellen Funktionsmoduls angezeigt:

• Derzeit angezeigt wirdExplorer。
• Die Projektstruktur wird übersichtlich angezeigt, einschließlich:
  • EXAMPLE-TESTAlle Dateien im Ordner.
  • Die aktuell bearbeitete Dateitest.html。

Editor-Bereich

In der Mitte der Oberfläche gelegen, dient zur Anzeige und Bearbeitung von Dateiinhalten:

• Der Editor-Bereich zeigttest.htmlDer Code der Datei.
• Unterstützt Syntaxhervorhebung (wie z. B.DOCTYPE htmlund<h1>Tags gibt).
• Der Cursor ist in Zeile 11 positioniert (die untere Statusleiste zeigt "Zeile 11").

Statusleiste

Befindet sich unten und zeigt Informationen zur aktuellen Datei und Bearbeitungsumgebung an:

• Git-Status: Aktueller Branch istmain(untere linke Ecke).
• Dateiinformationen：
  • Kodierungsformat: UTF-8.
  • Zeilenende-Sequenz: LF.
  • Aktueller Dateityp: HTML.
• Terminal-Status: Zeigt den aktuell geöffneten Terminaltyp alszsh。

Andere Erweiterungen