Emmet

Écrire du HTML est relativement facile. Cependant, cette tâche peut rapidement devenir longue et répétitive. Heureusement, l’extension Emmet permet d’éviter une partie de cette redondance, tout en accélérant le processus.

De plus, cette extension est disponible sur la majorité des éditeurs de texte et vient même préinstallée sur CodePen et VS Code.

Gabarit HTML

Une page HTML est toujours constituée d'un doctype, des balises html, head, body, etc. Plutôt que de mémoriser ce gabarit (boilerplate), Emmet propose l'abréviation ! + tab afin d'obtenir un gabarit de base prêt à être utilisé.

Balise

Par exemple, plutôt que de taper au long:

Il est possible de simplement taper le nom de la balise désirée, suivi de la touche tab. Dans ce cas strong + tab

ID

Il est aussi possible d'écrire une balise avec un id en préfixant ce dernier par un #, comme en CSS, suivi de la touche tab.

Sans balise

Il est possible d'allez encore plus rapidement en omettant de spécifier une balise. Dans ce scénario, Emmet se basera sur le contexte pour déterminer le type de balise le plus approprié.

Texte

Il est possible de spécifier le contenu texte d'une balise en l'incluant entre {}.

Balise enfant

Il est possible d'ajouter une balise enfant à une balise parent en les séparant par le caractère >.

Emmet se charge même de l’indentation! Multiplicateur

Pourquoi copier/coller plusieurs lignes, quand Emmet offre d'utiliser le symbole * suivi d'un chiffre pour indiquer le nombre de lignes souhaitées.

Par exemple, pour avoir trois li dans un ul

Index

Le symbole dollar $ représente l'index courant. Lorsqu'il est combiné avec le symbole multiplicateur *, il est remplacé par l'index de l'élément généré.

Par exemple, si nous avons trois li.

Il est aussi possible de l'utiliser dans le texte d'une balise.

OUTIL Cheat Sheet Emmet Cheat Sheet permettant de voir tous les raccourcis Emmet disponible dans les différents contextes.