Visual Studio Code: html rapido (Emmet)

Nel mondo moderno della programmazione la parte in HTML molto spesso è una delle parti più noiose e ripetitive. Oltretutto nella “pila” di linguaggi base che serve sapere riveste, almeno ad oggi, un valore piuttosto basso.

Però HTML rimane, come indica la m della sigla, un linguaggio di markup, quindi le cose vanno scritte nel modo corretto, e spesso questo finisce con il diventare una mezza seccatura.

Visual Studio code permette di accorciare di parecchio questo processo, grazie alle istruzioni integrate di Emmet. Ecco quindi alcune indicazioni per procedere in modo sorprendentemente veloce.

Inizializzare un file HTML

Sicuramente la parte più “boring” è proprio l’inizio, bisogna ricordarsi una serie di tag quali html, head, body eccetera senza contare le dichiarazioni di sito responsive. Se ci dovessimo mettere a scrivere tutta questa roba ogni volta perderemmo un sacco di tempo. Visual Studio Code ci permette di richiamare tutto con un click!

Una volta creato il nostro file e dichiarato come html, attraverso il salvataggio del file con tale estensione oppure dichiarando il linguaggio cliccando in basso a destra su “selezione modalità linguaggio” avremo accesso alle scorciatoie. Ora se nella pagina scriviamo la parola html apparirà un menu contestuale come quello che vedete qui sotto:

Ci sono varie opzioni, se scegliamo quella denominata html:5 avremo il risultato che vedete qui sopra.

Scorciatoie utili

Chiaramente all’interno del body andremo a scrivere dell’altro codice, tutti i tag sono richiamabili attraverso la loro funzione, per cui scrivendo div interverrà il sistema di Emmet a compilare il tag con tanto di apertura e chiusura. Questo vale anche per tutti gli altri tipi di tag, come “p”, “span” eccetera.

Fino a qui nulla di particolare, molti editor procedono in questo modo. E’ molto probabile però che, prendendo in esame per mera semplicità di spiegazione il tag div, abbiamo il desiderio di indicare una classe CSS oppure un ID. Quindi invece di scrivere div, lasciarlo compilare ad Emmet e poi andare al suo interno e scrivere class=”myClass” possiamo intervenire direttamente come vediamo da esempio sottostante:

Emmet capirà cosa gli stiamo chiedendo, con il punto sarà in grado di capire che si tratta di una classe css, con il # invece che si tratta di un ID, per altro tale sistema è del tutto identico a quello di Jquery, per cui è probabile che ad alcuni di voi sia familiare.

Possiamo anche pensare di unire entrambe le cose indicando sia CSS che ID:

div.myClass#myId
<!-- otteremo: -->
<div class="myClass" id="myId"></div>

Talvolta le classi possono essere più di una nel singolo tag, in quel caso le scriveremo di seguito intervallate del solito “punto”, verrano riconosciute come classi CSS addizionali.

Ora immaginiamo di voler fare qualcosa di ancora più complicato, vogliamo un div, con una classe, con al suo interno un paragrafo, con una certa classe, uno span con una id e una immagine

div.myClass>p.secondClass>span#myID+img
<!-- otterremo: -->
        <div class="myClass">
            <p class="secondClass">
				<span id="myID"></span>
				<img src="" alt="">
			</p>
        </div>

Come si può vedere abbiamo creato il div, poi abbiamo indicato il paragrafo ma prima abbiamo anteposto il simbolo >. Questo indica di creare quello che segue il simbolo in modalità nidificata, cioè gerarchicamente sotto il div. All’interno del paragrafo, anch’esso nidificato, lo span e la immagine che però sono sullo stesso livello, ed infatti in quel caso abbiamo utilizzato il + per concatenarli.

Facciamo un ulteriore passo in avanti, spesso quando si creano le liste ordinate o non ordinate, tocca indicare lista per lista, se poi queste necessitano ad esempio di un ID la cosa si fa lunga da scrivere. Non per Emmet, che con una semplice riga risolve tutto. Vediamo il seguente esempio:

ul>li#myId$*5
<!-- otteremo: -->
    <ul>
        <li id="myId1"></li>
        <li id="myId2"></li>
        <li id="myId3"></li>
        <li id="myId4"></li>
        <li id="myId5"></li>
    </ul>

Fantastico! abbiamo indicato una Unordered list (ul) e nidificata una lista (li) con una ID specifica che ho scelto io. A questa con il simbolo $ moltiplicato (*) cinque volte ci ha permesso di creare una lista con ID univoci scrivendo pochissimi caratteri!

Possiamo anche precompilare l’interno di un tag, l’esempio precedente può essere espanso con un testo sequenziale in H1:

ul>li#myId$*5>h1{titolo $}
<!-- otteremo: -->
    <ul>
        <li id="myId1">
            <h1>titolo 1</h1>
        </li>
        <li id="myId2">
            <h1>titolo 2</h1>
        </li>
        <li id="myId3">
            <h1>titolo 3</h1>
        </li>
        <li id="myId4">
            <h1>titolo 4</h1>
        </li>
        <li id="myId5">
            <h1>titolo 5</h1>
        </li>
    </ul>

In questo caso abbiamo omesso il valore dell’ultimo $ poiché resta valido il primo, essendo quest’ultimo un titolo nidificato ad una lista ci viene perfetto per il nostro scopo.

Conclusioni

Ci sono molte altre funzioni di Emmet interessanti. C’è tutta la parte relativa ai CSS che però ammetto di non conoscere o di non trovare utile, ma se siete dei CSS Coder la cosa sicuro è diversa. Emmet nella versione 2.0 è integrata nativamente in Visual Studio Code, quindi non si deve fare nessuna configurazione o installazione. Vedremo in un futuro post che sarà possibile anche inserire delle scorciatoie create da noi e quindi altamente personalizzate.