Coder plus rapidement avec Zen-coding

Zen-coding :

Suffisamment d’éléments pour donner envie d’en parler un peu ici. Il faut dire aussi que je suis plutôt convaincu par les possibilités offertes.

De quoi s’agit-il exactement ?

Zen-coding propose simplement quelques automatisations qui viennent se greffer sur votre éditeur habituel.

La fonctionnalité principale (implémentée en premier sur les éditeurs) est basée sur la syntaxe des sélecteurs CSS : idéal pour ne pas être dérouté.

Par exemple si j’entre :

div#content>p.intro+ul>li*3>a

J’obtiens immédiatement :

<div id="content">
    <p class="intro"></p>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

On joue donc entre les sélecteurs enfants et adjacents pour construire sa structure d’une ligne.

Les « abréviations » permettent également donc de générer un grand nombre d’éléments HTML pré-construits ainsi que des propriétés CSS.

Tout cela est très efficace, d’autant qu’une fois le code généré, il suffira de tabuler pour que l’éditeur fasse passer votre curseur sur les endroits où du contenu doit être ajouté.

Sur l’exemple précédent, c’est :

<div id="content">
    <p class="intro">ici,</p>
    <ul>
        <li><a href="ici,">ici,</a></li>
        <li><a href="ici,">ici,</a></li>
        <li><a href="ici,">et ici.</a></li>
    </ul>
</div>

Autre fonctionnalité intéressante : la possibilité de sélectionner de manière progressive des portions de code. Toujours en reprenant l’exemple précédent, et en supposant que je place mon curseur entre « et » et « ici. », à chaque fois que je déclenche la fonctionnalité je sélectionne :

  • et ici. ;
  • <a href="ici,">et ici.</a> ;
  • <li><a href="ici,">et ici.</a></li> ;
  • etc.

Et bien sûr la sélection est faite de manière à pouvoir supprimer le bloc proprement d’un coup.

Arrive également la possibilité d’ajouter autour de la structure sélectionnée une nouvelle abréviation.

Je peux par exemple facilement produire en quelques raccourcis claviers :

<div id="content">
    <p class="intro">ici,</p>
    <div class="blocs ajoutes par la suite">
        <div class="blocs">
            <ul>
                <li><a href="ici">ici,</a></li>
                <li><a href="ici">ici,</a></li>
                <li><a href="ici">et ici.</a></li>
            </ul>
        </div>
    </div>
</div>

Tout cela sans devoir à aucun moment revoir mes indentations.

Pour les utilisateurs avancés, il est également possible de (re)définir finement de nouveaux modèles, en précisant syntaxes, positions du curseurs, etc.

Plongez-vous également dans les filtres de sortie qui semblent eux aussi très puissants.

Parfait ?

Pratique en tout cas. Il faudra cependant prendre le temps d’appendre les raccourcis clavier propres à votre éditeur pour en profiter pleinement. Et surtout croiser les doigts pour que votre éditeur favori supporte le plugin convenablement.

Difficile de se défaire de nos petites habitudes acquises au jour le jour pour en adopter d’autres… mais il semblerait que ça vaille le coup d’essayer.


14 commentaires ↓

#1 Nicolas Hoizey le 06.01.10 à 23:36

Bon bin tu testes ça à fond avec Espresso, et quand je reviens tu me montres !!! 😉

#2 Corinne le 06.02.10 à 8:10

Ce plugin est effectivement très efficace. Par contre, je serais assez curieuse de voir avec quels éditeurs de texte vous l’utilisez.

#3 raphael le 06.02.10 à 9:14

Hey, mais nous avions justement un article en préparation sur ce sujet, les grands esprits se rencontrent ? :)

On est plusieurs chez nous (= à l’agence) à tester Zen Coding, sur plusieurs éditeurs différents (Notepad++, PSPad, e-Texteditor) et avec plus ou moins de succès.

La méthodologie est sympa quand on joue le jeu à fond car il faut un certain temps d’adaptation avant de gagner en productivité.

Pour info, Zen Coding propose également une syntaxe pour les CSS.

#4 Vincent le 06.02.10 à 9:21
  • Nicolas : et petit kouign amann et je te fais ça. 😉

    • Corinne : Espresso donc (mais le commentaire n’était pas publié quand tu as posé la question).

    D’ailleurs c’est bien vu le système de plugins d’Espresso : ce sont des sucres.

#5 Vincent le 06.02.10 à 9:34

Oui, j’en parle dans le billet. Mais je ne m’en sert pas, l’auto-complétion proposée par Espresso me convient bien par défaut.

#6 STPo le 06.02.10 à 10:15

J’ai testé sur Dreamweaver au boulot, c’est très chouette. Et sur e-Texteditor à la maison et ça l’est beaucoup moins (cygwin me rappelle cordialement pourquoi j’ai choisi de ne pas être développeur)…

#7 Xavier le 06.02.10 à 10:23

Bonjour Vincent,

Ma curiosité m’a aussi poussé à tester ce fameux Zen Coding. Cet outil proche des raccourcis clavier ou snippets de certains éditeurs semble pouvoir offrir un gain de temps évidant sur la conception d’une architecture HTML.

Cependant, dès les premiers essais mon avis s’est partagé. Il semble évident que le plugin n’a pas été implémenté de la même manière sur l’ensemble des éditeurs. Je ne sais pas se qu’en pense @raphael mais sous e-Texteditor l’utilisation est très minimaliste (à mon grand regret).

En tout cas l’initiative est à suivre de près.

#8 Tweets that mention Coder plus rapidement avec Zen-coding — HTML Zen Garden -- Topsy.com le 06.02.10 à 10:35

[…] This post was mentioned on Twitter by Christophe Andrieu, FormeOlibre. FormeOlibre said: RT @htmlzengarden: découvrir Zen-coding : http://www.htmlzengarden.com/2010/06/coder_plus_rapidement_avec_zen-coding/ #integration […]

#9 raphael le 06.02.10 à 12:57

@Xavier : pour l’instant, je n’ai pas encore assez de recul sur cette méthode. Je la teste en même temps que je découvre e-texteditor dont je commence à apprécier de plus en plus les « bundles » personnalisables à souhait. Entre les deux mon coeur balance et je ne suis pas sûr qu’on puisse exploiter les deux en même temps.

#10 raphael le 06.02.10 à 12:59

Petite suggestion pour @Valentin : un petit word-wrap:break-word; sur ton élément .custom dl#comment_list dd permettrait aux url longues de ne pas dépasser de la bulle de commentaire 😉

#11 Frank Taillandier le 06.02.10 à 16:24

Testé et approuvé avec Textmate, le seul hic sont les conflits potentiels avec d’autres bundles HTML.

#12 Gilles le 06.03.10 à 14:48

Je teste depuis hier et je trouve ça assez terrible, pour le html comme pour le css. L’utilisation du filtre commentaire c’est tout bête, mais très pratique. Je vais continuer à apprendre les raccourcis au fur et à mesure !!

#13 Nico le 12.03.10 à 9:50

J’aime beaucoup le Zen coding avec Pspad, je lui ai attribué la combinaison « Ctrl * », c’est très pratique et j’essaie de prendre le réflexe à chaque occasion.

#14 Olivier C le 09.06.12 à 23:12

« Et surtout croiser les doigts pour que votre éditeur favori supporte le plugin convenablement. »

Certains éditeurs ne sont pas dans la liste proposée mais existent tout de même. Je pense notamment à Sublim Text 2, qui implémente Zen Coding par l’intermédiaire du plugin Package Control (sinon à partir de GitHub), il suffit d’activer l’option.


Laisser un commentaire

Mise en forme : vous pouvez utiliser la syntaxe Markdown. Vous verrez, c’est chouette !