Raccourcis et astuces Emmet

Emmet est un plugin pour éditeurs de textes qui vous aide à créer HTML et CSS à la vitesse de l'éclair. Rappel des raccourcis principaux et quelques fonctionnalités moins connues.

Par

NdT : Deux articles de la Cascade ont déjà présenté Emmet, l'un de manière globale (Goodbye Zen Coding, Hello Emmet !), l'autre plus spécifiquement pour CSS (Emmet, un turbo dans votre CSS). Inutile de vanter à nouveau les mérites d'Emmet pour vous faciliter le travail. Cet article recense les raccourcis d'Emmet et rafraîchira notre mémoire !

Pour compléter cet article de Matt McFadyen, vous trouverez un article de Jordan Moore à la suite, à propos de quelques fonctionnalités d'Emmet moins connues.

Raccourcis Emmet

Emmet est un plugin de SublimeText (NdT: et d'autres éditeurs de texte) qui peut être utile pour accroître votre productivité grâce à de nombreux raccourcis vous épargnant la saisie de code répétitif et ennuyeux. J'utilise Emmet pour automatiser la création de listes, pour la numérotation incrémentée de classes, pour CSS etc. Voici quelques-uns des raccourcis les plus utiles, au cas où vous les auriez oubliés.

Dans les exemples qui suivent, la syntaxe en blanc correspond à Emmet, en tapant la touche tabulation on obtient la syntaxe colorée HTML.

HTML

Utiliser > pour ajouter un élément enfant (child)

Utiliser + pour ajouter un élément frère (sibling)

Utiliser * pour multiplier les éléments

Utiliser . pour ajouter un nom de classe

Utiliser () pour grouper des éléments multiples

Utiliser {} pour insérer du texte dans un élément

Ajouter une numérotation avec $

Commencer la numérotation à X avec [email protected]

Ordre décroissant avec $@-

Remonter d'un élément enfant avec ^

Ajouter un attribut avec [attr_name="valeur"]

En résumé

Le premier regroupement contient une <li> qui a deux éléments enfants : <p> qui contient du texte et <img> qui contient un attribut src.

Le regroupement suivant contient les <li> 2 à 5, en multipliant des listes dont les noms de classe, le contenu de paragraphe, les valeurs d'attributs src s'incrémentent selon diverses syntaxes. Chaque <li> contient également une ancre, invariable.

Enfin, nous utilisons 3 fois ^ de façon à sortir de <li>, puis de <ul>, puis de <div>, afin d'ajouter notre footer final.

CSS

Voici une liste de raccourcis courants :

N'oubliez pas que CodePen est compatible avec Emmet !


Astuces Emmet

NdT : Pour compléter ce petit rappel, voici un autre article, de Jordan Moore, sur quelques fonctionnalités mal connues d'Emmet, qui montrent sa puissance incroyable.

Calcul en ligne

Emmet contient un calculateur intégré qui vous permet de résoudre des équations directement à l'intérieur de votre code. Je l'utilise quotidiennement pour convertir des valeurs px en em, en particulier pour les valeurs em imbriquées, simplement en tapant Cmd Shift Y sur une équation comme 24/16 (valeur souhaitée en pixels / valeur de base en pixels).

Vous pouvez enchaîner le calcul et les abréviations, par exemple en tapant mb24/16 et en faisant Cmd Shift Y, puis tabulation, vous obtenez :

margin-bottom: 1.5em;

Retrouver une balise

Quelquefois lorsque j'écris mon HTML je cherche une balise fermante que je n'arrive pas à retrouver rapidement. En faisant Ctrl Shift T avec le curseur sur la balise ouvrante (ou fermante), je saute directement à la balise fermante (ou ouvrante) correspondante.

Commentaires

Pour éviter de me retrouver dans la situation précédente, je recommande d'insérer un commentaire sous vos balises fermantes. Mais écrire le nom de la classe d'un élément encore une fois, et l'intégrer dans les commentaires, est une perte de temps et d'énergie qui n'a de sens que si vous devez revoir votre code - c'est pourquoi on l'oublie souvent.

Emmet rend toutefois cette tâche extrêmement simple, en ajoutant juste un petit snippet à la fin d'une abréviation. Si vous tapez : .container>ul>li*5>a|c, vous obtiendrez :

<div class="container">
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>
<!-- /.container -->

Bref, pour obtenir le commentaire (et tout le bénéfice qui vient avec), il vous a suffi d'écrire |c.

Convertir une image en Data URI

Une des fonctionnalités les moins utilisées d'Emmet est sa capacité à convertir les images en Data URI. L'utilisation de Data URI en lieu et place d'une image externe vous permet d'économiser une requête HTTP, ce qui améliore la performance de votre site en réduisant le temps de latence.

Pour convertir une image en Data URI, placez le curseur à l'intérieur de la balise image et faites Ctrl Shift D.


Intéressé par HTML ? Sur la Cascade, retrouvez des articles et ressources.


Liens utiles

Documentation Emmet
Anti-sèche Emmet (syntaxe, HTML, CSS)
Bootstrap en quelques minutes avec Emmet (en anglais)
Goodbye, Zen Coding. Hello, Emmet !, par Zeno Rocha
Emmet, un turbo dans votre CSS, par Josh Medeski


Ressources complémentaires en français :

tutoriel vidéo sur Emmet, par Grafikart


Raccourcis Emmet
original paru le dans le blog de Matt McFadyen.

Sur l'auteur : est un développeur de Toronto, toujours désireux d'accroître ses connaissances, de découvrir de nouveaux langages et de rencontrer ses pairs. Vous pouvez consulter ses projets sur GitHub et CodePen, et le suivre sur Twitter.

Traduit avec l'aimable autorisation de l'auteur.
Copyright Matt McFadyen © 2014


Astuces Emmet
original paru le dans le blog de Jordan Moore.

Sur l'auteur : est un développeur de Belfast, ex Typecast, maintenant eyekiller, il écrit pour Smashing Magazine et Net Magazine. On peut le suivre sur Twitter.

Traduit avec l'aimable autorisation de l'auteur.
Copyright Jordan Moore © 2014