Emmet 2.0 in Visual Studio Code

7. August 2017 Ramya Rao, @ramyanexus

In der Juli-2017-Version von Visual Studio Code (Version 1.15) veröffentlichen wir ein besseres Emmet-Erlebnis, das in den letzten 2 Versionen in der Vorschau war.

Zu den Funktionen gehören

• Emmet-Abkürzungserweiterungen in Vorschlags-/Auto-Vervollständigungslisten.
• Multi-Cursor-Unterstützung für die meisten Emmet-Aktionen.
• Aktualisierte Unterstützung für benutzerdefinierte Emmet-Snippets.

Im Rahmen dieses Updates haben wir alle Emmet-Aktionen mithilfe neuer npm-Module von @emmetio neu geschrieben.

Eine wichtige Änderung ist, dass die Tab-Taste nicht mehr die Standardmethode zum Erweitern von Emmet-Abkürzungen ist. Stattdessen erscheinen Emmet-Abkürzungen jetzt in der Vorschlagsliste. Sie können wie jede andere intelligente Vervollständigung ausgewählt werden, und bei Auswahl wird die Abkürzung erweitert.

Hinweis: Um Emmet-Abkürzungen und Snippets weiterhin mit der Tab-Taste zu erweitern, setzen Sie emmet.triggerExpansionOnTab auf true.

Lesen Sie weiter, um mehr über die Emmet 2.0-Änderungen in Visual Studio Code zu erfahren.

Neuer modularer Ansatz für Emmet

Zuvor war die Emmet-Bibliothek eine einzige monolithische Codebasis, die für jede Emmet-Aktion verwendet wurde. Der Autor von Emmet, Sergey Chikuyonok, stellte sich für Emmet 2.0 eine neue Welt mit kleineren, wiederverwendbaren Modulen vor.

Es gibt jetzt separate npm-Module von @emmetio für die verschiedenen Teile der Pipeline, die zur Erweiterung einer Emmet-Abkürzung erforderlich sind. Dazu gehören Schritte wie

• Parsing einer Abkürzung
• Auflösen von Snippets und Variablen
• Rendern der Ausgabe entsprechend der Syntax
• Anwenden von Transformationen

Es gibt auch separate Module zum Parsen von HTML- und CSS-Dokumenten, um bei der Implementierung der übrigen Emmet-Funktionen zu helfen. Sie finden diese Module auf npm unter emmetio.

Dieser modulare Ansatz wurde gewählt, um es Editor-Plugins zu ermöglichen, Editor-spezifische APIs für eine bessere Emmet-Integration mit den Editorfunktionen zu nutzen. Dieser Ansatz hat uns beispielsweise ermöglicht,

• Emmet-Abkürzungserweiterungen in der Vorschlags-/Auto-Vervollständigungsliste bereitzustellen.
• Multi-Cursor-Unterstützung für die meisten Emmet-Aktionen bereitzustellen.
• Eine effizientere Verarbeitung von Dokumenten unter Verwendung von VS Code-spezifischen APIs für Emmet-Aktionen bereitzustellen, die geparste Dateien benötigen.
• Die Emmet-Integration aus dem VS Code-Kern in eine Erweiterung auszulagern.

Tab ist nicht mehr die Standard-Emmet-Erweiterungstaste

Es gab zwei Probleme bei der Verwendung der Tab-Taste als Tastenkombination für die Emmet-Erweiterung

• Emmet-Erweiterungen traten auf, wenn der Benutzer Quellcode mit der Tab-Taste einrücken wollte.
• Elemente aus der Vorschlagsliste wurden eingefügt, wenn der Benutzer eine Emmet-Abkürzung erweitern wollte.

Sergey Chikuyonok erkannte, dass Emmet in der Vorschlagsliste eine angenehmere Erfahrung wäre. Dass dies uns half, die beiden oben genannten Probleme zu lösen, war ein zusätzlicher Bonus.

Da Emmet-Abkürzungen jetzt leicht über die Vorschlagsliste zugänglich sind, konnten wir die Standardzuordnung der Tab-Taste zum Befehl Emmet: ExpandAbbreviation entfernen. Die Tab-Taste ist nun frei, das zu tun, wofür sie bestimmt war: einrücken.

Wenn Sie die Einstellung editor.quickSuggestions deaktiviert haben, müssen Sie ⌃Space (Windows, Linux Ctrl+Space) drücken, um die Vorschlags-/Auto-Vervollständigungsliste manuell auszulösen.

Wenn Emmet nicht in der Vorschlags-/Auto-Vervollständigungsliste erscheinen soll, setzen Sie emmet.showExpandedAbbreviation auf never.

Sie können weiterhin jede Tastenkombination (außer der Tab-Taste) an den Befehl editor.emmet.action.expandAbbreviation binden oder Emmet: Expand Abbreviation aus der Befehlspalette verwenden.

Wenn Sie die Tab-Taste zum Erweitern Ihrer Abkürzungen bevorzugen, fügen Sie die Einstellung emmet.triggerExpansionOnTab zu Ihren Einstellungen hinzu und setzen Sie sie auf true. Wir verwenden diese Einstellung, um einen geeigneten Fallback für das Einrücken bereitzustellen, wenn keine Abkürzung zum Erweitern vorhanden ist.

Weitere Änderungen

Es gibt einige weitere Änderungen, die wir auf der neuen Emmet-Seite dokumentiert haben

• Verwenden Sie emmet.includeLanguages anstelle der Einstellung emmet.syntaxProfiles, um Emmet in anderen Dateitypen zu aktivieren
• Änderungen an der Art und Weise, wie Sie benutzerdefinierte Snippets in Emmet schreiben
• Änderungen an verfügbaren Emmet-Einstellungen
• Um einzelne Zeilen in einer einzelnen Auswahl in separate Tags einzuwickeln, verwenden Sie den Befehl Emmet: Wrap Individual Lines with Abbreviation anstelle von Emmet: Wrap with Abbreviation.
• Bekannte Probleme in Emmet 2.0, an denen wir im August 2017 arbeiten

Menschen, die Emmet 2.0 möglich gemacht haben

Ich möchte Sergey Chikuyonok für seine erstaunliche Arbeit an der Modularisierung von Emmet und seine Hilfe bei der Bereitstellung dieser Verbesserungen für VS Code danken.

Vielen Dank auch an alle, die das neue Emmet in VS Code während der Vorschau verwendet und über GitHub-Issues wertvolles Feedback gegeben haben. Die Diskussionen in den GitHub-Issues waren sehr hilfreich, um zum aktuellen Benutzererlebnis zu gelangen.

Besonderer Dank geht an Steve Lombardi, Jens Hausdorf, Vladimir Sizikov, Niichie, Thomas Klepzig und viele andere, die die VS Code Insiders Builds verwendet haben, um meine Fehlerbehebungen und Feature-Ergänzungen zu testen.

Teilen Sie Ihre Gedanken zu dem neuen Emmet

Vermissen Sie Funktionen des alten Emmet? Haben Sie Schwierigkeiten mit dem neuen Emmet? Erstellen Sie gerne ein GitHub- Issue und wir werden unser Bestes tun, um Ihnen zu helfen.

Es ist auch einfacher denn je, zu Emmet in VS Code beizutragen, da es sich jetzt um eine Erweiterung handelt. Der emmet-Ordner im VS Code GitHub-Repository enthält den gesamten Quellcode, den Sie für den Einstieg benötigen.

Viel Spaß beim Programmieren!

Ramya Rao, Mitglied des VS Code-Teams @ramyanexus