Visual Studio Code ist einer der beliebtesten Code-Editoren, der Entwicklern viele Möglichkeiten bietet. Es unterstützt eine Vielzahl von Programmiersprachen, einschließlich CSS, und bietet viele praktische Tools, die Ihnen bei der Arbeit mit Code helfen.
Ein solches Werkzeug ist CSS Peek. Dies ist eine Erweiterung für Visual Studio Code, mit der Sie CSS-Stile, die bestimmten HTML-Elementen zugeordnet sind, schnell und bequem anzeigen können. Es macht es einfach, die gewünschten Stile zu finden und zu bearbeiten, ohne eine separate CSS-Datei zu öffnen.
In diesem ausführlichen Tutorial werden wir uns ansehen, wie Sie das CSS des Peek anpassen, um es effektiv zu verwenden. Wir zeigen Ihnen, wie Sie eine Erweiterung installieren, wie Sie ihre Einstellungen anpassen und wie Sie ihre Funktionalität zum Anzeigen und Bearbeiten von CSS-Stilen in Visual Studio Code verwenden können.
Was ist CSS Peek in Visual Studio Code und warum wird es benötigt
Es ermöglicht Ihnen, schnell und einfach die entsprechenden CSS-Regeln zu finden, die für das ausgewählte HTML-Element gelten, und sie zu bearbeiten, ohne zwischen den Dateien wechseln zu müssen.
Die Verwendung von CSS Peek erleichtert das Entwerfen von Webseiten, da Sie schnell und genau bestimmen können, welche Stile auf ein bestimmtes Element angewendet werden, und Änderungen direkt an der Stylesheet-Datei vornehmen können.
Anstatt eine Stildatei separat zu suchen und zu öffnen, können Sie mit CSS Peek die auf ein Element angewendeten CSS-Regeln im Kontext des HTML-Codes anzeigen und bearbeiten. Dies spart Zeit und vereinfacht den Entwicklungsprozess.
Einstellung
Führen Sie die folgenden Schritte aus, um CSS Peek in Visual Studio Code zu installieren:
- Öffnen Sie Visual Studio Code, und navigieren Sie über die Seitenleiste zum Abschnitt «Erweiterungen».
- Geben Sie in der Suchleiste «CSS Peek» ein und drücken Sie die Eingabetaste.
- Suchen Sie nach einer Erweiterung namens «CSS Peek» und klicken Sie auf die Schaltfläche «Install» (Installieren).
- Nach der Installation ist die Erweiterung einsatzbereit.
Die Installation von CSS Peek in Visual Studio Code dauert nur wenige einfache Schritte und erfordert keine zusätzlichen Schritte.
Nach der Installation von CSS Peek können Sie CSS-Regeln einfach direkt in Ihren HTML-Dateien anzeigen und bearbeiten. Dadurch wird der Entwicklungsprozess effizienter und bequemer.
Wie installiere ich CSS Peek in Visual Studio Code
Befolgen Sie die folgenden Schritte, um CSS Peek in Visual Studio Code zu installieren:
- Öffnen Sie Visual Studio Code, und wechseln Sie zu "Extensions" (Erweiterungen).
- Geben Sie in der Suchleiste "CSS Peek" ein und drücken Sie die Eingabetaste.
- Suchen Sie nach der CSS-Erweiterung Peek im Suchergebnis und klicken Sie auf die Schaltfläche "Install" (Installieren).
- Nach Abschluss der Installation wird die Erweiterung im Abschnitt "Installiert" verfügbar.
- Jetzt können Sie mit CSS Peek beginnen, um die mit HTML-Elementen verknüpften CSS-Stile anzuzeigen.
Wenn Sie zusätzliche CSS-Peek-Einstellungen konfigurieren müssen, können Sie in Visual Studio Code zum Abschnitt "Einstellungen" gehen und "Einstellungen" auswählen. Hier können Sie die verschiedenen CSS-Einstellungen von Peek ändern, z. B. die Standardsprache, die Schriftgröße und andere.
Jetzt wissen Sie, wie Sie CSS Peek in Visual Studio Code installieren und können es verwenden, um mit CSS-Stilen im Code-Editor einfacher zu arbeiten.
Einstellung
Stellen Sie zunächst sicher, dass Sie die CSS-Erweiterung Peek in Visual Studio Code installiert und aktiviert haben. Gehen Sie dazu mit der Tastenkombination Strg + Umschalt + X zum Abschnitt Erweiterungen (Extensions) in der Seitenleiste.
Suchen Sie in den geladenen Erweiterungen nach CSS Peek, und wenn es nicht installiert ist, klicken Sie auf die Schaltfläche Installieren. Nachdem Sie die Erweiterung installiert haben, wird sie automatisch aktiviert und Sie können mit der Einrichtung beginnen.
Führen Sie die folgenden Schritte aus, um das CSS-Peek-Setup durchzuführen:
- Öffnen Sie die Datei mit dem CSS-Code, den Sie studieren oder bearbeiten möchten.
- Setzen Sie den Cursor auf den CSS-Selektor, für den Sie die Stile anzeigen möchten. Sie können auch mehrere Selektoren auswählen, um die Stile für alle ausgewählten Elemente gleichzeitig anzuzeigen.
- Rufen Sie den Befehl CSS Peek auf, indem Sie die Tastenkombination Strg+Umschalt+ P drücken und "CSS Peek" in die Befehlsleiste eingeben.
- Wählen Sie den Befehl Peek CSS aus der Liste der vorgeschlagenen Optionen aus.
Nachdem Sie diese Schritte ausgeführt haben, wird Ihnen ein Popup-Fenster mit Stilen für den ausgewählten Selektor (oder Selektoren) angezeigt. Sie können die Werte der CSS-Eigenschaften anzeigen und mit Hilfe von Hyperlinks zu den entsprechenden Regeln navigieren.
Sie können auch einige CSS-Peek-Optionen anpassen, z. B. die Standardsprache für Stile definieren oder Hotkeys zum Aufrufen eines Befehls konfigurieren. Gehen Sie dazu zu den Visual Studio Code-Einstellungen und suchen Sie nach dem CSS-Abschnitt von Peek. Hier können Sie die notwendigen Änderungen nach Ihren Vorlieben vornehmen.
Dadurch können Sie CSS Peek anpassen, um CSS-Stile bequem und schnell direkt in Visual Studio Code anzuzeigen und zu bearbeiten, was die Entwicklung und das Debuggen von Webprojekten erheblich vereinfacht.
