Emmet, precedentemente Zen Coding, è uno dei plug-in editor di testo più pratici e produttivi che tu possa mai vedere. Con la sua capacità di espandere istantaneamente le abbreviazioni semplici in snippet di codice complessi, Emmet ti fa sentire come un potente wizard di codifica con il mondo a portata di mano.
Come seguito del nostro precedente articolo sulle basi di Zen Coding, oggi ci tufferemo in sette fantastici suggerimenti per aiutarti a diventare un vero professionista Emmet.
1. Salta il Div
Il nostro primo suggerimento è che raramente hai bisogno di digitare? Div? nella tua macro. È allettante perché è quello che fai con ogni altro elemento HTML, ma i div sono speciali e richiedono davvero meno sforzo. Tutto ciò che devi fare è digitare un ID (usando un hashtag) o una classe (usando un punto) e Emmet assumerà che stai cercando di creare un div.
Come puoi vedere, entrambe le abbreviazioni producono lo stesso risultato. Dato che Emmet ti fa risparmiare tempo riducendo la quantità di digitazione richiesta, scatta sempre per il percorso più breve verso quello che vuoi.
Nomi di tag impliciti
Questa stranezza è in realtà parte di una funzionalità più ampia denominata? Nomi di tag impliciti ?, che tenta di interpretare il tag che si desidera in base al contesto. Si noti che non scrivo né? Div? o? li? nella mia abbreviazione, ma sono presupposti e inseriti nello snippet espanso finale.
2. Abbreviazioni a catena con DOM Navigation
Se stai usando Emmet per espandere semplici nomi di classe in div, bene per te, sei partito per una buona partenza. Il risparmio in tempo reale però viene raggiunto solo dopo aver imparato a creare macro più grandi che possono espandersi in una porzione significativa del markup.
La chiave per questo è di memorizzare e comprendere la sintassi che ti aiuterà a ramificarti in diversi livelli dell'albero del documento. Ci sono tre simboli importanti da tenere a mente:
Come puoi vedere,?> Var13 ->? ti permette di andare più in profondità nell'albero e creare un bambino,? +? ti permette di creare un nuovo elemento allo stesso livello del precedente (un fratello), e? ^? ti consente di risalire di un livello per creare un elemento. Per semplicità, iniziamo con i primi due.
Come puoi vedere, con il simbolo figlio (proprio come il selettore figlio in CSS), sono riuscito a posizionare il div interno all'interno del div esterno. Poi ho usato un altro simbolo figlio seguito dal simbolo fratello per posizionare sia l'h2 che il paragrafo sullo stesso livello all'interno del div interno.
Arrampicarsi
Ora andiamo avanti e guardiamo salire l'albero. Questo è un po 'più complicato per avvolgere la tua mente, ma è una fantastica nuova funzione Emmet che non avevamo in Zen Coding. Fondamentalmente, usando il? Move up? simbolo, possiamo uscire da un ramo in cui abbiamo iniziato a tuffarci. Ecco cosa intendo:
Come puoi vedere qui, abbiamo scavato nel primo paragrafo e inserito un tag di ancoraggio, ma poi abbiamo dovuto risalire e aggiungere un altro paragrafo allo stesso livello del precedente. Il? ^? il simbolo ci ha permesso di realizzare questo.
Per rendere questa funzione ancora più utile, puoi concatenare questi simboli per risalire su più livelli. Ad esempio, se aggiungessimo un elemento em alla nostra abbreviazione precedente, dovremmo salire di due livelli per posizionare il nostro prossimo paragrafo allo stesso livello del primo.
3. Usa il raggruppamento per semplificare la tua struttura
A volte scoprirai di aver scavato così in profondità in un particolare ramo che diventa un disordine confuso da incatenare insieme abbastanza da far salire i simboli per ottenere quello che vuoi. In questo caso, potrebbe semplificare un po 'le cose se invece si passi al raggruppamento. Questo si ottiene implementando parentesi attorno a diverse sezioni di codice.
Questo in realtà sembra più naturale e logico rispetto all'uso del simbolo di salita, e in realtà stiamo realizzando la stessa cosa. Puoi vedere che questo inizia davvero a dare i suoi frutti quando stai delineando una porzione più ampia della tua pagina.
4. Inserisci testo e attributi
Mentre stai marcando la tua pagina, il testo e gli attributi sono due cose che potresti aspettarti che non puoi eseguire con Emmet. Molti utenti delineano semplicemente un documento con questo strumento, quindi inseriscono gli spazi vuoti del contenuto dopo l'espansione. Questo è un ottimo modo per funzionare, ma se sei interessato, puoi inserire sia il testo che gli attributi usando la sintassi mostrata sotto.
Come ho mostrato sopra, il testo viene inserito tramite {parentesi graffe} e gli attributi utilizzano [parentesi quadre]. Tieni presente che le ancore in realtà inseriscono automaticamente un? Href? ma il valore per esso è lasciato vuoto di default, questa tecnica ti permette di riempirlo. Inoltre, ricorda che puoi usare parentesi graffe per creare qualsiasi attributo che ti piace, non solo quello mostrato qui.
5. Nomi di classi multiple su un singolo oggetto
Questo è semplicissimo, ma quando ho iniziato a utilizzare questo strumento, non mi è chiaro come aggiungere più nomi di classe a un singolo elemento. Risulta, tutto ciò che devi fare è digitare tutti i nomi di classe in una riga separati da punti.
6. Moltiplicazione
Questo è un altro dei miei preferiti. Puoi risparmiare un sacco di digitazione quando inserisci più elementi dello stesso tipo. Basta usare la seguente sintassi:
Funziona praticamente su qualsiasi cosa tu abbia bisogno, non importa quanto sia complicato. Prova ad associarlo con la funzione di raggruppamento che abbiamo visto prima per alcuni risultati interessanti.
7. Numerazione automatica
Il nostro settimo e ultimo suggerimento è che puoi inserire automaticamente numeri incrementali nei tuoi frammenti tramite il simbolo del dollaro. Funziona ovunque: classi, ID, testo, attributi, ecc. Ecco un esempio in azione:
Si noti che, più segni di dollaro si utilizzano, più cifre avrà il numero. Quindi, in primo luogo, ho usato $, che si espandeva in 1, 2 e 3.Quindi, nel secondo caso, ho utilizzato $$, che è stato ampliato in 01, 02 e 03.
Provali!
Ora che conosci un sacco di trucchi davvero incredibili da provare con Emmet, è ora di dare loro una possibilità. Colpisci la nostra pagina demo Emmet e prova alcune delle abbreviazioni che abbiamo esaminato sopra. Ecco un elenco di ogni abbreviazione in questo articolo in testo semplice per la tua comodità di copia e incolla.
Assicurati inoltre di aprire la home page di Emmet, dove puoi imparare di più e provarlo subito.
Come posso espandere le abbreviazioni?
L'espansione può essere diversa in ogni editor e in genere richiede un plug-in. In Sublime Text 2, apri Gestione pacchetti, cerca Emmet, installalo, quindi riavvia l'app. Per attivare un'espansione, basta premere linguetta dopo aver digitato un'abbreviazione.
Quali sono i tuoi consigli preferiti?
Emmet è senza dubbio uno dei miei strumenti di codifica preferiti in assoluto. Fidati di me, usalo per qualche settimana e non vorrai più codificarlo senza di nuovo. Risparmia tantissimo lavoro ed è molto più intelligente della tipica funzionalità di snippet dell'editor di codice.
Ora che hai visto i miei consigli, lasciane alcuni! Scrivi un commento qui sotto che mi dice come usi Emmet o Zen Coding e quali caratteristiche sono le tue preferite.