Source: https://mentaforte.it/emmet-e-sublime-text/
Timestamp: 2017-08-19 20:27:18+00:00

Document:
stenotipìa s. f. [comp. di steno(grafia) e -tipia]. – Sistema e tecnica di abbreviazione della scrittura per mezzo di speciali macchine, realizzata sia con lettere alfabetiche (sistema Grandjean) sia con segni stenografici (sistema Michela), impressi via via su una striscia di carta.
A parte i chiari riferimenti a tecnologie analogiche (macchina, striscia di carta), la descrizione di stenotipia si adatta abbastanza bene a quello che è il plugin Emmet. Si tratta di una estensione disponibile per diversi editor di testo (tra questi Sublime Text) che, grazie a un potente e performante gestore di macro, ti aiuta nella stesura del codice, abbreviandone la digitazione grazie a “shortcodes” che vengono successivamente espansi per lasciare posto al codice vero e proprio.
PS. E' gratuito e spam-free! 😉
Nelle prossime righe ti mostrerò come creare un’intera pagina web digitando un solo carattere (wow!) e quali shortcodes utilizzare per velocizzare al massimo la stesura del codice, sia HTML che CSS.
Una pagina web da un semplice carattere?
Non ci credi? Prova allora a creare un nuovo documento html in Sublime Text, quindi inserisci un punto esclamativo (!) in un punto qualsiasi, premi il tasto TAB e… ta-daaaa! Emmet sostituirà il punto esclamativo con il codice di una pagina html completa.
Espansione del carattere !
! <!-- + tasto TAB: --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
! <!-- + tasto TAB: -->
Ovviamente questa è soltanto la punta dell’iceberg. Con un po’ di pratica si possono creare blocchi di codice molto complessi con poche pressioni di tasti.
Ad esempio, ogni tag html viene chiuso automaticamente e il cursore viene spostato nel punto in cui ci si aspetta che venga inserito del testo:
Espansione del tag div
div <!-- + tasto TAB --> <div></div>
div <!-- + tasto TAB -->
Oppure, nel caso in cui il tag html richieda dei parametri ulteriori, con il tasto tab ci si può spostare nei punti in cui vanno inseriti:
Espansione del tag a
a <!--+ tasto TAB --> <a href=""></a>
a <!--+ tasto TAB -->
Si possono assegnare classi e id in modo molto pratico, grazie ai caratteri punto (.) e cancelletto (#), o anche combinarli assieme:
.mia_classe <!-- + tasto TAB --> <div class="mia_classe"></div> #mio_id <!-- + tasto TAB --> <div id="mio_id"></div> .mia_classe#mio_id <!-- + tasto TAB --> <div class="mia_classe" id="mio_id"></div>
.mia_classe <!-- + tasto TAB -->
<div class="mia_classe"></div>
#mio_id <!-- + tasto TAB -->
<div id="mio_id"></div>
.mia_classe#mio_id <!-- + tasto TAB -->
<div class="mia_classe" id="mio_id"></div>
Abbreviazioni ovunque
Ma la caratteristica che rende il plugin Emmet davvero irrinunciabile è la possibilità di concatenare abbreviazioni e shortcuts.
Ti faccio un classico esempio per comprenderne la potenza.
Supponiamo di voler creare un elenco puntato contenente 5 immagini con le quali aprire 5 URL:
Esempio di iterazione
ul>li*5>a[href="#"]>img[src="img/immagine$$.png" alt="Immagine n.$$"] <!-- + tasto TAB --> <ul> <li><a href="#"><img src="img/immagine01.png" alt="Immagine n.01"></a></li> <li><a href="#"><img src="img/immagine02.png" alt="Immagine n.02"></a></li> <li><a href="#"><img src="img/immagine03.png" alt="Immagine n.03"></a></li> <li><a href="#"><img src="img/immagine04.png" alt="Immagine n.04"></a></li> <li><a href="#"><img src="img/immagine05.png" alt="Immagine n.05"></a></li> </ul>
ul>li*5>a[href="#"]>img[src="img/immagine$$.png" alt="Immagine n.$$"]
<!-- + tasto TAB -->
<li><a href="#"><img src="img/immagine01.png" alt="Immagine n.01"></a></li>
<li><a href="#"><img src="img/immagine02.png" alt="Immagine n.02"></a></li>
<li><a href="#"><img src="img/immagine03.png" alt="Immagine n.03"></a></li>
<li><a href="#"><img src="img/immagine04.png" alt="Immagine n.04"></a></li>
<li><a href="#"><img src="img/immagine05.png" alt="Immagine n.05"></a></li>
Dall’esempio qui sopra probabilmente avrai già capito alcune cose interessanti. Ad esempio, non c’è nessun bisogno di ripetere per cinque volte il codice relativo al tag <li>. E’ sufficiente moltiplicarlo per il numero di volte che ti serve e il gioco è fatto!
Il carattere > indica invece che il tag successivo è gerarchicamente “figlio” del precedente. Analogamente, il carattere + indica che il tag è dello stesso livello gerarchico del precedente; grazie al carattere ^ si può invece inserire un tag di livello gerarchico superiore rispetto al precedente.
Il carattere $ viene invece sostituito con il numero dell’iterazione corrente.
Le parentesi quadre ([ e ]) servono per assegnare dei valori ai parametri del tag, mentre, per per inserire del testo tra un tag di apertura e di chiusura, si utilizzano le parentesi graffe ({ e }).
Assegnazione di parametri
article[value="mio valore"] <!-- + tasto TAB --> <article value="mio valore"></article> article{testo del mio articolo} <!-- + tasto TAB --> <article>testo del mio articolo</article>
article[value="mio valore"] <!-- + tasto TAB -->
<article value="mio valore"></article>
article{testo del mio articolo} <!-- + tasto TAB -->
<article>testo del mio articolo</article>
Senza dilungarmi ulteriormente, ti voglio mostrare un esempio che racchiude un po’ tutto quello che Emmet può fare. Lo snippet qui sotto mostra la creazione di una pagina web completa di header, corpo, sidebar e footer, sempre grazie alle abbreviazioni:
Una pagina completa di tutto!
!>(header>h1>{Titolo principale})+(.content>(article.article_id-$*5>(.article-header>h2{Titolo articolo $}^+.article-body>lorem*2>^^.article-footer>a[href="#"]>{Read more...})))+(footer>.copyright>{&copy; 2015 MentaForte}) <!-- + tasto TAB --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <header> <h1>Titolo principale</h1> </header> <div class="content"> <article class="article_id-1"> <div class="article-header"> <h2>Titolo articolo 1</h2> </div> <div class="article-body"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In non cupiditate consequatur, a eum, sint ullam magnam unde commodi eaque quis harum corporis blanditiis, excepturi exercitationem beatae ut? In, dolorum.</div> <div>Mollitia recusandae ad aliquam, dolorem eligendi cumque commodi earum quia soluta rerum, impedit. Inventore id temporibus maiores, minus voluptatum quidem quos, dicta error, minima illo, libero reiciendis ipsam ut aut!</div> </div> <div class="article-footer"><a href="#">Read more...</a></div> </article> <article class="article_id-2"> <div class="article-header"> <h2>Titolo articolo 2</h2> </div> <div class="article-body"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates at illo ab doloribus a est voluptas aliquid dolore optio repudiandae quaerat, saepe cum magnam eos nostrum fugit minus possimus nesciunt.</div> <div>Repudiandae facilis porro ex, vitae dolorem deserunt aut eos. Possimus tempore neque veritatis itaque, eius, alias atque dolores eum placeat consectetur est, voluptate incidunt provident. Earum ad eveniet vero repellat.</div> </div> <div class="article-footer"><a href="#">Read more...</a></div> </article> <article class="article_id-3"> <div class="article-header"> <h2>Titolo articolo 3</h2> </div> <div class="article-body"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione et commodi beatae. Ab modi, quibusdam explicabo minima laudantium ratione nostrum consectetur tenetur magnam recusandae suscipit eveniet, quas. Similique, fugit, totam.</div> <div>Magnam nisi, nulla inventore, accusantium asperiores exercitationem. Voluptates error optio, nulla iure sunt nisi delectus dolorem eveniet, laborum omnis. Incidunt et minus voluptas, esse doloremque quidem omnis placeat, vitae. Tenetur.</div> </div> <div class="article-footer"><a href="#">Read more...</a></div> </article> <article class="article_id-4"> <div class="article-header"> <h2>Titolo articolo 4</h2> </div> <div class="article-body"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, eligendi numquam earum quas magnam? Ea quas a, maxime alias corporis nostrum et est doloremque quaerat quam dicta deserunt officiis, praesentium.</div> <div>Ullam eaque ipsa non repellendus perferendis modi vero rerum omnis necessitatibus velit minima doloribus, itaque voluptatum vel, esse quasi, deleniti nobis saepe commodi. Quos explicabo nemo quis eligendi, nesciunt optio.</div> </div> <div class="article-footer"><a href="#">Read more...</a></div> </article> <article class="article_id-5"> <div class="article-header"> <h2>Titolo articolo 5</h2> </div> <div class="article-body"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, quidem maxime a necessitatibus, quasi error provident eum quod fugit, nesciunt alias quis dolor est animi magnam ut. Eligendi ducimus, magni?</div> <div>Mollitia est quos nemo natus quibusdam sit rerum, amet laboriosam? Perferendis accusantium, quia mollitia totam facilis repellat aut dolor dolore illum ducimus, deserunt possimus similique cupiditate! Qui delectus voluptates vitae.</div> </div> <div class="article-footer"><a href="#">Read more...</a></div> </article> </div> <footer> <div class="copyright">&copy; 2015 MentaForte</div> </footer> </body> </html>
!>(header>h1>{Titolo principale})+(.content>(article.article_id-$*5>(.article-header>h2{Titolo articolo $}^+.article-body>lorem*2>^^.article-footer>a[href="#"]>{Read more...})))+(footer>.copyright>{&copy; 2015 MentaForte})
<article class="article_id-1">
<h2>Titolo articolo 1</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In non cupiditate consequatur, a eum, sint ullam magnam unde commodi eaque quis harum corporis blanditiis, excepturi exercitationem beatae ut? In, dolorum.</div>
<div>Mollitia recusandae ad aliquam, dolorem eligendi cumque commodi earum quia soluta rerum, impedit. Inventore id temporibus maiores, minus voluptatum quidem quos, dicta error, minima illo, libero reiciendis ipsam ut aut!</div>
<div class="article-footer"><a href="#">Read more...</a></div>
<article class="article_id-2">
<h2>Titolo articolo 2</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates at illo ab doloribus a est voluptas aliquid dolore optio repudiandae quaerat, saepe cum magnam eos nostrum fugit minus possimus nesciunt.</div>
<div>Repudiandae facilis porro ex, vitae dolorem deserunt aut eos. Possimus tempore neque veritatis itaque, eius, alias atque dolores eum placeat consectetur est, voluptate incidunt provident. Earum ad eveniet vero repellat.</div>
<article class="article_id-3">
<h2>Titolo articolo 3</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione et commodi beatae. Ab modi, quibusdam explicabo minima laudantium ratione nostrum consectetur tenetur magnam recusandae suscipit eveniet, quas. Similique, fugit, totam.</div>
<div>Magnam nisi, nulla inventore, accusantium asperiores exercitationem. Voluptates error optio, nulla iure sunt nisi delectus dolorem eveniet, laborum omnis. Incidunt et minus voluptas, esse doloremque quidem omnis placeat, vitae. Tenetur.</div>
<article class="article_id-4">
<h2>Titolo articolo 4</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, eligendi numquam earum quas magnam? Ea quas a, maxime alias corporis nostrum et est doloremque quaerat quam dicta deserunt officiis, praesentium.</div>
<div>Ullam eaque ipsa non repellendus perferendis modi vero rerum omnis necessitatibus velit minima doloribus, itaque voluptatum vel, esse quasi, deleniti nobis saepe commodi. Quos explicabo nemo quis eligendi, nesciunt optio.</div>
<article class="article_id-5">
<h2>Titolo articolo 5</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, quidem maxime a necessitatibus, quasi error provident eum quod fugit, nesciunt alias quis dolor est animi magnam ut. Eligendi ducimus, magni?</div>
<div>Mollitia est quos nemo natus quibusdam sit rerum, amet laboriosam? Perferendis accusantium, quia mollitia totam facilis repellat aut dolor dolore illum ducimus, deserunt possimus similique cupiditate! Qui delectus voluptates vitae.</div>
<div class="copyright">&copy; 2015 MentaForte</div>
Voglio darti un consiglio gratis.
Evita come la peste di usare una macro come questa.
Anche se puoi farlo, è sempre preferibile non scrivere una riga di comando così lunga, ma spezzettarla in più parti e inserirle dove servono.
Emmet è nato per velocizzare la stesura del codice. Se devi perdere tempo nel pensare a come organizzare le abbreviazioni, probabilmente lo stai utilizzando nel modo sbagliato!
E per i fogli di stile CSS?
Ce n’è anche per i fogli di stile, non preoccuparti, e anche qui troverai il gestore di macro di Emmet davvero imbattibile, perché riconosce delle abbreviazioni dei comandi css davvero “spontanee”. Non dovrai ricordare strane combinazioni di caratteri, ma ti basterà digitare la prima abbreviazione che ti viene in mente per ottenere il risultato voluto. Così, ad esempio, per impostare il margine di un selettore a 15px, basterà digitare:
Emmet e fogli di stile
.mia_classe { m15 /* + tasto TAB */ } .mia_classe { margin: 15px; }
.mia_classe {
m15 /* + tasto TAB */
ed espandere l’abbreviazione con il tasto tab; oppure, per impostare il padding del lato superiore al 5%:
Ancora fogli di stile
.mia_classe { pt5p /* + tasto TAB */ } .mia_classe { padding-top: 5%; }
pt5p /* + tasto TAB */
Lascio a te il piacere di giocherellare con le abbreviazioni per scoprirne di altre. In ogni caso, sulla pagina web di Emmet c’è un ottimo cheat sheet dove le troverai tutte.
Oltre alle abbreviazioni, troverai una serie di combinazioni di tasti che imparerai a padroneggiare in pochissimo tempo. Te ne riporto alcune davvero utilissime:
ctrl+ù commenta l’intera linea dove si trova il cursore
alt+freccia su (freccia giù) incrementa (decrementa) di 0.1 il valore numerico sotto al cursore
ctrl+freccia su (freccia giù) incrementa (decrementa) di 1 il valore numerico sotto al cursore
alt+shift+freccia su (freccia giù) incrementa (decrementa) di 10 il valore numerico sotto al cursore
ctrl+shift+r aggiorna tutti i valori dei vari “vendor prefixes“: ad esempio, supponiamo di voler inserire la proprietà border-radius in un selettore css
Gestione dei vendor prefixes
.mia_classe{ -wmso-bdrs /* + tasto TAB */ } .mia_classe{ -webkit-border-radius: ; -moz-border-radius: ; -ms-border-radius: ; -o-border-radius: ; border-radius: ; }
.mia_classe{
-wmso-bdrs /* + tasto TAB */
-ms-border-radius: ;
-o-border-radius: ;
L’abbreviazione viene espansa e vengono creati 5 cursori di inserimento, uno per ogni vendor prefix. Dopo avere impostato il valore a 1px, supponiamo di volerlo aumentare a 2px. In questo caso ti basterà modificarne uno soltanto e premere la combinazione di tasti ctrl+shift+r per aggiornarli tutti al nuovo valore.
Hai bisogno di testare la tua pagina web con del testo a caso? Emmet dispone anche di un generatore di “Lorem ipsum“! Ti basta scrivere lorem e premere il tasto tab per avere un paragrafo in stile Lorem ipsum di 30 parole.
Puoi anche decidere quante parole generare, specificandone la quantità dopo il comando. Nell’esempio seguente vengono generate 18 parole:
Generatore di Lorem ipsum in azione
p>lorem18 <!-- + tasto TAB --> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, vero, amet. Accusamus, soluta error eius et numquam, nulla.</p>
p>lorem18 <!-- + tasto TAB -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, vero, amet. Accusamus, soluta error eius et numquam, nulla.</p>
Ancora! Hai bisogno di effettuare un calcolo al volo e non trovi mai la calcolatrice? Niente paura! Emmet risolve anche questo problema: la combinazione di tasti ctrl+shift+y effettua il calcolo dell’operazione matematica inserita:
15*4-3/7 /* ctrl+shift+y */ 59.57
15*4-3/7 /* ctrl+shift+y */
Secondo me Emmet è un plugin davvero strabiliante, perché ti semplifica la vita senza richiedere di imparare shortcuts complicati. Tutto è dove ti aspetti di trovarlo e funziona esattamente come lo faresti funzionare se fossi tu a deciderlo.
Tu invece quale tool usi per velocizzare la scrittura di codice? E se già usi Emmet, quale caratteristica trovi davvero irrinunciabile? Fammelo sapere qui sotto nei commenti!

References: articolo 1
 articolo 2
 articolo 3
 articolo 4
 articolo 5
 articolo 1
 articolo 2
 articolo 3
 articolo 4
 articolo 5