Emmet, früher Zen Coding, ist eines der praktischsten und produktivsten Text-Editor-Plugins, das Sie jemals sehen werden. Mit der Möglichkeit, einfache Abkürzungen sofort in komplexe Code-Snippets zu erweitern, fühlen Sie sich wie ein mächtiger Codierungsassistent, der die Welt an Ihren Fingerspitzen hält.
Im Anschluss an unseren vorherigen Artikel über die Grundlagen von Zen Coding werden wir uns heute mit sieben tollen Tipps befassen, die Ihnen helfen, ein echter Emmet-Profi zu werden.
1. Überspringen Sie die Div
Unser erster Tipp ist, dass Sie selten "div" eingeben müssen. in Ihrem Makro. Es ist verlockend, weil Sie dies mit jedem anderen HTML-Element tun, aber divs sind etwas Besonderes und erfordern sogar noch weniger Aufwand. Alles, was Sie tun müssen, ist, eine ID (mit einem Hashtag) oder eine Klasse (mit einem Punkt) einzugeben, und Emmet geht davon aus, dass Sie ein Div erstellen möchten.
Wie Sie sehen, führen beide Abkürzungen zum gleichen Ergebnis. Da es bei Emmet darum geht, Zeit zu sparen, indem Sie die Anzahl der erforderlichen Schreibvorgänge reduzieren, achten Sie immer auf den kürzesten Weg, den Sie möchten.
Implizite Tag-Namen
Diese Eigenart ist eigentlich Teil eines größeren Features namens "implizite Tag-Namen", bei dem versucht wird, das gewünschte Tag basierend auf dem Kontext zu interpretieren. Beachten Sie, dass ich auch nicht tippe? Div? oder? li? in meiner Abkürzung werden sie aber angenommen und in das letzte erweiterte Snippet eingefügt.
2. Kettenabkürzungen mit DOM-Navigation
Wenn Sie Emmet verwenden, um einfache Klassennamen in divs zu erweitern, ist das für Sie gut, und Sie haben einen anständigen Start. Die wirkliche Zeitersparnis wird jedoch erst erreicht, wenn Sie gelernt haben, effektiv größere Makros zu erstellen, die sich auf einen erheblichen Teil Ihres Markups ausweiten können.
Der Schlüssel dazu ist das Auswendiglernen und Verstehen der Syntax, mit der Sie in verschiedene Ebenen Ihres Dokumentbaums verzweigen können. Es sind drei wichtige Symbole zu beachten:
Wie Sie sehen können?> Var13 ->? können Sie tiefer in den Baum hinein gehen und ein Kind erstellen? können Sie ein neues Element auf derselben Ebene wie das vorherige erstellen (ein Geschwister), und? ^? Damit können Sie eine Ebene nach oben klettern, um ein Element zu erstellen. Der Einfachheit halber beginnen wir mit den ersten beiden.
Wie Sie sehen können, konnte ich mit dem Kindersymbol (genau wie bei der Kindauswahl in CSS) das innere div innerhalb des äußeren div platzieren. Dann habe ich ein anderes Kindersymbol gefolgt vom Geschwistersymbol verwendet, um sowohl h2 als auch Absatz auf derselben Ebene direkt im inneren Div zu platzieren.
Hochklettern
Nun gehen wir weiter und schauen uns den Baum nach oben. Dieses ist etwas komplizierter, um es sich zu merken, aber es ist eine fantastische neue Emmet-Funktion, die wir in Zen Coding nicht hatten. Grundsätzlich verwenden Sie die? Nach oben? Symbol, wir können aus einem Ast steigen, in den wir angefangen haben zu tauchen. Das meine ich damit:
Wie Sie hier sehen können, haben wir in den ersten Absatz gegraben und einen Ankertag eingefügt, mussten dann aber wieder nach oben klettern und einen weiteren Absatz auf derselben Ebene wie den vorherigen hinzufügen. Die? ^? Symbol erlaubte uns dies zu erreichen.
Um diese Funktion noch nützlicher zu machen, können Sie diese Symbole miteinander verketten, um mehrere Ebenen zurückzusteigen. Wenn wir beispielsweise unserer vorherigen Abkürzung ein em-Element hinzufügen, müssten wir zwei Ebenen nach oben klettern, um den nächsten Absatz auf derselben Ebene wie der erste zu platzieren.
3. Verwenden Sie die Gruppierung, um Ihre Struktur zu vereinfachen
Manchmal werden Sie feststellen, dass Sie sich so tief in einen bestimmten Zweig eingegraben haben, dass es zu einem verwirrenden Durcheinander wird, wenn Sie genug Aufstiegssymbole miteinander verketten, um zu bekommen, was Sie wollen. In diesem Fall könnte es etwas vereinfacht werden, wenn Sie stattdessen zur Gruppierung wechseln. Dies wird durch Implementieren von Klammern um verschiedene Codeabschnitte erreicht.
Das fühlt sich eigentlich natürlicher und logischer an als das Aufstiegssymbol, und tatsächlich erreichen wir dasselbe. Sie können sehen, dass sich dies wirklich auszahlt, wenn Sie einen größeren Teil Ihrer Seite skizzieren.
4. Fügen Sie Text und Attribute ein
Beim Markieren Ihrer Seite sind Text und Attribute zwei Dinge, die Sie möglicherweise mit Emmet nicht erreichen können. Viele Benutzer umreißen einfach ein Dokument mit diesem Tool und füllen nach der Erweiterung die Inhaltslücken aus. Dies ist eine großartige Möglichkeit, um zu arbeiten, aber wenn Sie interessiert sind, können Sie sowohl Text als auch Attribute mit der unten gezeigten Syntax einfügen.
Wie ich oben gezeigt habe, wird Text über {geschweifte Klammern} eingefügt, und Attribute verwenden [eckige Klammern]. Denken Sie daran, dass Anker automatisch ein? Href? Der Wert dafür ist jedoch standardmäßig leer. Mit dieser Technik können Sie ihn füllen. Denken Sie außerdem daran, dass Sie geschwungene Klammern verwenden können, um ein beliebiges Attribut zu erstellen, nicht nur das hier gezeigte.
5. Mehrere Klassennamen für ein einzelnes Element
Dieses ist sehr einfach, aber als ich mit diesem Tool anfing, war mir nicht klar, wie man einem Element mehrere Klassennamen hinzufügt. Es stellt sich heraus, dass Sie lediglich alle Klassennamen in einer Zeile durch Punkte getrennt eingeben müssen.
6. Multiplikation
Dies ist ein weiterer meiner Favoriten. Sie können sich beim Einfügen mehrerer Elemente desselben Typs jede Menge Tipparbeit sparen. Verwenden Sie einfach die folgende Syntax:
Dies funktioniert bei so ziemlich allem, was Sie brauchen, egal wie kompliziert es ist. Probieren Sie es mit der Gruppierungsfunktion aus, die wir zuvor gesehen haben, um interessante Ergebnisse zu erhalten.
7. Automatische Nummerierung
Der siebte und letzte Tipp ist, dass Sie automatisch inkrementierende Zahlen über das Dollarzeichen in Ihre Snippets einfügen können. Dies funktioniert überall: Klassen, IDs, Text, Attribute usw. Hier ein Beispiel in Aktion:
Beachten Sie, dass je mehr Dollarzeichen Sie verwenden, desto mehr Ziffern enthält die Zahl. Also habe ich zuerst $ verwendet, das sich zu 1, 2 und 3 erweiterte.Dann habe ich in der zweiten Instanz $$ verwendet, das sich zu 01, 02 und 03 erweiterte.
Probiere sie aus!
Nun, da Sie ein paar wirklich erstaunliche Tricks kennen, die Sie mit Emmet ausprobieren können, ist es an der Zeit, ihnen eine Chance zu geben. Besuchen Sie unsere Emmet-Demo-Seite und probieren Sie ein paar Abkürzungen aus, die wir oben beschrieben haben. Hier finden Sie eine Liste aller Abkürzungen in diesem Artikel in Klartext, um das Kopieren und Einfügen zu erleichtern.
Besuchen Sie auch die Emmet-Homepage, auf der Sie mehr erfahren und es selbst ausprobieren können.
Wie kann ich Abkürzungen erweitern?
Die Erweiterung kann in jedem Editor unterschiedlich sein und erfordert normalerweise ein Plugin. Öffnen Sie in Sublime Text 2 den Package Manager, suchen Sie nach Emmet, installieren Sie ihn und starten Sie die App erneut. Um eine Erweiterung auszulösen, drücken Sie einfach Tab nachdem Sie eine Abkürzung eingegeben haben.
Was sind deine Lieblingstipps?
Emmet ist zweifellos eines meiner absoluten Lieblings-Codierwerkzeuge. Vertrauen Sie mir, verwenden Sie es für ein paar Wochen und Sie werden nie wieder ohne Code programmieren wollen. Das spart jede Menge Arbeit und ist so viel intelligenter als Ihre typischen Code-Editor-Snippet-Funktionen.
Nun, da Sie meine Tipps gesehen haben, lassen Sie einige von Ihnen! Schreiben Sie unten einen Kommentar, in dem Sie mir sagen, wie Sie Emmet oder Zen Coding verwenden und welche Funktionen Ihre Favoriten sind.