Zen Coding (Emmet), ou comment coder plus efficacement

Beaucoup d’entre vous doivent certainement connaître le plugin Zen Coding, ou au moins avoir entendu ou lu ce nom quelque part.
Ce plugin vous permet de gagner en productivité et en zenitude sur les tâches les plus rébarbatives du travail d’intégration. Bien sûr il ne fait pas tout à votre place, il simplifie principalement la rédaction de tronçon de code.

Zen Coding s’appelle désormais Emmet. Voir la documentation. (info au 01/11/2012)

Compatibilité

Avant de commencer à expliquer son fonctionnement, peut-être serez-vous intéressés de savoir s’il est compatible avec le logiciel que vous avez l’habitude d’utiliser ?
Voici la liste actuellement disponible parmi les plus connus :

• Notepad++ (plugin v0.6.1)
• PSDPad (plugin v0.6)
• Dreamweaver (plugin v0.6)
• TextMate (plugin v1.3.1)

La liste complète des compatibilités

Si votre outil n’est pas dans la liste, j’aurais presque envie de vous inviter à en changer… mais c’est à vous de voir, je ne voudrais pas vous forcer :p

Principe

Bien, je ne vous ai toujours pas dit ce qu’on pouvait en faire de ce petit joujou.
Zen coding vous offre des « raccourcis » pour écrire des tronçons de code HTML, ou CSS. Le but n’est pas de lui faire faire le travail de réflexion à votre place, mais bien de vous offrir un gain de temps dans la rédaction de vos codes.

En écrivant une ligne de code ressemblant assez à un sélecteur CSS, vous pourrez, à l’aide d’une combinaison de touches (Ctrl + E), transformer cette ligne en une succession et imbrications d’éléments HTML correctement indentés. La combinaison de touches est à entrer une fois que vous avez écrit votre ligne de code. Le curseur a besoin d’être positionné juste après, sans espace.

Exemples

C’est bien beau tout ça, mais je trouve que les exemples sont beaucoup plus parlants :

Dans une feuille HTML

div#header>h1>a.logo

Vous donnera le code suivant une fois passé dans la moulinette Zen Coding :

<div id="header">
   <h1><a href="" class="logo"></a></h1>
</div>

Le petit bonus c’est que le curseur va se placer automatiquement entre les guillemets de l’attribut href du lien.

Dans une feuille CSS

Je n’ai pas grande expérience sur les CSS, j’ai encore trop l’habitude de tout écrire à la main.
Mais un code comme celui-ci par exemple :

ml

Vous donnera cela après l’utilisation du raccourci miracle de Zen Coding (Ctrl + E) :

margin-left:;

Une fois encore le curseur se place automatiquement en le point-virgule et les deux-points.

Installation

Commencez par télécharger le fichier correspondant à votre outil de rédaction habituel :

Liste des plugins Zen Coding sur Google Code
(Anglais)

Je vais prendre l’exemple de Notepad++, puisque c’est l’éditeur que j’utilise.
Une fois l’archive téléchargée, dézippée là dans le dossier (chemin par défaut) :
c:/program files/Notepad++/plugins/

Redémarrer votre éditeur s’il était encore en route afin d’initialiser le plugin.

Crash test

Je vous laisse tester et comprendre ce morceau de code.

div#container>(div.main_content>div.article*4>(a.cat)(div.article_body>(h2)(a.photo>img)(p.the_excerpt)(a.more_link))(ul.tags>li*3>a))(div.aside>div.aside_block*3>h3)

Conseil à ne suivre que si vous êtes sûr de vous :
Il m’arrive parfois de compléter les possibilités du plugin, pour cela il vous suffit d’ouvrir le fichier :
c:/program files/Notepad++/plugind/NppScripting/includes/Zen Coding.js

Regardez par exemple vers la ligne 581. Vous devriez tomber pas loin du raccourci img.
En face de ce raccourci se trouve le code HTML généré. Pour bien faire les choses il serait intéressant de voir les attributs width et height ajoutés à ce tronçon.
Il vous suffit donc de remplacer le code entre simple quotes par celui-ci :

<img src="" alt="" width="" height="" />

Redémarrez votre logiciel et testez le raccourci, vous verrez qu’il est maintenant customisé.

Résumons

Une ligne de code peut me permettre d’écrire l’équivalent de 50 lignes habituellement écrites à la pogne… c’est plutôt pas mal.
Bien entendu il vous faudra un petit temps d’adaptation, mais pour ceux qui maîtrisent les sélecteurs CSS, cela ne devrait pas être un gros problème.

Si vous avez des soucis avec n’hésitez pas à m’en faire part.
Amusez-vous bien 😉