Emmet in Visual Studio Code

Die Unterstützung für Emmet-Snippets und -Erweiterungen ist direkt in Visual Studio Code integriert, keine Erweiterung erforderlich. Emmet 2.0 unterstützt die Mehrheit der Emmet-Aktionen, einschließlich der Erweiterung von Emmet-Abkürzungen und Snippets.

Emmet-Abkürzungen und Snippets erweitern

Emmet-Abkürzungs- und Snippet-Erweiterungen sind standardmäßig in html-, haml-, pug-, slim-, jsx-, xml-, xsl-, css-, scss-, sass-, less- und stylus-Dateien aktiviert, sowie in jeder Sprache, die von einer der oben genannten Sprachen erbt, wie z. B. handlebars und php.

Wenn Sie beginnen, eine Emmet-Abkürzung zu tippen, sehen Sie die Abkürzung in der Vorschlagsliste. Wenn Sie das Vorschlagsdokumentations-Flyout geöffnet haben, sehen Sie eine Vorschau der Erweiterung, während Sie tippen. Wenn Sie sich in einer Stylesheet-Datei befinden, wird die erweiterte Abkürzung in der Vorschlagsliste sortiert unter den anderen CSS-Vorschlägen angezeigt.

Tab für Emmet-Erweiterungen verwenden

Wenn Sie die Tab-Taste zum Erweitern von Emmet-Abkürzungen verwenden möchten, fügen Sie die folgende Einstellung hinzu

"emmet.triggerExpansionOnTab": true

Diese Einstellung ermöglicht die Verwendung der Tab-Taste für die Einrückung, wenn der Text keine Emmet-Abkürzung ist.

Emmet bei deaktivierten Schnellvorschlägen

Wenn Sie die Einstellung editor.quickSuggestions deaktiviert haben, sehen Sie keine Vorschläge, während Sie tippen. Sie können Vorschläge immer noch manuell auslösen, indem Sie ⌃Space (Windows, Linux Ctrl+Space) drücken und die Vorschau sehen.

Emmet in Vorschlägen deaktivieren

Wenn Sie Emmet-Abkürzungen überhaupt nicht in Vorschlägen sehen möchten, verwenden Sie die folgende Einstellung

"emmet.showExpandedAbbreviation": "never"

Sie können immer noch den Befehl Emmet: Abkürzung erweitern verwenden, um Ihre Abkürzungen zu erweitern. Sie können auch jede Tastenkombination an die Befehls-ID editor.emmet.action.expandAbbreviation binden.

Reihenfolge von Emmet-Vorschlägen

Um sicherzustellen, dass Emmet-Vorschläge immer an erster Stelle in der Vorschlagsliste stehen, fügen Sie die folgenden Einstellungen hinzu

"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top"

Emmet-Abkürzungen in anderen Dateitypen

Um die Emmet-Abkürzungserweiterung in Dateitypen zu aktivieren, in denen sie standardmäßig nicht verfügbar ist, verwenden Sie die Einstellung emmet.includeLanguages. Stellen Sie sicher, dass Sie für beide Seiten der Zuordnung Sprachidentifikatoren verwenden, wobei die rechte Seite der Sprachidentifikator einer von Emmet unterstützten Sprache ist (siehe Liste oben).

Zum Beispiel

"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "razor": "html",
  "plaintext": "pug"
}

Emmet hat keine Kenntnis von diesen neuen Sprachen, und so können Emmet-Vorschläge in Nicht-HTML/CSS-Kontexten angezeigt werden. Um dies zu vermeiden, können Sie die folgende Einstellung verwenden.

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

Hinweis: Wenn Sie zuvor emmet.syntaxProfiles verwendet haben, um neue Dateitypen zuzuordnen, sollten Sie ab VS Code 1.15 stattdessen die Einstellung emmet.includeLanguages verwenden. emmet.syntaxProfiles ist nur für die Anpassung der endgültigen Ausgabe gedacht.

Emmet mit Multi-Cursors

Sie können die meisten Emmet-Aktionen auch mit Multi-Cursors verwenden

Filter verwenden

Filter sind spezielle Post-Prozessoren, die die erweiterte Abkürzung ändern, bevor sie im Editor ausgegeben wird. Es gibt 2 Möglichkeiten, Filter zu verwenden: entweder global über die Einstellung emmet.syntaxProfiles oder direkt in der aktuellen Abkürzung.

Unten ist ein Beispiel für den ersten Ansatz, der die Einstellung emmet.syntaxProfiles verwendet, um den bem-Filter für alle Abkürzungen in HTML-Dateien anzuwenden

"emmet.syntaxProfiles": {
  "html": {
    "filters": "bem"
  }
}

Um einen Filter nur für die aktuelle Abkürzung bereitzustellen, fügen Sie den Filter an Ihre Abkürzung an. Zum Beispiel: div#page|c wendet den comment-Filter auf die Abkürzung div#page an.

BEM-Filter (bem)

Wenn Sie den Block Element Modifier (BEM)-Ansatz zum Schreiben von HTML verwenden, dann sind bem-Filter für Sie sehr praktisch. Um mehr darüber zu erfahren, wie Sie bem-Filter verwenden können, lesen Sie BEM filter in Emmet.

Sie können diesen Filter anpassen, indem Sie die Präferenzen bem.elementSeparator und bem.modifierSeparator verwenden, wie in Emmet Preferences dokumentiert.

Kommentarfilter (c)

Dieser Filter fügt Kommentare um wichtige Tags hinzu. Standardmäßig sind "wichtige Tags" solche Tags mit einem ID- und/oder Klassenattribut.

Zum Beispiel div>div#page>p.title+p|c wird erweitert zu

<div>
    <div id="page">
        <p class="title"></p>
        <!-- /.title -->
        <p></p>
    </div>
    <!-- /#page -->
</div>

Sie können diesen Filter anpassen, indem Sie die Präferenzen filter.commentTrigger, filter.commentAfter und filter.commentBefore verwenden, wie in Emmet Preferences dokumentiert.

Das Format für die Präferenz filter.commentAfter ist in VS Code Emmet 2.0 anders.

Zum Beispiel, anstatt

"emmet.preferences": {
  "filter.commentAfter": "\n<!-- /<%= attr('id', '#') %><%= attr('class', '.') %> -->"
}

würden Sie in VS Code eine einfachere verwenden

"emmet.preferences": {
  "filter.commentAfter": "\n<!-- /[#ID][.CLASS] -->"
}

Trim-Filter (t)

Dieser Filter ist nur anwendbar, wenn Abkürzungen für den Befehl Emmet: Mit Abkürzung umschließen angegeben werden. Er entfernt Zeilenmarkierungen von umgeschlossenen Zeilen.

Benutzerdefinierte Emmet-Snippets verwenden

Benutzerdefinierte Emmet-Snippets müssen in einer JSON-Datei namens snippets.json definiert werden. Die Einstellung emmet.extensionsPath sollte den Pfad zu dem Verzeichnis enthalten, das diese Datei enthält.

Unten ist ein Beispiel für den Inhalt dieser snippets.json-Datei.

{
  "html": {
    "snippets": {
      "ull": "ul>li[id=${1} class=${2}]*2{ Will work with html, pug, haml and slim }",
      "oll": "<ol><li id=${1} class=${2}> Will only work in html </ol>",
      "ran": "{ Wrap plain text in curly braces }"
    }
  },
  "css": {
    "snippets": {
      "cb": "color: black",
      "bsd": "border: 1px solid ${1:red}",
      "ls": "list-style: ${1}"
    }
  }
}

Das Erstellen von benutzerdefinierten Snippets in Emmet 2.0 über die Datei snippets.json unterscheidet sich in einigen Punkten vom alten Vorgehen

HTML Emmet Snippets

HTML-Benutzersnippets sind auf alle anderen Markup-Flavors wie haml oder pug anwendbar. Wenn der Snippet-Wert eine Abkürzung und kein tatsächliches HTML ist, können die entsprechenden Transformationen angewendet werden, um die richtige Ausgabe für den jeweiligen Sprachtyp zu erhalten.

Zum Beispiel, für eine ungeordnete Liste mit einem Listenelement, wenn Ihr Snippet-Wert ul>li ist, können Sie denselben Snippet in html, haml, pug oder slim verwenden, aber wenn Ihr Snippet-Wert <ul><li></li></ul> ist, dann funktioniert er nur in html-Dateien.

Wenn Sie einen Snippet für einfachen Text wünschen, umschließen Sie den Text mit {}.

CSS Emmet Snippets

Werte für CSS Emmet Snippets sollten ein vollständiges Eigenschaftsnamen- und Wert-Paar sein.

CSS-Benutzersnippets sind auf alle anderen Stylesheet-Flavors wie scss, less oder sass anwendbar. Fügen Sie daher am Ende des Snippet-Werts kein abschließendes ; hinzu. Emmet fügt es nach Bedarf hinzu, je nachdem, ob die Sprache es benötigt.

Verwenden Sie keine : im Snippet-Namen. : wird verwendet, um den Eigenschaftsnamen und den Wert zu trennen, wenn Emmet versucht, die Abkürzung mit einem der Snippets abzugleichen.

Tabulatoren und Cursor in benutzerdefinierten Snippets

Die Syntax für Tabulatoren in benutzerdefinierten Emmet-Snippets folgt der Textmate-Snippet-Syntax.

• Verwenden Sie ${1}, ${2} für Tabulatoren und ${1:placeholder} für Tabulatoren mit Platzhaltern.
• Zuvor wurden | oder ${cursor} verwendet, um die Cursorposition im benutzerdefinierten Emmet-Snippet zu bezeichnen. Dies wird nicht mehr unterstützt. Verwenden Sie stattdessen ${1}.

Emmet-Konfiguration

Unten sind Emmet- Einstellungen, die Sie verwenden können, um Ihre Emmet-Erfahrung in VS Code anzupassen.

• emmet.includeLanguages

  Verwenden Sie diese Einstellung, um eine Zuordnung zwischen der Sprache Ihrer Wahl und einer der von Emmet unterstützten Sprachen hinzuzufügen, um Emmet in der ersteren unter Verwendung der Syntax der letzteren zu aktivieren. Stellen Sie sicher, dass Sie Sprach-IDs für beide Seiten der Zuordnung verwenden.

  Zum Beispiel

  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "plaintext": "pug"
  }
  

• emmet.excludeLanguages

  Wenn es eine Sprache gibt, in der Sie keine Emmet-Erweiterungen sehen möchten, fügen Sie sie in diese Einstellung ein, die ein Array von Sprach-ID-Strings akzeptiert.

• emmet.syntaxProfiles

  Siehe Emmet Customization of output profile, um zu erfahren, wie Sie die Ausgabe Ihrer HTML-Abkürzungen anpassen können.

  Zum Beispiel

  "emmet.syntaxProfiles": {
    "html": {
      "attr_quotes": "single"
    },
    "jsx": {
      "self_closing_tag": true
    }
  }
  

• emmet.variables

  Passen Sie Variablen an, die von Emmet-Snippets verwendet werden.

  Zum Beispiel

  "emmet.variables": {
    "lang": "de",
    "charset": "UTF-16"
  }
  

• emmet.showExpandedAbbreviation

  Steuert die Emmet-Vorschläge, die in der Vorschlags-/Vervollständigungsliste angezeigt werden.

  Einstellungswert	Beschreibung
  never	Zeigen Sie Emmet-Abkürzungen niemals in der Vorschlagsliste für eine beliebige Sprache an.
  inMarkupAndStylesheetFilesOnly	Zeigen Sie Emmet-Vorschläge nur für Sprachen an, die rein Markup- und Stylesheet-basiert sind ('html', 'pug', 'slim', 'haml', 'xml', 'xsl', 'css', 'scss', 'sass', 'less', 'stylus').
  always	Zeigen Sie Emmet-Vorschläge in allen von Emmet unterstützten Modi sowie in Sprachen an, die eine Zuordnung in der Einstellung emmet.includeLanguages haben.

  Hinweis: Im Modus always ist die neue Emmet-Implementierung nicht kontextsensitiv. Wenn Sie beispielsweise eine JavaScript-React-Datei bearbeiten, erhalten Sie Emmet-Vorschläge nicht nur beim Schreiben von Markup, sondern auch beim Schreiben von JavaScript.

• emmet.showAbbreviationSuggestions

  Zeigt mögliche Emmet-Abkürzungen als Vorschläge an. Standardmäßig ist dies true.

  Wenn Sie beispielsweise li eingeben, erhalten Sie Vorschläge für alle Emmet-Snippets, die mit li beginnen, wie link, link:css, link:favicon usw. Dies ist hilfreich, um Emmet-Snippets zu lernen, von denen Sie nie wussten, dass sie existieren, es sei denn, Sie kennen die Emmet-Cheat-Sheet auswendig.

  Nicht anwendbar in Stylesheets oder wenn emmet.showExpandedAbbreviation auf never gesetzt ist.

• emmet.extensionsPath

  Geben Sie den Speicherort des Verzeichnisses an, das die Datei snippets.json enthält, welche wiederum Ihre benutzerdefinierten Snippets enthält.

• emmet.triggerExpansionOnTab

  Setzen Sie dies auf true, um Emmet-Abkürzungen mit der Tab-Taste zu erweitern. Wir verwenden diese Einstellung, um die entsprechende Fallback-Lösung für die Einrückung bereitzustellen, wenn keine Abkürzung zum Erweitern vorhanden ist.

• emmet.showSuggestionsAsSnippets

  Wenn auf true gesetzt, werden Emmet-Vorschläge zusammen mit anderen Snippets gruppiert, was es Ihnen ermöglicht, sie gemäß der Einstellung editor.snippetSuggestions zu sortieren. Setzen Sie dies auf true und editor.snippetSuggestions auf top, um sicherzustellen, dass Emmet-Vorschläge immer an erster Stelle unter den anderen Vorschlägen erscheinen.

• emmet.preferences

  Sie können diese Einstellung verwenden, um Emmet anzupassen, wie in den Emmet Preferences dokumentiert. Die folgenden Anpassungen werden derzeit unterstützt

  • css.propertyEnd
  • css.valueSeparator
  • sass.propertyEnd
  • sass.valueSeparator
  • stylus.propertyEnd
  • stylus.valueSeparator
  • css.unitAliases
  • css.intUnit
  • css.floatUnit
  • bem.elementSeparator
  • bem.modifierSeparator
  • filter.commentBefore
  • filter.commentTrigger
  • filter.commentAfter
  • format.noIndentTags
  • format.forceIndentationForTags
  • profile.allowCompactBoolean
  • css.fuzzySearchMinScore

  Das Format für die Präferenz filter.commentAfter ist in Emmet 2.0 anders und einfacher.

  Zum Beispiel, anstatt des älteren Formats

  "emmet.preferences": {
    "filter.commentAfter": "\n<!-- /<%= attr('id', '#') %><%= attr('class', '.') %> -->"
  }
  

  würden Sie verwenden

  "emmet.preferences": {
    "filter.commentAfter": "\n<!-- /[#ID][.CLASS] -->"
  }
  

  Wenn Sie Unterstützung für andere Präferenzen wünschen, die in den Emmet Preferences dokumentiert sind, reichen Sie bitte eine Feature Request ein.

Nächste Schritte

Emmet ist nur eine der großartigen Webentwickler-Funktionen in VS Code. Lesen Sie weiter, um mehr zu erfahren über

• HTML - VS Code unterstützt HTML mit IntelliSense, schließenden Tags und Formatierung.
• CSS - Wir bieten umfassende Unterstützung für CSS, SCSS und Less.

Fehlerbehebung

Benutzerdefinierte Tags werden in der Vorschlagsliste nicht erweitert

Benutzerdefinierte Tags, wenn sie in einem Ausdruck wie MyTag>YourTag oder MyTag.someclass verwendet werden, erscheinen in der Vorschlagsliste. Aber wenn sie allein wie MyTag verwendet werden, erscheinen sie nicht in der Vorschlagsliste. Dies ist so konzipiert, um Lärm in der Vorschlagsliste zu vermeiden, da jedes Wort ein potenzielles benutzerdefiniertes Tag ist.

Fügen Sie die folgende Einstellung hinzu, um die Erweiterung von Emmet-Abkürzungen mit Tab zu aktivieren, was benutzerdefinierte Tags in allen Fällen erweitert.

"emmet.triggerExpansionOnTab": true

Meine HTML-Snippets, die mit + enden, funktionieren nicht

HTML-Snippets, die mit + enden, wie select+ und ul+ aus der Emmet-Cheat-Sheet, werden nicht unterstützt. Dies ist ein bekanntes Problem in Emmet 2.0 Issue: emmetio/html-matcher#1. Eine Umgehung ist, Ihre eigenen benutzerdefinierten Emmet-Snippets für solche Szenarien zu erstellen.

Abkürzungen werden nicht erweitert

Überprüfen Sie zuerst, ob Sie benutzerdefinierte Snippets verwenden (wenn eine Datei snippets.json von der Einstellung emmet.extensionsPath erfasst wird). Das Format benutzerdefinierter Snippets hat sich in VS Code Version 1.53 geändert. Anstatt | zu verwenden, um die Cursorposition anzugeben, verwenden Sie stattdessen Tokens wie ${1}, ${2} usw. Die Standard-CSS-Snippets-Datei aus dem emmetio/emmet-Repository zeigt Beispiele für das neue Cursorpositionsformat.

Wenn Abkürzungen immer noch nicht erweitert werden

• Überprüfen Sie die eingebauten Erweiterungen, um zu sehen, ob Emmet deaktiviert wurde.
• Versuchen Sie, den Erweiterungshost neu zu starten, indem Sie den Befehl Entwickler: Erweiterungshost neu starten (workbench.action.restartExtensionHost) in der Befehlspalette ausführen.

Wo kann ich alle Präferenzen einstellen, wie in den Emmet preferences dokumentiert?

Sie können die Präferenzen über die Einstellung emmet.preferences einstellen. Nur eine Teilmenge der Präferenzen, die in den Emmet preferences dokumentiert sind, kann angepasst werden. Bitte lesen Sie den Präferenzabschnitt unter Emmet-Konfiguration.

Gibt es Tipps und Tricks?

Natürlich!

• In CSS-Abkürzungen wird, wenn Sie : verwenden, der linke Teil zur Fuzzy-Übereinstimmung mit dem CSS-Eigenschaftsnamen und der rechte Teil zur Übereinstimmung mit dem CSS-Eigenschaftswert verwendet. Nutzen Sie dies voll aus, indem Sie Abkürzungen wie pos:f, trf:rx, fw:b usw. verwenden.
• Erkunden Sie alle anderen Emmet-Funktionen, wie in den Emmet Actions dokumentiert.
• Zögern Sie nicht, Ihre eigenen benutzerdefinierten Emmet-Snippets zu erstellen.