Snippets Zen Coding personnalisés

Astuce par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (27861 lectures)
Tags : web, snippet, zencoding

[![Texte alternatif:!:Zen coding]!]

Vous connaissez sans-doute déjà le plugin Zen Coding (sinon courez vite admirer cette vidéo assez ancienne mais plutôt bluffante). Zen Coding est une extension pour éditeurs HTML et autres logiciels de développement (IDE) permettant d'automatiser et d'accélérer la rédaction de code à l'aide de syntaxes courtes (snippets) et de raccourcis-clavier.

Voici un ensemble de raccourcis (snippets) personnalisés applicables aux projets web.

Récupérez et utilisez le fichier Zen Coding modifié

J’ai pensé que ces aménagements pourraient éventuellement servir à d’autres. Du coup, je vous partage volontiers le fichier, faites-en bon usage.

  • Récupérez et installez Zen Coding (EDIT : EMMET)
  • Récupérez le dossier “Zen-Coding.zip” sur mon site perso pour en extraire les fichiers Zen Coding.js et Readme.txt
  • Copier le fichier Zen Coding.js au sein du dossier “\plugins\NppScripting\includes” de votre éditeur HTML/CSS en écrasant le fichier original (après avoir fait une copie de sauvegarde !).
    Par exemple, pour Notepad++, le chemin sur Windows7 est C:\Program Files (x86)\Notepad++\plugins\NppScripting\includes

Rappel : sur Zen Coding, les Snippets fonctionnent avec les mots-clés (ci-dessous) + la combinaison de touches Ctrl + e

Modifications apportées

Beaucoup de mots-clés sont définis de base, voici uniquement ceux que j’ai modifiés personnellement (ajoutés) :

Structure

  • doctype -> un doctype HTML5 + gabarit minimal
  • doctype2 -> un doctype HTML5 avec classes conditionnelles sur html (combinaison de lte IE 7 / IE 8 / gt IE 8) + gabarit minimal
  • html5 -> aussi un doctype HTML5 + gabarit minimal
  • xhtml -> un doctype XHTML 1.0 strict + gabarit minimal
  • css -> élément link vers feuille styles.css

Contenu

  • lorem -> texte de remplissage en texte schnapsum
  • loremp -> 3 paragraphes en schnapsum
  • list -> liste ul/li de 5 éléments
  • nav -> élément nav contenant une liste ul/li/a de 5 éléments
  • content -> contenu type entier (titres, liste, paragraphes) en schnapsum

Commentaires conditionnels

  • ie -> commentaire conditionnel if IE
  • ie6 -> commentaire conditionnel if IE lte IE 6
  • ie7 -> commentaire conditionnel if IE lte IE 7
  • noie -> commentaire conditionnel if not IE

CSS

  • reset -> styles CSS de base (reset.css personnel)
  • bg -> background:#FFF url(|) 0 0 no-repeat;
  • br -> border-radius (avec préfixes pour navigateurs en ayant besoin)
  • bs -> box-shadow (avec préfixes pour navigateurs en ayant besoin)
  • clearfix -> crée une classe .clearfix empêchant les débordements de flottants (à l'aide de content)

Un exemple pour la route

Pour illustrer l'efficacité de ces snippets, voici comment je procède pour créer un gabarit HTML à partir d'une page vide sous Notepad++

Pour commencer, j'écris simplement "doctype" + Ctrl + e pour générer le code suivant :

<!doctype html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>

Puis, si je désire ajouter une liste, les touches seront "list" + Ctrl + e pour générer ceci :

<ul>
	<li>Salade</li>
	<li>Tomate</li>
	<li>Oignons</li>
	<li>Choucroute</li>
	<li>Picon bière</li>
</ul>

Enfin, si je souhaite du faux texte de remplissage encadré par des paragraphes, la manipulation sera "loremp" + Ctrl + e :

<p>Lorem Elsass ipsum réchime amet non Choucroute knack  tchao bissame hopla. Wotch a kofee avec ton BibalaekaesSalat et ta wurscht ?</p>
<p>Yeuh non che suis au réchime, je ne mange plus que des Grumbeere light et che fais de la chym avec Chulien. Tiens, un Picon sur le comptoir.</p>
<p>Allez tchao bissame !</p>

Pratique, n'est-ce pas ? N’hésitez pas à me faire vos retours si vous utilisez ces modifications, et me proposer les vôtres si vous avez vous aussi bidouillé votre fichier.

Commentaires

iManu a dit le

J'ai aussi bidouillé mon ZenCoding il y a quelques temps, mais c'était plus des modifications de snippet existants selon mes préférences.
J'avais tenté d'y inclure un Lorem Ipsum (super idée!) mais ça n'a jamais fonctionné, je vais voir comment tu t'y es pris, je devais mal m'y prendre.
Merci maître Raphaël !

hchtot a dit le

Je ne connaissais pas et je dis merci !

jojaba a dit le

Ouahh génial ce Zen Coding. Dommage, pas de plugins pour jEdit ( http://code.google.com/p/zen-coding/ ) semble...

Vincent Valentin a dit le

Il y a pas mal de trucs que tu as doublé non ?
http://code.google.com/p/zen-coding/wiki/ZenH...

Nico3333fr a dit le

J'ai pour ma part attribué la combinaison Ctrl + * pour l'autocomplétion du zen coding sous PsPad, très pratique.

Pour les CSS, il y a plein de trucs sympas aussi par défaut :

bg -> background
tt -> text-transform
m -> margin
mt -> margin-top
p -> padding
ov -> overflow
t : top
pos : position
fl -> float

etc.

C'est très très utile. Goutez-y, vous ne pourrez plus vous en passer.

Darklg a dit le

J'utilise principalement les snippets sous TextExpander(Mac), ou sous le gestionnaire de snippets natifs, qui permettent pour la plupart de placer un curseur à l'endroit voulu du snippet, ou de dupliquer une information à plusieurs endroits :
a->tab : (a href="[curseur]")texte par défaut(/a)
inp->tab : (label for="[id_demande]")[curseur](/label) (input type="text" id="[id_demande]" name="[id_demande]" /)
et bien d'autres .
( cf http://darklg.me/2011/10/la-magie-des-snippet... )

Darklg a dit le

Et je rejoins Nico3333fr, en CSS, il y a moyen de gagner beaucoup de temps, ne serait-ce que par un :
pt->tab : padding-top:[curseur]px;

oncle-charly a dit le

Je ne connaissais pas et je dis merci ! +1.
Super pratique. Adopté.

Damino a dit le

Merci pour la découverte de ce truc. Avec Lesscss (http://lesscss.org/) on devrait pouvoir gagner beaucoup de temps.
Par contre je n'ai pas pas trouvé comment implémenter tes ajouts au plugin pour CODA. Si certains ont trouvé, je suis preneur.

Alcmene a dit le

@Damino Coda a ça sans plugin, simplement avec les clips. Il y a d'ailleurs un site dédié qui comporte à peu près tout ce qu'on peut vouloir : http://coda-clips.com/ . Et avec leur support... un url-scheme spécifique, l'installation est juste magnifique.

Perso, j'ai aussi (je mets l'expansion en CSS, sinon les tags seront rippés) :
ul -> ul li |
ol -> ol li |
js -> script src="|" language="javascript" type="text/javascript" /script

Pour le JS :

script -> script type="text/javascript"
//<![CDATA[

|
//]]>
/script

fn -> function |() {
}

etc etc…

Alcmene a dit le

@Alcmene : ah, la regexp de détection des URLs est un peu trop gourmande… Échapper les espaces, ça me paraît bien violent. Bref. Mon lien précédent est donc bien évidemment simplement :
http://coda-clips.com/

Damino a dit le

Merci pour la découverte de ce truc. Avec Lesscss (http://lesscss.org/) on devrait pouvoir gagner beaucoup de temps.
Par contre je n'ai pas pas trouvé comment implémenter tes ajouts au plugin pour CODA. Si certains ont trouvé, je suis preneur.

yoannp a dit le

Pratique, merci!

Felipe a dit le

ul#zen>li*3>a[href="#coding-$"]{yay}

Cedvano a dit le

Super comme fonction, j'adore. Cependant, y a t-il moyen d'installer ton plugin dans Dreamweaver ? Les commandes normales fonctionnent, mais pas ton CTRL+e.
Je ne sais pas ou mettre le fichier JS.

Merci

Cedvano a dit le

J'ai trouvé, mais il plante mon dreamweaver. Dommage.

Skoua a dit le

Zen Coding couplé avec TextMate c'est le grand kiff.

worms30 a dit le

Exelent! Merci pour ce partage Raphaël ;-)

Burny a dit le

Merci ! Je ne connaissais pas encore zen coding :)

Burny a dit le

Merci ! Je ne connaissais pas encore zen coding :)

Maipee a dit le

Zen Coding une ressource à tester, j'utilise Finger text sur notepad++ qui rempli les mêmes fonctions. Merci de l'info

kenor a dit le

Je ne connaissais pas non plus, en tout cas, c'est adopté.

Et pour ceux qui ont eu besoin de la même chose que moi, il faut échapper 2 fois un caractère spécial pour qu'il ne soit pas interprété ( $ et | ) ex: \\$ et \\|

Du coup j'ai du boulot, PHP, Smarty, jQuery vont y passer :) (enfin si ça n'existe pas déjà)

Rifton007 a dit le

Pour les utilisateur de Dreamweaver.

Le raccourcis clavier CTRL+E étant reservé à DW, il faut donc faire usage de la touche TAB. Vous pouvez par la suite, si voule souhaiter. Modifier cette touche à l'aidre de l'éditeur de raccourcis de DW.

Ensuite pour bénéficier des améliorations de Raphael.
Se rendre dans votre dossier d'installation de l'extention Zen, à savoir:

X:\Users\???\AppData\Roaming\Adobe\Dreamweaver\fr_FR\Configuration\Commands\ZenCoding

Ouvrir le fichier my_zen_settings.js
Et copier le CONTENUE de la variable zen_settings du fichier de Raphael dans la variable my_zen_settings du fichier dont-il est question au départ.

Il semblerai que copier le fichier modifié de Raphael directement dans le dossier Commands de DW, fasse planter DW (tester sous DW5.5)

Carine P a dit le

Bonjour, j'utilise JEdit, éditeur non compatible avec Zen Coding.

Quel éditeur utilises-tu Raphaël ?
Quelqu'un saurait quel éditeur est utilisé dans la vidéo (complètement bluffante ceci dit en passant) ?

Par avance merci !

nux02160 a dit le

bonjour comment faire avec komodo edit s'il vous plait je ne vois pas trop comment l'integrer visiblement c'est dans une archive jar

Beninho a dit le

J'ai le même problème d'intégration avec Eclipse, c'est aussi une archive jar.
La solution qui est envisageable c'est un import via un fichier xml pour les snippets et abbreviations.
Pour le moment, j'ai affiché le fichier de Raphael et recopié dans la config du plugin Eclipse.
Je pense que ça doit être équivalent sur les autres IDE.

Felipe a dit le

@Carine P : Raphaël utilise Notepad++ et a utilisé du plus récent au plus ancien e-text-editor, N++ (bis), PSPad et HTML-Kit à ses héroïques débuts. Aptana est en cours de test chez Alsacreations.fr mais comme Raphaël est beaucoup en déplacement pour donner des formations CSS, Aptana ce sera plutôt sur son PC de bureau et le netbook va rester sous N++ :)

Carine P a dit le

@Felipe : merci !

Carine P a dit le

@Felipe : merci !

sebdeg a dit le

@ Carine P, l'éditeur utilisé dans la vidéo est Espresso (Mac only) http://macrabbit.com/espresso/

ThVi a dit le

Bonjour,
Sous Notepad++, peut-on changer le raccourcis de l'expansion de code Zen-Coding ? Car, il rentre en conflit avec le plugin HTML Tag déjà installé (Ctrl + E).
Merci.