HTML in Visual Studio Code

Visual Studio Code bietet standardmäßig grundlegende Unterstützung für die HTML-Programmierung. Es gibt Syntaxhervorhebung, intelligente Vervollständigungen mit IntelliSense und anpassbare Formatierung. VS Code verfügt außerdem über eine großartige Emmet-Unterstützung.

IntelliSense

Während Sie HTML eingeben, bieten wir Vorschläge über HTML IntelliSense an. Im folgenden Bild sehen Sie eine vorgeschlagene HTML-Element-Schließung </div> sowie eine kontextspezifische Liste von vorgeschlagenen Elementen.

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 Skript- und Stil-Include-Anweisungen aus anderen Dateien nicht verfolgt werden. Die Sprachunterstützung betrachtet nur den Inhalt der HTML-Datei.

Sie können Vorschläge jederzeit durch Drücken von ⌃Space (Windows, Linux Ctrl+Space) auslösen.

Sie können auch steuern, welche integrierten Code-Vervollständigungsanbieter aktiv sind. Überschreiben Sie diese in Ihren Benutzer- oder Arbeitsbereichs-Einstellungen, wenn Sie die entsprechenden Vorschläge nicht sehen möchten.

// Configures if the built-in HTML language suggests HTML5 tags, properties and values.
"html.suggest.html5": true

Tags schließen

Tag-Elemente werden automatisch geschlossen, wenn > des öffnenden Tags eingegeben wird.

Der passende schließende Tag wird eingefügt, wenn / des schließenden Tags eingegeben wird.

Sie können das automatische Schließen von Tags mit der folgenden Einstellung deaktivieren

"html.autoClosingTags": false

Tags automatisch aktualisieren

Beim Ändern eines Tags aktualisiert die Funktion für verknüpftes Bearbeiten automatisch den passenden schließenden Tag. Die Funktion ist optional und kann durch Setzen von aktiviert werden

"editor.linkedEditing": true

Farbauswahl

Die VS Code-Farbauswahl-UI ist jetzt in HTML-Stil-Abschnitten verfügbar.

Sie unterstützt die Konfiguration von Farbton, Sättigung und Deckkraft für die Farbe, die aus dem Editor übernommen wird. Sie bietet auch die Möglichkeit, zwischen verschiedenen Farbmodi zu wechseln, indem Sie auf die Farbsymbolfolge am oberen Rand der Auswahl klicken. Die Auswahl wird bei einem Hover über einer Farbdefinition angezeigt.

Hover

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

Validierung

Die HTML-Sprachunterstützung führt eine Validierung für alles eingebettete JavaScript und CSS durch.

Sie können diese Validierung mit den folgenden Einstellungen deaktivieren

// Configures if the built-in HTML language support validates embedded scripts.
"html.validate.scripts": true,

// Configures if the built-in HTML language support validates embedded styles.
"html.validate.styles": true

Faltung (Code-Faltung)

Sie können Quellcodebereiche mit den Falt-Symbolen in der Leiste zwischen Zeilennummern und Zeilenanfang zusammenklappen. Faltbereiche sind für alle HTML-Elemente für mehrzeilige Kommentare im Quellcode verfügbar.

Zusätzlich können Sie die folgenden Bereichsmarkierungen verwenden, um einen Faltbereich zu definieren: <!-- #region --> und <!-- #endregion -->

Wenn Sie lieber auf Einrückung basierendes Falten für HTML umstellen möchten, verwenden Sie

"[html]": {
    "editor.foldingStrategy": "indentation"
},

Formatierung

Um die Formatierung Ihres HTML-Quellcodes zu verbessern, können Sie den Befehl Dokument formatieren ⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I) zum Formatieren der gesamten Datei oder Auswahl formatieren ⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F) zum Formatieren nur des ausgewählten Textes verwenden.

Der HTML-Formatter basiert auf js-beautify. Die von dieser Bibliothek angebotenen Formatierungsoptionen werden in den VS Code Einstellungen verfügbar gemacht.

• html.format.wrapLineLength: Maximale Zeichenanzahl pro Zeile.
• html.format.unformatted: Liste von Tags, die nicht neu formatiert werden sollen.
• html.format.contentUnformatted: Liste von Tags, durch Kommas getrennt, deren Inhalt nicht neu formatiert werden soll.
• html.format.extraLiners: Liste von Tags, vor denen eine zusätzliche neue Zeile stehen soll.
• html.format.preserveNewLines: Ob bestehende Zeilenumbrüche vor Elementen beibehalten werden sollen.
• html.format.maxPreserveNewLines: Maximale Anzahl von Zeilenumbrüchen, die in einem Block beibehalten werden sollen.
• html.format.indentInnerHtml: <head>- und <body>-Abschnitte einrücken.
• html.format.wrapAttributes: Wickelstrategie für Attribute
  • auto: Zeilenumbruch, wenn die Zeilenlänge überschritten wird
  • force: Alle Attribute umbrechen, außer dem ersten
  • force-aligned: Alle Attribute umbrechen, außer dem ersten, und Attribute ausrichten
  • force-expand-multiline: Alle Attribute umbrechen
  • aligned-multiple: Zeilenumbruch, wenn die Zeilenlänge überschritten wird, Attribute vertikal ausrichten
  • preserve: Zeilenumbrüche von Attributen beibehalten
  • preserve-aligned: Zeilenumbrüche von Attributen beibehalten, aber ausrichten
• html.format.wrapAttributesIndentSize: Ausrichtungsgröße bei Verwendung von force aligned und aligned multiple in html.format.wrapAttributes oder null, um die Standard-Einrückungsgröße zu verwenden.
• html.format.templating: Django-, Erb-, Handlebars- und PHP-Templating-Sprachtags berücksichtigen.
• html.format.unformattedContentDelimiter: Textinhalt zwischen diesem String zusammenhalten.

Tipp: Der Formatierer formatiert die Tags, die in den Einstellungen html.format.unformatted und html.format.contentUnformatted aufgeführt sind, nicht. 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 "html.format.enable": false in Ihren Einstellungen, um den integrierten Formatierer zu deaktivieren.

Emmet-Snippets

VS Code unterstützt die Expansion von Emmet-Snippets. Emmet-Abkürzungen werden zusammen mit anderen Vorschlägen und Snippets in der Auto-Vervollständigungsliste des Editors aufgeführt.

Tipp: Sehen Sie sich den HTML-Abschnitt des Emmet-Cheat-Sheets für gültige Abkürzungen an.

Wenn Sie HTML-Emmet-Abkürzungen mit anderen Sprachen verwenden möchten, können Sie einen der Emmet-Modi (wie css, html) mit anderen Sprachen über die emmet.includeLanguages Einstellung verknüpfen. Die Einstellung nimmt eine Sprachkennung und verknüpft sie mit der Sprach-ID eines Emmet-unterstützten Modus.

Zum Beispiel, um Emmet HTML-Abkürzungen in JavaScript zu verwenden

{
  "emmet.includeLanguages": {
    "javascript": "html"
  }
}

Wir unterstützen auch benutzerdefinierte Snippets.

HTML-Benutzerdefinierte Daten

Sie können die HTML-Unterstützung von VS Code durch ein deklaratives benutzerdefiniertes Datenformat erweitern. Durch das Setzen von html.customData auf eine Liste von JSON-Dateien, die dem benutzerdefinierten Datenformat entsprechen, 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.

Sie können mehr über die Verwendung von benutzerdefinierten Daten im vscode-custom-data Repository lesen.

HTML-Erweiterungen

Installieren Sie eine Erweiterung, um mehr Funktionalität hinzuzufügen. Gehen Sie zur Ansicht Erweiterungen (⇧⌘X (Windows, Linux Ctrl+Shift+X)) und geben Sie 'html' ein, um eine Liste relevanter Erweiterungen für die Erstellung und Bearbeitung von HTML anzuzeigen.

Tipp: Klicken Sie auf eine Erweiterungskachel oben, um die Beschreibung und Bewertungen zu lesen und zu entscheiden, welche Erweiterung für Sie am besten geeignet ist. Mehr im Marketplace.

Nächste Schritte

Lesen Sie weiter, um mehr über Folgendes zu erfahren:

• CSS, SCSS und Less - VS Code hat erstklassige Unterstützung für CSS, einschließlich Less und SCSS.
• Emmet - Erfahren Sie mehr über die leistungsstarke integrierte Emmet-Unterstützung von VS Code.
• Offizielle Emmet-Dokumentation - Emmet, das essentielle Toolkit für Webentwickler.

Häufig gestellte Fragen

Hat VS Code eine HTML-Vorschau?

Nein, VS Code hat keine integrierte Unterstützung für die HTML-Vorschau, aber es gibt Erweiterungen im VS Code Marketplace. Öffnen Sie die Ansicht Erweiterungen (⇧⌘X (Windows, Linux Ctrl+Shift+X)) und suchen Sie nach 'live preview' oder 'html preview', um eine Liste verfügbarer HTML-Vorschau-Erweiterungen zu sehen.