:::: MENU ::::

Plugin Emmet: la stenotipia applicata a Sublime Text

Emmet e Sublime Text

Di plugin che prometto di velocizzare la scrittura di codice ne trovi a bizzeffe. Tutti fanno più o meno bene il proprio lavoro; alcuni sono più difficili da padroneggiare, altri hanno una curva di apprendimento meno ripida.

Tra tutti, quello che secondo me dà una pista a tutti è Emmet!

Avevo già accennato alla sua esistenza in un articolo dedicato a Sublime Text; oggi voglio parlarti di come funziona e voglio mostrarti come utilizzarlo alla grande! Allora, cosa aspetti a installare il plugin? Si parte!

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.

da Treccani

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.

Rimani sempre aggiornato sulle novità di MentaForte e ricevi contenuti esclusivi!

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.

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:

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:

Si possono assegnare classi e id in modo molto pratico, grazie ai caratteri punto (.) e cancelletto (#), o anche combinarli assieme:

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:

Comodo, no?

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 }).

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:

Bello, vero?

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:

ed espandere l’abbreviazione con il tasto tab; oppure, per impostare il padding del lato superiore al 5%:

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

    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.

Altre chicche

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:

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:

Riassumendo

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!

Rimani sempre aggiornato sulle novità di MentaForte e ricevi contenuti esclusivi!

PS. E' gratuito e spam-free! 😉


I commenti sono chiusi.