ZenCoding et NetBeans IDE

J\’entends parler de ZenCoding depuis déjà un moment mais je n\’ai jamais pris le temps de regarder concrètement de quoi il s\’agissait. C\’est maintenant chose faite et j\’ai voulu tester ça avec NetBeans!

Mais d\’abord, qu\’est-ce que ZenCoding? ZenCoding est un plugin qui a été porté sur la majorité des éditeurs de texte gérant le HTML. Il permet d\’en accélérer l\’écriture grâce à une syntaxe précise. Un portage non officiel a été fait pour NetBeans et c\’est cette version que j\’ai voulu essayer.

Tout d\’abord, l\’installation sur NetBeans IDE. Les différentes versions du plugin pour chacun des éditeurs supportés se trouvent à cette adresse : ZenCoding.

Une fois le dossier compressé téléchargé, il suffit d\’ouvrir NetBeans IDE et d\’aller dans Outils > General > Import et donc d\’importer le .zip du plugin. Du plugin? Pas vraiment puisque ZenCoding n\’est pas complètement porté sous NetBeans. Quand on regarde le contenu du dossier compressé, on s\’aperçoit qu\’il ne contient en réalité que des templates de code. Cela implique deux choses : Premièrement il faudra suivre chaque abréviation écrite d\’une tabulation pour la \ »tranformer\ »; deuxièmement, une syntaxe comme

ul#my_id>li*5

qui génèrent normalement une liste non ordonnées dont l\’id est my_id et contenant 5 éléments ne sera pas interprêtée. En revanche, on peut quand même gagner du temps pour parvenir à un résultat presque similaire en utilisant

ul=

(suivi d\’une tabulation). Puis, pour chaque item que l\’on souhaite ajouter

li

(suivi aussi d\’une tabulation). Une chose également intéressante est que les templates de Zen Coding pour NetBeans gèrent la position du curseur. Ainsi, une abréviation comme

a:link

qui génère

text

va automatiquement positionner le curseur sur \ »http://\ » puis grâce à une tabulation va se déplacer sur \ »text\ ». Ainsi, en plus d\’écrire une bonne partie du code à notre place, Zen Coding permet également d\’éditer rapidement les différents champs.

Quelques abréviations intéressantes :

link:css

a:link

ul=

form:get

input:button

ou encore les balises \ »html:\ » qui peuvent faire gagner un temps précieux dans certains cas.

Enfin, pour avoir la liste complète des abréviations et de leur résultat, rendez-vous sur la Zen Coding Cheat Sheet (en pdf)