Blogdevphp

Emmet : Le plugin pour coder plus rapidement

2014-02-08 outils

Emmet, anciennement zen coding, est un outil très intéressant, disponible pour la plupart des IDE. 

La personne, à  l'origine de cet outil,  est Sergey Chikuyonok qui a bénéficié, de l'appui de nombreux contributeurs.

En fonction de ce que vous saisissez, dans un fichier HTML par exemple, cela va être interprété dynamiquement pour offrir le résultat escompté. Cela passe par une certaine syntaxe qui ne requiert un long apprentissage. Voyons un peu, à travers d'exemples, ce qu'il en retourne.

La syntaxe liée au langage HTML

Emmet vous permet, donc de ne plus avoir à saisir toutes vos balises. La syntaxe, assez simple d'usage, va générer dynamiquement ce que vous désirez faire. Dans la section Download, vous pourrez télécharger le plugin selon votre IDE. Pour ma part, j'ai installé le plugin sur l'IDE Netbeans et il est possible de configurer ses propres commandes en allant sur Tools > Options > Keymap.

 

Voyons maintenant un exemple avec la génération d'une balise UL contenant cinq balises LI :

ul>li*5

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

En plus de pouvoir générer nos balises, on peut leur adjoindre des id ou des classes de cette manière : 

div#page(header>ul.liste>li*2>a)+footer>p

<div id="page">
     <header>
         <ul class="liste">
             <li><a href=""></a></li>
             <li><a href=""></a></li>
         </ul>
     </header>
 </div>
 <footer>
     <p></p>
 </footer>

Encore mieux, si vous saisissez à l'intérieur d'une balise UL, il générera les LI automatiquement, sans l'avoir préciser, au préalable dans votre abbréviation. Vous avez remarqué, que les id sont numérotés, car on spécifie qu'on commençe à 1 et qu'ils sont au nombre de trois :

<ul class="liste">
  .image$@1*3
</ul>

<ul class="liste">
  <li class="image1"></li>
  <li class="image2"></li>
  <li class="image3"></li>
</ul>

Vous avez également la possibillité de gérerer du texte lorem ipsum, éditable à l'intérieur de balises.

La syntaxe liée au langage CSS

Ces abbréviations sont aussi utilisables pour générer du css. Par défaut, les valeurs de margin, font-size.. sont fixés en pixel. Il est possible bien entendu de choisir d'autres unités comme le pourcentage...


.article{
    m10-20+w100+bc#ff
}
/** Ce qui va générer **/

.article{
    margin: 10px 20px;
    width: 100px;
    background-color: #fff;
}

Emmet prend également en compte les dégradés CSS3.

Conclusion

Emmet, permet à travers ces abbréviations, de gagner du temps, dans la construction de ses pages HTML et CSS. Je vous laisse aller voir les autres possiblités, offertes par ce plugin à cette adresse. Partagez vos retours d'expériences avec ce plugin sur Netbeans et les autres IDE.

 

comments powered by Disqus
Copyright © 2018 blogdevphp.fr - Tous droits réservés