Molteplici volte capita di perdere letteralmente tantissimo tempo, soprattutto per coloro che sono alle prime armi, nello scrivere codice. Per risolvere questo problema sono stati creati innumerevoli tools (plugins), che ci mettono a disposizione delle abbreviazioni dedite ad auto completare il nostro codice HTML e CSS.
Uno dei più conosciuti ed utilizzati è appunto EMMET, che non solo si occupa di prendere una stringa e di espanderla creando una struttura ben definita, ma di molto altro.
Per poter utilizzare EMMET, devi prima installarlo all’interno dell’editor di testo che hai deciso di utilizzare.
Gli editor di testo più moderni e più utilizzati hanno un gestore di pacchetti interno, che ci permette di installare e attivare EMMET in pochissimo tempo.
Alcuni ide (editor di testo), come ad esempio Visual Studio Code, hanno questa funzionalità integrata.
Se il tuo editor non presenta un gestore di estensioni, ti consiglio vivamente di utilizzarne un altro più moderno e performante.
Dopo averlo installato è arrivato il momento di concentraci sul suo funzionamento.
Le scorciatoie da tastiera possono cambiare in base al tuo editor di testo e al tuo sistema, quindi controlla nelle impostazioni per visualizzare e modificare i comandi.
Adesso vediamo passo per passo degli esempi che ti consentiranno di apprendere al meglio come utilizzare questo fantastico tool.
Per creare la struttura HTML completa ti basterà scrivere html:5 e premere il tasto TAB.
Con EMMET puoi creare un tag HTML div specificando la classe o l’id che vogliamo aggiungere all’elemento.
Ti basterà digitare il nome della classe o dell’id preceduto rispettivamente dal punto (.) o dal cancelletto (#) e spingere TAB.
Otteniamo:
La peculiarità di questo potentissimo strumento è quella di poter creare intere strutture HTML in un tempo irrisorio.
Se per esempio volessimo creare un elenco all’interno dell’elemento footer, digita questo codice e premi TAB.
Risultato:
Con una facilità impressionante sei riuscito a creare questa struttura composta dall’elemento footer con all’interno una lista non ordinata caratterizzata da 5 voci. I due simboli utilizzati > e * indicano rispettivamente l’elemento contenuto all’interno e quante ricorrenze ci sono di quell’elemento.
Puoi inserire anche attributi utilizzando questa specifica sintassi:
Risultato:
Dopo aver visto tutto questo possiamo soffermarci su come inserire del contenuto in maniera veloce e automatica.
Risultato:
In questo specifico caso ci soffermiamo sull’utilizzo del simbolo $, che ti ha permesso di creare un id univoco per ogni elemento della lista in maniera automatica e soprattutto rispettando l’ordine dello stesso.
Invece per quanto concerne l’utilizzo delle parentesi, quest’ultime servono per inserire all’interno del contenuto testuale personalizzato.
In questo articolo abbiamo analizzato in maniera accurata, alcune delle principali funzionalità di EMMET.
Consulta la documentazione ufficiale https://docs.emmet.io/ per approfondire l’argomento.
Personalmente ti consiglio di usarlo e di imparare ad utilizzare al meglio questi piccoli trucchetti che ti agevoleranno nel lavoro in maniera notevole.
