Visual Studio Code et Emmet - Coder plus vite avec Emmet
Chapitre 4 - Coder plus vite avec Emmet

Généralités

Attention :
A cause de GitHub copilot, la touche Tab est utilisée pour valider les suggestions de code. Il est donc nécessaire de désactiver cette fonctionnalité pour que Emmet fonctionne correctement.
Il est possible de désactiver la suggestion de code pour la touche Tab. Pour cela, il faut aller dans les paramètres de VS code et rechercher Copilot. Il faut ensuite décocher la case Copilot: Enable Inline Suggestion.

Présentation du plugin Emmet

Emmet n'est pas exclusif à VS code, mais il est intégré par défaut dans cet éditeur. Le site internet d'Emmet est www.emmet.io.
Depuis cette page, il est possible de télécharger le plugin. En cliquant sur le bouton Download, la nouvelle page affiche les différents éditeurs compatibles avec Emmet.

Ecriture des balises

Emmet permet d'écrire rapidement des balises HTML. Par exemple, pour créer une balise div, il suffit de taper div et d'appuyer sur la touche Tab. Cela génère automatiquement la balise complète : <div></div>. Le focus sera entre la balise ouvrante et la balise fermante, permettant de commencer à écrire immédiatement.
Ce principe est également valable pour les balises seules ainsi que pour les balises avec des attributs obligatoires.

Lors de l'insertion d'une balise avec un attribut obligatoire, Emmet place le curseur dans l'attribut, prêt à être rempli. Par exemple, en tapant a et en appuyant sur Tab, Emmet génère la balise <a href=""></a> avec le curseur positionné dans les guillemets de l'attribut href. Une fois l'attribut rempli, il suffit d'appuyer sur Tab pour que le curseur se déplace à l'intérieur de la balise, prêt à écrire le contenu.

Déclaration des attributs

Il est possible de déclarer des attributs dans les balises HTML lors de la création de la balise. Par exemple, pour créer une balise div avec un attribut identifiant (ID), il suffit de taper div#mon-id et d'appuyer sur Tab. Emmet génère alors la balise <div id="mon-id"></div>, avec le curseur positionné dans l'attribut id. Il est également possible de déclarer plusieurs attributs en les séparant par des points-virgules, par exemple div#mon-id.class1.class2 pour créer une balise div avec l'attribut id="mon-id" avec deux classes class="class1 classe2.

Astuce :
Ceci est valide pour toutes les balises HTML.

En utilisant directement le #, Emmet comprend que l'on souhaite ajouter un ID à la balise div. Cela vaut également pour les classes, en utilisant le ..

Pour créer une balise a directement avec l'attribut target="_blank", il suffit de tapper a:blank et d'appuyer sur Tab. Emmet génère alors la balise <a target="_blank"></a>, avec le curseur positionné à l'intérieur de l'attribut href.

Attention :
La balise a générée aura un attribut href qui commencera par http:// au lieu de https://. Il est important de le modifier pour correspondre à l'URL souhaitée.

Emmet respecte les normes de w3c. C'est pourquoi l'attribut rel avec les valeurs noopener et noreferrer est ajouté par défaut pour les liens externes. Cela permet de renforcer la sécurité en évitant que la nouvelle page puisse accéder à la page d'origine via l'objet window.opener.

Astuce :
Si l'on souhaite ajouter plusieurs attributs à une balise sans pour autant utiliser Emmet, il est possible d'utiliser les [ ].
Exemple :
a[href="toto.html" target="_blank"] qui va générer la balise <a href="toto.html" target="_blank"></a>.
Le curseur sera positionné dans l'attribut href pour permettre de le modifier.

Ecrire entre les balises paires

Emmet permet également d'écrire du texte entre les balises paires. Pour cela, il faut utiliser les accolades { } Par exemple, en tapant h1{Je suis le titre} et en appuyant sur Tab, Emmet génère la balise <h1>Je suis le titre</h1>. Le curseur sera positionné entre les balises, prêt à écrire du contenu.
En tapant a[href="toto.html" target="_blank"]{Ceci est mon lien} et en appuyant sur Tab, Emmet génère la balise <a href="toto.html" target="_blank">Ceci est mon lien</a>. Le curseur sera positionné entre les balises, prêt à écrire le texte du lien.

Manipulation des balises HTML

Emmet permet de manipuler les balises HTML de manière efficace. Par exemple, pour créer une boîte div, avec l'id="box" contenant une section, il faut utiliser le chevron fermant. En tapant #box>section>p et en appuyant sur Tab, Emmet génère la structure suivante : 

<div id="box">
	<section>
		<p></p>
	</section>
</div>

Le curseur sera positionné à l'intérieur de la balise paragraphe, prêt à écrire du contenu.

Pour une liste à puces, il suffit de taper ul>li*3 et d'appuyer sur Tab. Emmet génère la structure suivante : 

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

Le curseur sera positionné à l'intérieur de la première balise li, prêt à écrire du contenu. En appuyant sur Tab, le curseur se déplacera vers la deuxième balise li, et ainsi de suite.
Cela vaut pour toutes les balises HTML.

Il est possible de faire des structures évoluées assez facilement. Par exemple, pour créer une boîte div avec un id="box", contenant :

Le symbole + permet d'enchaîner les balises à créer.
Il faut de taper #box>header+nav+article p^footer et d'appuyer sur Tab. Emmet génère la structure suivante : 

<div id="box">
	<header></header>
	<nav></nav>
	<article>
		<p></p>
	</article>
	<footer></footer>
</div>

Le curseur sera positionné à l'intérieur de la balise header, prêt à écrire du contenu. En appuyant sur Tab, le curseur se déplacera vers la balise nav, et ainsi de suite.

Création de groupes

Le résultat recherché est celui-ci : 

<div id="box">
	<header>
		<h1></h1>
	</header>
	<article>
		<section></section>
		<section></section>
		<section></section>
	</article>
	<footer></footer>
</div>

Pour cela, il faut utiliser les parenthèses ( ) pour créer des groupes. En tapant #box>(header>h1)+(article>section*3)+footer et en appuyant sur Tab, Emmet génère la structure souhaitée.
Le curseur sera positionné à l'intérieur de la balise header, prêt à écrire du contenu. En appuyant sur Tab, le curseur se déplacera vers la balise article, et ainsi de suite.

Incrémentation

Pour créer une liste de 5 éléments avec un identifiant incrémenté, il faut utiliser le symbole $ pour l'incrémentation. En tapant ul>li#item$*5 et en appuyant sur Tab, Emmet génère la structure suivante : 

<ul>
	<li id="item1"></li>
	<li id="item2"></li>
	<li id="item3"></li>
	<li id="item4"></li>
	<li id="item5"></li>
</ul>

Le curseur sera positionné à l'intérieur de la première balise li, prêt à écrire du contenu. En appuyant sur Tab, le curseur se déplacera vers la deuxième balise li, et ainsi de suite.

Pour faire un bourrage de zéro dans l'incrémentation, il faut simplement utiliser X fois le symbole $. En tapant ul>li#item$$*5 et en appuyant sur Tab, Emmet génère la structure suivante : 

<ul>
	<li id="item01"></li>
	<li id="item02"></li>
	<li id="item03"></li>
	<li id="item04"></li>
	<li id="item05"></li>
</ul>

Les codes implicites

Emmet sait qu'une balise ol aura systématiquement au moins 1 balise li. Par conséquent, s'il on tape ol>.toto, Emmet va nous donner ceci : 

<ol>
	<li class="toto"></li>
</ol>

Si on a besoin de 5 li sur ce principe, il faut taper <ol>.toto*5. 

<ol>
	<li class="toto"></li>
	<li class="toto"></li>
	<li class="toto"></li>
	<li class="toto"></li>
	<li class="toto"></li>
</ol>

Les raccourcis de balises

En tapant a:link, cela nous permet d'avoir directement le focus dans l'attribut href.
De même que si l'on souhaite faire un lien type "mailto", alors il faut taper a:mail.
Pour créer la balise link qui pointe vers le fichier CSS, il faut taper link:css.
Pour les scripts JavaScript, il faut taper script:src.

Astuce :
Ce qui est important de retenir, c'est de lire le menu déroulant proposé par VS Code et Emmet.

Les raccourcis CSS

En tapant les lettres "raccourcies" on peut facilement obtenir des attributs CSS. Par exemple :