Emmet est un plugin disponible pour plusieurs IDE qui facilite la rédaction du code HTML.

Si vous êtes habitué à rédiger du HTML, vous vous reposez beaucoup sur votre IDE pour que son auto complétion ferme automatiquement vos balises ou indente votre texte automatiquement. Avec Emmet, vous allez pouvoir aller plus loin encore.

Installer Emmet

Emmet est disponible sous forme de plugin pour tous les IDE les plus connus. Rendez-vous sur https://emmet.io/download/ pour télécharger le plugin qui correspond à votre IDE.

Pour Visual Studio Code, c’est encore plus simple. Dans un article précédent, je vous expliquais comment modifier vos préférences. Ajoutez-donc la ligne suivante dans vos préférences  :

"emmet.useNewEmmet": true

Utiliser Emmet

Emmet reprend la plupart de la syntaxe des sélecteurs CSS qui vous permettent de cibler un élément et transforme votre expression en élément du DOM. Exemple simple : dans un fichier .html, rédiger

p#myId.myClass

sera transformé automatiquement en :

<p id="myId" class="myClass"></p>

Le tag p est maintenu, le # définit l’attribut id et le . définit l’attribut class. C’est déjà intéressant. Mais on peut également rédiger des blocs plus longs en très peu de caractères :

div>header+div#content+footer

devient automatiquement

<div>
    <header></header>
    <div id="content"></div>
    <footer></footer>
</div>

L’opérateur > permet de créer un élément enfant (child) alors que l’opérateur + permet de créer un élément frère (sibling).

La syntaxe est assez courte à apprendre, et vraiment particulièrement puissante pour rédiger rapidement la structure de vos éléments. L’intégralité des opérateurs est disponible sur la documentation : https://docs.emmet.io/abbreviations/syntax/