Emmet, precedentemente noto come Zen Coding, è uno dei migliori strumenti che si dovrebbero avere per aumentare la produttività durante la codifica di HTML o CSS. Funziona proprio come il completamento del codice, ma è più potente e sorprendente. È in grado di automatizzare il tuo HTML / CSS da un semplice modulo a quello complesso.
Emmet offre un valido supporto per editor di testo o IDE (Integrated Development Environment) come Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad ++, PHPStorm e molti altri. Supporta anche strumenti di editing online come JSFiddle, JSBin, CodePen, IceCoder e Codio .
Il modo in cui Emmet funziona è digitando il tasto della tastiera quando si scrive la sintassi. Di seguito sono riportati i simboli Emmet più comuni che è possibile utilizzare. Per vederli in azione, continua a leggere.
Emmet: i migliori trucchi HTML
Rimarrai stupito quando scrivi HTML con Emmet come ho fatto io. Come affermato in precedenza, Emmet è in grado di abbreviare un semplice HTML a uno molto complesso. E sono scritti solo su una singola riga di codice. Per impostazione predefinita, se abbrevia il nome del tag sconosciuto, Emmet scriverà automaticamente il tag che scrivi. Guarda l'animazione qui sotto per capirlo facilmente.
1. Nesting
Per nidificare alcuni elementi è sufficiente aggiungere un segno più grande > dopo ogni tag che si desidera utilizzare. Ad esempio, quando voglio avere header con nav, div, ul e li dentro ho solo bisogno di digitare header>nav>div>ul>li e il tasto tab colpito.
2. Fratello e sorella
Se non vuoi nidificare i tuoi elementi, puoi semplicemente usare un segno più + seguito dai tag che vuoi aggiungere. Esempio, l' header+section+article+footer darà una posizione diversa per header, section, article e footer .
3. Salire
Quando sei all'interno di un elemento figlio e vuoi avere un altro elemento al di fuori di quel bambino, puoi facilmente salire di un elemento con ^ segno. Se lo digiti due volte, salirai sul doppio elemento e così via. Ad esempio, se digiti header>div>h1>nav, avrai ancora l'elemento nav all'interno di h1. Per estrarlo, basta sostituire l'ultimo > segno con ^ .
4. Aggiungi classe
Emmet è anche in grado di includere il nome della tua classe preferita all'interno del tag. Il segno che userai è lo stesso del selettore di classe in CSS che è un punto . cartello. Per esempio, se voglio avere un div con .container class, h1 con .title e nav con .fixed, allora devo solo scrivere div.container>header>h1.title+nav.fixed .
Se vuoi avere più di una classe dentro, digita la tua classe addizionale dopo la prima classe insieme al punto . cartello. Esempio: div.container.center produrrà .
5. Aggiungi ID
Oltre alla classe, puoi anche aggiungere un ID all'interno del tuo tag con il segno # . L'utilizzo è lo stesso come l'aggiunta di una classe, ma non è possibile digitare un doppio ID all'interno. Se provi a farlo, Emmet leggerà solo l'ultimo ID digitato.
6. Aggiungi testo
Emmet non è solo così semplice come abbrevia solo alcuni tag, puoi persino aggiungere una riga di testo all'interno. Per aggiungere del testo, devi solo avvolgere il testo con il segno parentesi graffa {} . Non è necessario aggiungere un segno > più grande poiché il testo verrà aggiunto automaticamente all'interno del tag.
7. Aggiungi attributo
Se si desidera aggiungere un altro attributo oltre a class e id, basta posizionare l'attributo che si desidera aggiungere all'interno del segno parent [] . Per esempio, voglio avere un'immagine che abbia logo.png fonte con logo alt, quindi scrivo solo img[src="logo.png"] .
8. Raggruppamento
Quando vuoi avere un elemento con più nidi all'interno, allora il raggruppamento con il segno () ti aiuterà a farlo facilmente. Esempio, voglio avere un contenitore che abbia un'intestazione con h1 e nav all'interno e un'altra sezione al di fuori dell'intestazione, scriverò semplicemente: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Moltiplicazione
Questa funzione potrebbe diventare una delle tue preferite da Emmet. Come con la moltiplicazione, possiamo moltiplicare qualsiasi elemento tanto quanto vogliamo. Per usarlo basta aggiungere un asterisco * dopo l'elemento che vuoi moltiplicare e aggiungere il numero dell'elemento. Ad esempio, voglio scrivere cinque elementi all'interno di ul, quindi la sintassi corretta è ul>li*5 .
10. Numerazione automatica
La numerazione automatica ti aiuterà a scrivere facilmente un nome diverso con un numero crescente. La sintassi corretta per questa funzione è un segno $ dollar. La numerazione automatica è utilizzata al meglio con la moltiplicazione. Esempio, voglio aggiungere il mio precedente oggetto li con una classe da item5 a item5 . Quindi, devo solo aggiungere altro nome di classe con il simbolo del dollaro: ul>li.item$*5 .
11. Lorem
Se si scriveva un testo fittizio aprendo un generatore di labbra come lipsum.com, con Emmet non è più necessario farlo. Emmet supporta anche un generatore di testo fittizio con la sintassi di lorem o lipsum . Puoi anche specificare per quanto tempo il tuo testo diventerà. Per esempio, voglio avere un testo lungo 10 parole, quindi lorem10 .
12. Documento automatico
Quando stai iniziando un nuovo progetto, invece di scrivere la struttura html manualmente o copiare incollare da altre risorse, Emmet può farlo meglio per te. Tutto quello che devi fare è digitare un punto esclamativo ! firma, premi scheda e la magia accade. Questo genererà una struttura di documenti HTML5 per te, se invece vuoi usare un HTML4, digita semplicemente html:4t .
13. Link
Se hai un file favicon, rss o file CSS esterno che vuoi aggiungere al tuo documento, puoi usare i trucchi del link per scriverli più velocemente. Per includere un favicon, digita link:favicon quindi ti genererà un link favicon con il nome del file favicon.ico predefinito all'interno. E per css, link:css ti genererà un link CSS con il nome di stile style.css predefinito all'interno. E RSS sarà rss.xml come nome predefinito.
Puoi combinarli con il segno più + per generare risorse più veloci.
14. Ancora
Per impostazione predefinita, quando si digita a tag e poi si preme tab, si otterrà a tag completo con l'attributo href all'interno. Ma è possibile aggiungere un // valore se lo si combina con il collegamento ad esempio a:link . E se vuoi avere un link per la posta, usa a:mail .
15. Smart Skipping
Gli ultimi trucchi HTML che ti darò sono la funzione di salto intelligente. Fondamentalmente, non hai scritto il nome del tag quando vuoi avere classe o id al suo interno. Questo si applica solo a certe condizioni.
Innanzitutto, se vuoi avere un div con ID o classe all'interno, non è necessario scrivere il nome del tag, basta scrivere direttamente id o il simbolo della classe insieme al suo nome.
In secondo luogo, quando ci si trova all'interno di un tag ul, si salta la scrittura del tag li se ha una classe o un id.
E l'ultimo è applicato all'interno del tag table . Puoi saltare i tag tr e td se hanno classe o id e Emmet li aggiungerà automaticamente per te.
Emmet: i migliori trucchi CSS
Dopo aver imparato alcuni trucchi HTML, ora è il momento per il CSS. Alcuni dei simboli comuni mostrati nell'immagine in alto non funzionano con i CSS. Sono più grandi > e si arrampicano su ^ simboli. Se li usi, produrranno proprio come + più simbolo. Quindi, andiamo.
1. Larghezza e altezza
Definire width e height con Emmet è molto semplice. Devi solo scrivere la prima parola di loro seguita dalla dimensione che vuoi aggiungere. Di default, se non si specificano le unità, Emmet le genererà con unità px . Il simbolo dell'unità disponibile è% % ed em .
2. Testo
Ci sono alcuni simboli di proprietà di testo facili da usare e verranno generati con il valore predefinito. ta genererà l' text-align con il valore di left, td sarà la text-decoration con none valore e tt diventerà la trasformazione del text-transform con il valore uppercase .
3. Contesto
Per aggiungere uno sfondo, usa semplicemente l'abbreviazione di bg . Puoi combinarlo con bgi per ottenere background-image, bgc per background-color e bgr per background-repeat . Puoi anche scrivere bg+ per ottenere un elenco completo delle proprietà dello sfondo.
4. Faccia carattere
Il segno più non è applicabile solo per lo sfondo. Per @font-face, puoi semplicemente scrivere @f+ per un elenco completo della proprietà @font-face . Se digiti @f senza segno più, otterrai solo un @font-face .
5. Varie
Altri grandi trucchi sono che puoi abbreviare la scrittura animation con il testo animation . Se aggiungi un segno meno, otterrai la proprietà di animazione con valore completo. C'è anche il testo @kf che produrrà l'elenco completo di @keyframe .
Conclusione
Emmet è un enorme strumento per risparmiare tempo per semplificare il processo di sviluppo. Se conosci Emmet, non è troppo tardi per provarlo ora. Quei trucchi sono solo alcune delle caratteristiche di Emmet. Ci sono tonnellate di altri simboli e sintassi in Emmet, specialmente per i CSS. Basta andare su documenti Emmet o cheat sheet per migliorare la tua lettura.
