HTML in Visual Studio-Code

Blog

HTML in Visual Studio-Code

Visual Studio Code bietet standardmäßige Unterstützung für die HTML-Programmierung. Es gibt Syntaxhervorhebung, intelligente Vervollständigung mit IntelliSense und anpassbare Formatierung. VS Code bietet auch großartige Emmet-Unterstützung.



IntelliSense

Während Sie HTML eingeben, bieten wir Vorschläge über HTML IntelliSense an. Im Bild unten sehen Sie eine vorgeschlagene HTML-Elementschließung |_+_| sowie eine kontextspezifische Liste vorgeschlagener Elemente.

HTML IntelliSense



Wir bieten auch Vorschläge für Elemente, Tags, einige Werte (wie in HTML5 definiert), Ionic- und AngularJS-Tags. Dokumentsymbole sind auch für HTML verfügbar, sodass Sie schnell zu DOM-Knoten nach ID und Klassennamen navigieren können.

Sie können auch mit eingebettetem CSS und JavaScript arbeiten. Beachten Sie jedoch, dass Script- und Style-Includes aus anderen Dateien nicht befolgt werden, die Sprachunterstützung betrachtet nur den Inhalt der HTML-Datei.



Sie können jederzeit Vorschläge auslösen, indem Sie |_+_| . drücken

Sie können auch steuern, welche integrierten Codevervollständigungsanbieter aktiv sind. Überschreiben Sie diese in Ihrem Benutzer oder Arbeitsbereich die Einstellungen wenn Sie die entsprechenden Vorschläge lieber nicht sehen möchten.

Tags schließen

Tag-Elemente werden automatisch geschlossen, wenn |_+_| des öffnenden Tags eingegeben wird.

HTML-Schließen1

eckige cli Komponente erstellen

Das passende schließende Tag wird eingefügt, wenn |_+_| des schließenden Tags eingetragen wird.

HTML-Schließen2

Sie können automatisch schließende Tags wie folgt deaktivieren: Einstellung :

Ctrl+Space

Cursor spiegeln

Damit Sie öffnende und schließende Tags gleichzeitig bearbeiten können, fügt VS Code beim Bearbeiten von HTML-Tags einen Spiegelcursor hinzu.

Der Spiegelcursor funktioniert durch Hinzufügen von a Multi-Cursor zum passenden Tag, wenn sich Ihr Cursor in einen HTML-Tag-Namensbereich bewegt. Genau wie im Multi-Cursor-Modus können Sie das wortweise Löschen oder die wortweise Auswahl verwenden. Der gespiegelte Cursor wird entfernt, wenn Sie den Cursor außerhalb des Tag-Namensbereichs bewegen.

Ein Sonderfall ist die Eingabe von Leerzeichen, wenn sich der Cursor am Ende des öffnenden Tags befindet: |_+_|. In diesem Fall entfernt VS Code das eingefügte Leerzeichen nach dem schließenden Tag-Namen und beendet den Spiegel-Cursor-Modus, sodass Sie weiterhin HTML-Attribute bearbeiten können.

HTML-Mirror-Cursor

Sie können den Spiegel-Cursor wie folgt deaktivieren: Einstellung :

// Configures if the built-in HTML language suggests Angular V1 tags and properties. 'html.suggest.angular1': true, // Configures if the built-in HTML language suggests Ionic tags, properties and values. 'html.suggest.ionic': true, // Configures if the built-in HTML language suggests HTML5 tags, properties and values. 'html.suggest.html5': true

Farbwähler

Die VS Code-Farbauswahl-Benutzeroberfläche ist jetzt in Abschnitten im HTML-Stil verfügbar.

Farbauswahl in HTML

Es unterstützt die Konfiguration von Farbton, Sättigung und Deckkraft für die Farbe, die vom Editor aufgenommen wird. Es bietet auch die Möglichkeit, zwischen verschiedenen Farbmodi zu triggern, indem Sie auf die Farbzeichenfolge oben in der Auswahl klicken. Die Auswahl wird bei einem Mauszeiger angezeigt, wenn Sie sich über einer Farbdefinition befinden.

HTML-Code für Menüleiste mit Untermenü-Dropdown

Schweben

Bewegen Sie die Maus über HTML-Tags oder eingebettete Stile und JavaScript, um weitere Informationen zu dem Symbol unter dem Cursor zu erhalten.

HTML-Hover

Validierung

Die HTML-Sprachunterstützung führt eine Validierung für alle eingebetteten JavaScripts und CSS durch.

Sie können diese Validierung mit den folgenden Einstellungen deaktivieren:

>

Falten

Mit den Faltsymbolen auf dem Bundsteg zwischen Zeilennummern und Zeilenanfang können Sie Quellcodebereiche falten. Für mehrzeilige Kommentare im Quellcode stehen für alle HTML-Elemente Faltbereiche zur Verfügung.

xamarin formt Shell-Navigation

Zusätzlich können Sie die folgenden Regionsmarker verwenden, um eine Faltregion zu definieren: |_+_| und |_+_|

Wenn Sie es vorziehen, für die HTML-Nutzung zu einrückungsbasierter Faltung zu wechseln:

/

Formatierung

Um die Formatierung Ihres HTML-Quellcodes zu verbessern, können Sie die Dokument formatieren Befehl |_+_| um die gesamte Datei zu formatieren oder Formatauswahl |_+_| um nur den ausgewählten Text zu formatieren.

Der HTML-Formatierer basiert auf js-verschönern . Die von dieser Bibliothek angebotenen Formatierungsoptionen sind im VS-Code aufgeführt die Einstellungen :

  • |_+_|: Maximale Zeichenanzahl pro Zeile.
  • |_+_|: Liste der Tags, die nicht neu formatiert werden sollen.
  • |_+_|: Liste der Tags, durch Kommas getrennt, bei denen der Inhalt nicht umformatiert werden soll.
  • |_+_|: Liste der Tags, denen ein zusätzlicher Zeilenumbruch vorangestellt werden sollte.
  • |_+_|: Ob vorhandene Zeilenumbrüche vor Elementen erhalten bleiben sollen.
  • |_+_|: Maximale Anzahl von Zeilenumbrüchen, die in einem Chunk beibehalten werden sollen.
  • |_+_|: Mit einem Zeilenumbruch beenden.
  • |_+_|: Einzug |_+_| und |_+_| Abschnitte.
  • |_+_|: Wrapping-Strategie für Attribute:
    • |_+_|: Umbruch bei Überschreitung der Zeilenlänge
    • |_+_|: Alle Attribute umschließen, außer dem ersten
    • |_+_|: Alle Attribute mit Ausnahme des ersten umschließen und Attribute ausrichten
    • |_+_|: Alle Attribute einschließen

Spitze: Der Formatierer formatiert nicht die Tags, die im |_+_| . aufgelistet sind und |_+_| die Einstellungen. Eingebettetes JavaScript wird formatiert, es sei denn, „script“-Tags werden ausgeschlossen.

Der Marketplace bietet mehrere alternative Formatierer zur Auswahl. Wenn Sie einen anderen Formatierer verwenden möchten, definieren Sie |_+_| in Ihren Einstellungen, um den integrierten Formatierer zu deaktivieren.

Emmet-Schnipsel

VS Code unterstützt Emmet-Schnipsel Erweiterung. Emmet-Abkürzungen werden zusammen mit anderen Vorschlägen und Snippets in der Editor-Auto-Vervollständigungsliste aufgeführt.

Emmet HTML-Unterstützung integriert

Spitze: Siehe den HTML-Abschnitt der Emmet-Spickzettel für gültige Abkürzungen.

wo kann ich kin kaufen

Wenn Sie HTML-Emmet-Abkürzungen mit anderen Sprachen verwenden möchten, können Sie einen der Emmet-Modi (wie |_+_|, |_+_|) anderen Sprachen mit dem |_+_| . zuordnen Einstellung . Die Einstellung dauert ein Sprach-ID und verknüpft es mit der Sprach-ID eines von Emmet unterstützten Modus.

Um beispielsweise Emmet-HTML-Abkürzungen in JavaScript zu verwenden:

'html.autoClosingTags': false

Wir unterstützen auch Benutzerdefinierte Snippets .

Benutzerdefinierte HTML-Daten

Sie können die HTML-Unterstützung von VS Code durch ein deklaratives . erweitern benutzerdefiniertes Datenformat . Durch Einstellen von |_+_| zu einer Liste von JSON-Dateien, die dem benutzerdefinierten Datenformat folgen, können Sie das Verständnis von VS Code für neue HTML-Tags, Attribute und Attributwerte verbessern. VS Code bietet dann Sprachunterstützung wie Vervollständigung und Hover-Informationen für die bereitgestellten Tags, Attribute und Attributwerte.

Weitere Informationen zur Verwendung benutzerdefinierter Daten finden Sie im vscode-benutzerdefinierte-Daten Repository.

#html #vscode #webdev #css