2

Emmet, l’indispensable outil du développeur

Salut les amis !

Aujourd’hui, nous allons parler de Emmet (anciennement connu sous le nom de ZenCoding), un outil dont je suis très friand à titre personnel.

Emmet, c’est quoi ?

Ce petit plugin va tout simplement vous permettre d’accélérer votre rythme de développement en passant outre toutes les étapes rébarbatives parfois présentes dans le développement.
Si je vous dis, je vais créer un tableau HTML contenant 8 lignes de 5 cellules chacune, contenant elles aussi 8 liens chacune. Et si maintenant, j’ajoute que tout ce contenu HTML, je vais le générer grâce à une seule ligne de code?

J’entends déjà  le rire de certains raisonner au fond de la salle. Mais sachez mes amis que ceci n’a rien d’un rêve, c’est simplement la magie de ce petit plugin !

NDLR: Bon je dois avouer que mon exemple est complètement pourri aussi…

Et on s’en sert comment de super Emmet ?

Sachez tout d’abord que ce plugin a été développé pour de nombreuses plateformes. Vous trouverez la liste des IDE supportant Emmet ici. Une simple installation du plugin (une micro-configuration si vous souhaitez modifier le trigger de déclenchement) et c’est parti !

Aussi plaisant que ça puisse paraître, cet outil est d’une simplicité affligeante à utiliser. Prenons un exemple simple:

<!-- Code pour Emmet -->
div#maDiv>p>a*2+span

<!-- Code généré -->
<div id="maDiv">
    <p>
        <a href=""></a>
        <a href=""></a>
        <span></span>
   </p>
</div>

Ici, nous indiquons à Emmet que nous souhaitons une <div> avec l’id maDiv.

Le symbole « > » permet de lui indiquer que l’élément suivant sera à l’intérieur du précédent, le <p> sera donc à l’intérieur de la <div>.

Ensuite , nous demandons à ce que la balise <a> soit dans le <p> et soit doublée, grâce au symbole « *2 ». Vous n’êtes cependant pas limité à deux éléments. Si vous souhaitez avoir 18 balises <a> dans le <p> il vous suffira de l’indiquer comme ceci : a*18

Le dernier symbole présent dans notre exemple est le « + ». Contrairement au « > », celui la va nous permettre de placer l’élément à coté de l’élément précédent. Vous remarquez dans l’exemple que la balise <span> apparaît bien à côté du dernier <a> et non pas à l’intérieur.

Voici pour notre exemple simple, mais sachez que ça ne s’arrête pas la !

Des abréviations pré-faites bien utiles

Emmet propose aussi des abréviations déjà enregistrées qui vont vous permettre de vous simplifier la vie.

Parmi elles, nous retrouverons par exemple

html:5

qui va générer tout le squelette d’une page HTML5 sans rien oublier, et qui plus est, en plaçant notre curseur entre les balises <title> pour nous faire gagner un clic !

Autre raccourci selon moi très intéressant, la génération automatique de faux texte. Lors de vos intégrations, vous avez certainement dû remplir vos paragraphes avec du texte temporaire. Et bien sachez que Emmet s’en charge pour vous, et vous pourrez en plus lui préciser le nombre de mots que vous souhaitez de la manière suivante:

p*5>lorem15

Ici, nous obtiendrons 5 paragraphes contenant chacun 15 mots.

Ces deux fonctions ne sont que des exemples, mais j’espère qu’à travers cela, vous aurez compris la puissance de ce plugin et l’addiction qu’il peut créer. Mais contrairement à beaucoup d’addictions, celle-ci peut être utiliser à l’excès sans aucun risque pour votre santé mentale !

La documentation complète des possibilités de Emmet : Documentation

Et le site officiel de Emmet si vous avez envie de leur faire coucou.

A bientôt les amis !

A propos de Romuald

Romuald a écrit 23 articles sur le blog.

Les amis de nos amis sont nos amis, alors partageons !

Laissez un commentaire





Si vous êtes un vrai développeur, vous devez savoir compter.
Alors on vous met au défi !
Si vous réussissez cette épreuve, nous nous ferons une joie de lire votre commentaire.