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.
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é.
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
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.
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é.
Il est possible de spécifier le contenu texte d'une balise en l'incluant entre {}.
Il est possible d'ajouter une balise enfant à une balise parent en les séparant par le caractère >.
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
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.