Snippets Zen Coding personnalisés

Astuceweb

Publié par le , mis à jour le (32420 lectures)

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

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 !

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.

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... )

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;

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.

@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…

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.

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

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

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à)

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)

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 !

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

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.

@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++ :)

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.