HAKUROU L'amour est dans le code

Emmet pour votre éditeur de code

Emmet pour votre éditeur de code

Fut un temps où j'aimais écrire et réécrire du code HTML, encore et encore, et j'y prenais plaisir en plus...mais celà a assez duré !

Passer son temps à écrire du HTML, au bout de quelques années ça use !
Alors j'ai voulu jeter un coup d'oeil à cet outils qui permet en écrivant des raccourcis de générer un code HTML, Zen Coding.

Effectivement, ça faisait un petit moment que je n'entendais plus parler de lui, en fait c'est normal, désormais il s'appelle Emmet.

Le principe est en tout bête, c'est un plugin qui s'insère dans votre éditeur de code préféré et qui vous permet de pondre rapidement un code:

ul>(li.item>lorem10)*5

donne:

<ul>
    <li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, quae.</li>
    <li class="item">Officia a, possimus voluptatibus ea similique dolorum quas sunt aperiam.</li>
    <li class="item">Magnam suscipit laudantium aut ratione quisquam, placeat nihil quod dolor!</li>
    <li class="item">Beatae molestias adipisci nihil assumenda cumque culpa recusandae voluptates deleniti.</li>
    <li class="item">Odio inventore vel vero maiores, voluptatum recusandae laudantium eius neque?</li>
</ul>

Autant dire que le gain de temps est important.
La syntaxe n'est pas compliqué à cerner et rapide à mettre en place et pour peu que l'on connaisse le CSS, ça va tout seul.

html>head>title^body

donne:

<html>
<head>
    <title></title>
</head>
<body>
    
</body>
</html>

On peut également définir des classes, ID ou encore attributs:

div#container[data-title=container]

donne:

<div id="container" data-title="container"></div>

Ou encore, une génération ordonnée ou inversée:

div>span.item$*5

donne:

<div>
    <span class="item1"></span>
    <span class="item2"></span>
    <span class="item3"></span>
    <span class="item4"></span>
    <span class="item5"></span>
</div>
div>span.item$@-*5

donne:

<div>
    <span class="item5"></span>
    <span class="item4"></span>
    <span class="item3"></span>
    <span class="item2"></span>
    <span class="item1"></span>
</div>


Il y a encore deux trois choses sympas comme l'ajout de noeud sur le même niveau avec "+", l'ajout de noeud texte avec "{}", ou encore des raccourcis en CSS mais ces derniers ne me sont absolument pas évidents ni même naturel en écriture.

 

Pour obtenir Emmet, n'hésitez pas à rendre visite à la page suivante: http://emmet.io/download/, vous trouverez votre bonheur.

Attention, si comme moi vous utilisez Eclipse, alors vous devrez modifier les raccourcis car Emmet remplacera AltGr + 5, vous ne pourrez plus utiliser les crochets. Pour ce faire, allez dans Window/Preferences puis dans General/Keys et là recherchez tous les raccourcis Emmet, vous devriez voir l'utilisation des [ ], changer ou supprimer ces raccourcis selon vos besoins et tout rentrera dans l'ordre.


Amusez vous bien :)