Emmet in Visual Studio Code (2023)

Unterstützung fürEmmetSnippets und Erweiterungen sind direkt in Visual Studio Code integriert.keine Verlängerung erforderlich.Emmet 2.0hat Unterstützung für die Mehrheit derEmmet-Aktioneninklusive ErweiterungEmmet-Abkürzungen und Auszüge.

So erweitern Sie Emmet-Abkürzungen und -Schnipsel

Emmet-Abkürzungen und Snippet-Erweiterungen sind in standardmäßig aktivierthtml,oft,Mops,schlank,jsx,xml,xsl,CSS,scss,Sass,wenigerUndStiftDateien sowie jede Sprache, die von einer der oben genannten erbtLenkerUndphp.

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

Verwenden von Tab für Emmet-Erweiterungen

Wenn Sie das verwenden möchtenTabFügen Sie zum Erweitern der Emmet-Abkürzungen die folgende Einstellung hinzu:

„emmet.triggerExpansionOnTab“:WAHR

Diese Einstellung ermöglicht die Verwendung vonTabSchlüssel zum Einrücken, wenn der Text keine Emmet-Abkürzung ist.

Emmet, wenn QuickSuggestions deaktiviert sind

Wenn Sie die deaktiviert habeneditor.quickSuggestions Einstellung, werden Ihnen während der Eingabe keine Vorschläge angezeigt. Sie können Vorschläge weiterhin manuell auslösen, indem Sie auf drücken⌃Raum(Windows, LinuxStrg+Leertaste)und sehen Sie sich die Vorschau an.

Deaktivieren Sie Emmet in Vorschlägen

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

„emmet.showExpandedAbbreviation“:"niemals"

Sie können den Befehl weiterhin verwendenEmmet: Abkürzung erweiternum Ihre Abkürzungen zu erweitern. Sie können auch jede beliebige Tastenkombination an die Befehls-ID bindeneditor.emmet.action.expandAbbreviationsowie.

Bestellung von Emmet-Vorschlägen

Um sicherzustellen, dass Emmet-Vorschläge in der Vorschlagsliste immer ganz oben stehen, fügen Sie die folgenden Einstellungen hinzu:

„emmet.showSuggestionsAsSnippets“:WAHR,„editor.snippetSuggestions“:"Spitze"

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 dieemmet.includeLanguagesEinstellung. Unbedingt verwendenSprachbezeichnerfür beide Seiten der Zuordnung, wobei die rechte Seite die Sprachkennung einer von Emmet unterstützten Sprache ist (siehe Liste oben).

Zum Beispiel:

„emmet.includeLanguages“: { „Javascript“:„javascriptreact“, "Rasierer":„html“, „Klartext“:"Mops"}

Emmet kennt diese neuen Sprachen nicht, daher werden möglicherweise Emmet-Vorschläge in Nicht-HTML/CSS-Kontexten angezeigt. Um dies zu vermeiden, können Sie die folgende Einstellung verwenden.

„emmet.showExpandedAbbreviation“:„inMarkupAndStylesheetFilesOnly“

Notiz:Wenn Sie verwendet habenemmet.syntaxProfilesBisher sollten Sie die Einstellung verwenden, um neue Dateitypen abzubilden. Ab VS Code 1.15 sollten Sie diese Einstellung verwendenemmet.includeLanguagesstattdessen.emmet.syntaxProfilesist dafür gedachtAnpassen der endgültigen Ausgabenur.

(Video) Learn Emmet In 15 Minutes - Double Your HTML Coding Speed

Emmet mit mehreren Cursorn

Sie können die meisten Emmet-Aktionen auch mit mehreren Cursorn verwenden:

Verwendung von Filtern

Filter sind spezielle Postprozessoren, die die erweiterte Abkürzung modifizieren, bevor sie an den Editor ausgegeben wird. Es gibt zwei Möglichkeiten, Filter zu verwenden; entweder global über dieemmet.syntaxProfilesEinstellung oder direkt in der aktuellen Abkürzung.

Nachfolgend finden Sie ein Beispiel für den ersten Ansatz unter Verwendung vonemmet.syntaxProfilesEinstellung, um die anzuwendenGutFiltern Sie nach allen Abkürzungen in HTML-Dateien:

„emmet.syntaxProfiles“: { „html“: { „Filter“:"Gut"}}

Um einen Filter nur für die aktuelle Abkürzung bereitzustellen, hängen Sie den Filter an Ihre Abkürzung an. Zum Beispiel,div#page|cwerde das anwendenKommentarFiltern Sie nachdiv#SeiteAbkürzung.

BEM-Filter (gut)

Wenn Sie die verwendenBlockelementmodifikator(BEM) Art, HTML zu schreibenGutFilter sind für Sie sehr praktisch. Erfahren Sie mehr über die VerwendungGutFilter, lesenBEM-Filter in Emmet.

Sie können diesen Filter mithilfe von anpassenwell.elementSeparatorUndwell.modifierSeparatorPräferenzen, wie in dokumentiertEmmet-Einstellungen.

Kommentarfilter (c)

Dieser Filter fügt Kommentare zu wichtigen Tags hinzu. Standardmäßig sind „wichtige Tags“ solche Tags mit ID und/oder Klassenattribut.

Zum Beispieldiv>div#page>p.title+p|cwird erweitert auf:

 
 Ausweis="Buchseite">  Klasse="Titel">  
  

Sie können diesen Filter mithilfe von anpassenfilter.commentTrigger,filter.commentAfterUndfilter.commentBeforePräferenzen, wie in dokumentiertEmmet-Einstellungen.

Das Format für diefilter.commentAfterDie Präferenz ist in VS Code Emmet 2.0 anders.

Zum Beispiel statt:

„emmet.preferences“: { „filter.commentAfter“:"\N"}

In VS Code würden Sie ein einfacheres verwenden:

„emmet.preferences“: { „filter.commentAfter“:"\N"}

Trimmfilter (t)

Dieser Filter ist nur anwendbar, wenn Abkürzungen für angegeben werdenEmmet: Mit Abkürzung umschließenBefehl. EsEntfernt Linienmarkierungenaus umwickelten Linien.

Verwenden benutzerdefinierter Emmet-Snippets

Benutzerdefinierte Emmet-Snippets müssen in einer JSON-Datei mit dem Namen definiert werdensnippets.json. Deremmet.extensionsPathDie Einstellung sollte den Pfad zu dem Verzeichnis enthalten, das diese Datei enthält.

Nachfolgend finden Sie ein Beispiel für den Inhaltsnippets.jsonDatei.

{ „html“: { „Schnipsel“: { „ull“:"ul>li[id=${1} class=${2}]*2{ Funktioniert mit HTML, Pug, Haml und Slim }", „Oll“:„
 Funktioniert nur in HTML 
“, „lief“:„{ Einfachen Text in geschweifte Klammern einschließen }“}}, „css“: { „Schnipsel“: { „cb“:"Farbe: Schwarz", „bsd“:„Grenze: 1px durchgezogen ${1:red}“, „ls“:„Listenstil: ${1}“}}}

Erstellen von benutzerdefinierten Snippets in Emmet 2.0 übersnippets.jsonDatei unterscheidet sich in einigen Punkten von der alten Vorgehensweise:

HTML-Emmet-Schnipsel

Benutzerdefinierte HTML-Snippets sind auf alle anderen Markup-Varianten anwendbar, zoftoderMops. Wenn der Snippet-Wert eine Abkürzung und kein echtes HTML ist, können die entsprechenden Transformationen angewendet werden, um die richtige Ausgabe entsprechend dem Sprachtyp zu erhalten.

Zum Beispiel für eine ungeordnete Liste mit einem Listenelement, wenn Ihr Snippet-Wert lautetul>li, können Sie das gleiche Snippet verwendenhtml,oft,Mopsoderschlank, aber wenn Ihr Snippet-Wert ist

Wenn Sie einen Ausschnitt für einfachen Text wünschen, umgeben Sie den Text mit{}.

CSS-Emmet-Schnipsel

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

Benutzerdefinierte CSS-Snippets sind auf alle anderen Stylesheet-Varianten anwendbar, zscss,wenigeroderSass. Fügen Sie daher kein nachgestelltes Element ein;am Ende des Snippet-Werts. Emmet fügt es nach Bedarf hinzu, je nachdem, ob die Sprache dies erfordert.

Verwende nicht:im Snippet-Namen.:wird verwendet, um Eigenschaftsnamen und -wert zu trennen, wenn Emmet versucht, die Abkürzung einem der Snippets zuzuordnen.

Tabstopps und Cursor in benutzerdefinierten Snippets

Die Syntax für Tabstopps in benutzerdefinierten Emmet-Snippets folgt derSyntax für Textmate-Snippets.

• Verwenden${1},${2}für Tabstopps und${1:placeholder}für Tabstopps mit Platzhaltern.
• Bisher,|oder${cursor}wurde verwendet, um die Cursorposition im benutzerdefinierten Emmet-Snippet anzugeben. Dies wird nicht mehr unterstützt. Verwenden${1}stattdessen.

Emmet-Konfiguration

Unten sind EmmetEinstellungenmit dem Sie Ihr Emmet-Erlebnis in VS Code anpassen können.

• 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 für beide Seiten der Zuordnung Sprach-IDs verwenden.

  Zum Beispiel:

  „emmet.includeLanguages“: { „Javascript“:„javascriptreact“, „Klartext“:"Mops"}

• emmet.excludeLanguages

  (Video) Use Emmet to up your HTML game

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

• emmet.syntaxProfiles

  SehenEmmet Anpassung des AusgabeprofilsErfahren Sie, wie Sie die Ausgabe Ihrer HTML-Abkürzungen anpassen können.

  Zum Beispiel:

  „emmet.syntaxProfiles“: { „html“: { „attr_quotes“:"einzel"}, „jsx“: { „self_closing_tag“:WAHR}}

• emmet.variablen

  Passen Sie die von Emmet-Snippets verwendeten Variablen an.

  Zum Beispiel:

  „emmet.variables“: { „lang“:"von", „Zeichensatz“:„UTF-16“}

• emmet.showExpandedAbbreviation

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

  Einstellungswert	Beschreibung
  niemals	Zeigen Sie niemals Emmet-Abkürzungen in der Vorschlagsliste für eine Sprache an.
  inMarkupAndStylesheetFilesOnly	Emmet-Vorschläge nur für Sprachen anzeigen, die ausschließlich auf Markup und Stylesheet basieren („html“, „pug“, „slim“, „haml“, „xml“, „xsl“, „css“, „scss“, „sass“, 'weniger', 'Stift').
  stets	Zeigen Sie Emmet-Vorschläge in allen von Emmet unterstützten Modi sowie in den Sprachen an, die über eine Zuordnung verfügenemmet.includeLanguagesEinstellung.

  Notiz:ImstetsIm Modus ist die neue Emmet-Implementierung nicht kontextbewusst. Wenn Sie beispielsweise eine JavaScript-React-Datei bearbeiten, erhalten Sie Emmet-Vorschläge nicht nur beim Schreiben von Markups, sondern auch beim Schreiben von JavaScript.

• emmet.showAbbreviationSuggestions

  Zeigt mögliche Emmet-Abkürzungen als Vorschläge an. Es istWAHRstandardmäßig.

  Zum Beispiel beim Tippenlierhalten Sie Vorschläge für alle Emmet-Snippets beginnend mitliwieVerknüpfung,Link:css,Link:Faviconusw. Dies ist hilfreich beim Erlernen von Emmet-Schnipseln, von deren Existenz Sie nie wussten, es sei denn, Sie wussten, dass sie existierenEmmet-Spickzettelauswendig.

  Nicht anwendbar in Stylesheets oder wannemmet.showExpandedAbbreviationist eingestellt aufniemals.

• emmet.extensionsPath

  Geben Sie den Speicherort des Verzeichnisses an, in dem sich die befindetsnippets.jsonDatei, die wiederum Ihre benutzerdefinierten Snippets enthält.

  (Video) Emmet extension for Visual Studio Code | Emmet extension for vscode

• emmet.triggerExpansionOnTab

  Setzen Sie dies auf „true“, um die Erweiterung von Emmet-Abkürzungen mit zu ermöglichenTabTaste. Wir verwenden diese Einstellung, um den entsprechenden Fallback bereitzustellen, um eine Einrückung bereitzustellen, wenn keine Abkürzung zum Erweitern vorhanden ist.

• emmet.showSuggestionsAsSnippets

  Wenn eingestellt aufWAHR, dann werden Emmet-Vorschläge zusammen mit anderen Snippets gruppiert, sodass Sie sie entsprechend sortieren könneneditor.snippetSuggestionsEinstellung. Stellen Sie dies aufWAHRUndeditor.snippetSuggestionsZuSpitze, um sicherzustellen, dass Emmet-Vorschläge neben anderen Vorschlägen immer ganz oben angezeigt werden.

• emmet.preferences

  Mit dieser Einstellung können Sie Emmet wie in dokumentiert anpassenEmmet-Einstellungen. 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
  • well.elementSeparator
  • well.modifierSeparator
  • filter.commentBefore
  • filter.commentTrigger
  • filter.commentAfter
  • format.noIndentTags
  • format.forceIndentationForTags
  • Profile.allowCompactBoolean
  • css.fuzzySearchMinScore

  Das Format für diefilter.commentAfterDie Präferenz ist in Emmet 2.0 anders und einfacher.

  Zum Beispiel anstelle des älteren Formats

  „emmet.preferences“: { „filter.commentAfter“:"\N"}

  du verwenden würdest

  „emmet.preferences“: { „filter.commentAfter“:"\N"}

  Wenn Sie Unterstützung für eine der anderen Einstellungen wünschen, wie in dokumentiertEmmet-Einstellungen, bitte melden Sie sich anFeatureanfrage.

Nächste Schritte

Emmet ist nur eine der großartigen Webentwicklerfunktionen in VS Code. Lesen Sie weiter, um mehr über Folgendes zu erfahren:

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

Fehlerbehebung

Benutzerdefinierte Tags werden in der Vorschlagsliste nicht erweitert

Benutzerdefinierte Tags, wenn sie in einem Ausdruck wie verwendet werdenMeinTag>IhrTagoderMyTag.someclasserscheinen in der Vorschlagsliste. Aber wenn diese alleine verwendet werden, gefällt esMeinTag, erscheinen sie nicht in der Vorschlagsliste. Dies dient dazu, Rauschen in der Vorschlagsliste zu vermeiden, da jedes Wort ein potenzieller benutzerdefinierter Tag ist.

Fügen Sie die folgende Einstellung hinzu, um die Erweiterung von Emmet-Abkürzungen mithilfe der Tabulatortaste zu ermöglichen, wodurch benutzerdefinierte Tags in allen Fällen erweitert werden.

„emmet.triggerExpansionOnTab“:WAHR

Meine HTML-Schnipsel enden mit+arbeite nicht

HTML-Schnipsel, die mit enden+wieWählen Sie +Undul+von demEmmet-Spickzettelwerden nicht unterstützt. Dies ist ein bekanntes Problem in Emmet 2.0Problem: emmetio/html-matcher#1. Eine Problemumgehung besteht darin, eine eigene zu erstellenbenutzerdefinierte Emmet-Schnipselfür solche Szenarien.

Abkürzungen lassen sich nicht erweitern

Überprüfen Sie zunächst, ob Sie benutzerdefinierte Snippets verwenden (falls vorhanden).snippets.jsonDatei, die von der abgeholt wirdemmet.extensionsPathEinstellung). Das Format benutzerdefinierter Snippets wurde in VS Code Version 1.53 geändert. Anstatt zu verwenden|Um anzugeben, wo sich die Cursorposition befindet, verwenden Sie Token wie${1},${2}usw. stattdessen. DerStandard-CSS-Snippets-Dateivon dememmetio/emmetDas Repository zeigt Beispiele für das neue Cursorpositionsformat.

Wenn Abkürzungen immer noch nicht erweitert werden können:

• Überprüf denintegrierte Erweiterungenum zu sehen, ob Emmet deaktiviert wurde.
• Versuchen Sie, den Erweiterungshost neu zu starten, indem Sie Folgendes ausführenEntwickler: Erweiterungshost neu starten(workbench.action.restartExtensionHost)-Befehl in derBefehlspalette.

Wo kann ich alle in dokumentierten Einstellungen festlegen?Emmet-Vorlieben?

Sie können die Präferenzen mithilfe der Einstellung festlegenemmet.preferences. Nur eine Teilmenge der Präferenzen, die in dokumentiert sindEmmet-Vorliebenkann angepasst werden. Bitte lesen Sie den Abschnitt „Einstellungen“ weiter untenEmmet-Konfiguration.

Irgendwelche Tipps und Tricks?

Natürlich!

• In CSS-Abkürzungen, wenn Sie verwenden:, der linke Teil wird für den Fuzzy-Abgleich mit dem CSS-Eigenschaftsnamen und der rechte Teil für den Abgleich mit dem CSS-Eigenschaftswert verwendet. Nutzen Sie dies voll aus, indem Sie Abkürzungen wie verwendenpos:f,trf:rx,fw: b, usw.
• Entdecken Sie alle anderen Emmet-Funktionen, wie in dokumentiertEmmet-Aktionen.
• Zögern Sie nicht, Ihr eigenes zu erstellenbenutzerdefinierte Emmet-Schnipsel.

03.05.2023