Element, das eine geordnete Liste mit drei Listenelementen mit den Klassennamen item1, item2 und item3 enthält.
Abkürzungen werden durch Eintippen und anschließendes Drücken der Tab Wenn es mehrere gültige Erklärungen für Ihre Abkürzung gibt, können Sie diese durch Drücken der Tab Option erneut. Emmet-Abkürzungen sind nicht spezifisch für VS Code. Sie können sie in anderen Editoren verwenden, die Emmet unterstützen.
Wählen Sie eine Zeile oder einen Befehl aus und drücken Sie dann Strg+Umschalt+G wenn Sie Linux oder Windows verwenden. Wenn Sie Mac verwenden, verwenden Sie Befehl+Umschalt+G. Diese Tastenkombination umschließt den ausgewählten Inhalt mit einem HTML-Tag.
Dies ist eine praktische Funktion in VS Code. Sie ist nützlich, wenn Sie den Inhalt mit Tags umschließen müssen oder wenn Sie Ihren Code strukturieren müssen. Die Auswahl kann eine einzelne Zeile, mehrere Zeilen oder ein Codeblock sein.
Eine andere Möglichkeit besteht darin, mit der rechten Maustaste auf den ausgewählten Code zu klicken und dann Mit Abkürzung umbrechen im Kontextmenü. Wenn Sie den Tag-Wrapping-Befehl auslösen, wird eine Eingabeaufforderung angezeigt, in der Sie einen gewünschten HTML-Tag-Namen auswählen können. Wenn Sie eingeben divzum Beispiel ein
Element umschließt den ausgewählten Code.
Tag-Wrapping hilft beim Markieren und Strukturieren von Code, ohne dass die öffnenden und schließenden Tags manuell eingegeben werden müssen. Dies spart viel Zeit und verringert das Auftreten von Syntaxfehlern.
Formatierung
Durch das Formatieren von HTML-Code können Sie die Konsistenz und Lesbarkeit von Projekten gewährleisten. In VS Code ermöglichen integrierte Formatierungsoptionen, dass die Aktion in HTML automatisch nach vordefinierten Regeln ausgeführt wird.
Die Tastenkombination zum Formatieren von HTML lautet Umschalt+Alt+F für Windows und Linux. Umschalt+Wahl+F funktioniert auf macOS.
Mit der Tastenkombination können Sie ein ganzes HTML-Dokument oder einen Teil des Codes formatieren. Wenn Sie darauf klicken, werden die Formatierungsregeln angewendet. Einrückungen und Zeilenumbrüche werden entsprechend angepasst.
Sie können Code in VS Code auch automatisch formatieren.
Sie können eine einzelne Zeile oder mehrere gleichzeitig ausgewählte Codezeilen kommentieren oder die Kommentierung aufheben. Wenn bereits ein Kommentar vorhanden ist, wird dieser mit der Tastenkombination entfernt. Wenn er nicht kommentiert ist, werden Kommentare hinzugefügt. Kommentare in HTML werden in Tags eingeschlossen.
Code-Navigation
Damit ist die Möglichkeit gemeint, zwischen den verschiedenen Teilen der Codebasis zu wechseln oder direkt zu Definitionen in den HTML-Attributen oder Tags zu springen. Mit dem Strg+] Option unter Linux und Windows, um durch Tags zu navigieren. Mac-Benutzer können verwenden Befehl+] um zum schließenden Tag des Elements zu gelangen. Um zum öffnenden Tag zu springen, drücken Sie Strg+[[ für Windows und Linux oder Befehl +[[ für Mac.
Um zur Definition eines Attributs oder Tags zu springen, verwenden Sie die F12 Schlüssel. Er identifiziert das entsprechende schließende oder öffnende Tag der Codebasis, um die richtige Position zu finden.
Sie können die Definition auch dann aufrufen, wenn Sie unter Windows die Strg-Taste gedrückt halten und auf ein HTML-Attribut oder -Tag klicken. Drücken Sie Befehl+Klick auf macOS für dieselbe Aktion. Dadurch entfällt die Notwendigkeit, den Standort manuell zu suchen.
Zen-Modus
Dieser Modus ist ablenkungsfrei. Er erleichtert Entwicklern, sich vollständig auf den Code zu konzentrieren, indem Schaltflächen und Symbolleisten ausgeblendet werden. Aktivieren Sie diesen Modus mit dem Strg+KZ Verknüpfung unter Windows und Befehl+KZ auf dem Mac. Alternativ gehen Sie zu Sicht und dann Aussehen. Einschalten Zen-Modus Hier.
Befehlspalette
Dies ist eine weit verbreitete Funktion in VS Code und besonders für Anfänger nützlich. Sie stellt jede Konfiguration, Verknüpfung und Funktionsoption dar und liegt in Form einer Liste vor.
Sie müssen lediglich in die Befehlspalette eingeben, was Sie tun möchten. Sie erhalten verschiedene Befehle, die Sie dabei unterstützen.
Um auf die Befehlspalette zuzugreifen, verwenden Sie die Strg+Umschalt+P Tastenkombination für Windows. Die Tastenkombination für Mac ist Befehl+Umschalt+P.
Suche nach Dateien
Wenn sich in den aktuellen Projektdateien ein Text befindet, den Sie benötigen, können Sie darauf zugreifen, indem Sie in der Seitenleiste auf das Suchsymbol klicken. Alternativ können Sie das Strg+Umschalt+F Verknüpfung unter Windows oder Befehl+Umschalt+F auf dem Mac.
Das vorherige Wort löschen
Wenn Sie die Rücktaste gedrückt halten, um ein Wort zu löschen, können Sie versehentlich andere Teile löschen. Um die Löschung auf das vorherige Wort zu beschränken, verwenden Sie die Strg+Rücktaste Verknüpfung unter Windows oder Befehl+Rücktaste auf dem Mac.
Zeile kopieren
Während der Entwicklung müssen Programmierer manchmal Zeilen kopieren und in andere Projektteile einfügen. Bei Bedarf können dann kleine Änderungen an den Zeilen vorgenommen werden. Eine Tastenkombination ist eine gute Möglichkeit, diesen Vorgang zu beschleunigen, insbesondere wenn Sie dies regelmäßig tun.
Die Windows-Verknüpfung ist Umschalt+Alt+Auf oder Umschalt+Alt+Ab. Für den Mac lautet die Tastenkombination Opt+Umschalt+Auf oder Opt+Umschalt+Pfeil nach unten.
Geschlossenen Editor erneut öffnen
Wenn Sie ein riesiges HTML-Projekt mit vielen Dateien bearbeiten, kann es frustrierend sein, wenn Sie versehentlich einen Tab schließen. Glücklicherweise können Sie eine Verknüpfung verwenden, um den zuletzt geschlossenen Tab in VS Code zu öffnen.
Um einen geschlossenen Editor wieder zu öffnen, verwenden Sie die Strg+Umschalt+T Verknüpfung unter Windows oder Befehl + Umschalt + T auf dem Mac. Mit dieser Tastenkombination können Sie mehrere geschlossene Tabs öffnen.
Beschleunigen Sie die Codierung mit HTML-Shortcuts
Viele Tastenkombinationen machen die Verwendung von VS Code relativ einfacher. Es gibt zwar mehr Optionen als in diesem Artikel beschrieben, aber die oben genannten sind einige der gebräuchlichsten, die sowohl Anfängern als auch erfahrenen Benutzern nützlich sein können. Angesichts der Popularität von VS Code kann es noch mehr Spaß machen, alle Funktionen zu nutzen. Wählen Sie Tastenkombinationen, die Sie häufig verwenden, um die Codiergeschwindigkeit zu erhöhen.
Als Nächstes sollten Sie lernen, wie Sie zwei Dateien in VS Code vergleichen.
FAQs
Q: Sind HTML-Verknüpfungen in VS Code anpassbar?
A: Ja. Sie können HTML-Verknüpfungen in VS Code anpassen, indem Sie Ihre Benutzer- oder Arbeitsbereichseinstellungen ändern.
Q: Kann ich in VS Code meine eigenen benutzerdefinierten HTML-Verknüpfungen erstellen?
A: Ja. Sie können benutzerdefinierte HTML-Snippets oder Verknüpfungen in VS Code erstellen, indem Sie sie in den Benutzer- oder Arbeitsbereichseinstellungen definieren. Auf diese Weise können Sie Verknüpfungen für häufig verwendete Codemuster oder benutzerdefinierte Elemente erstellen.
