Pour commencer on va créer un snippet qui va afficher Hello world lorsque l'on tape h suivi de tab.
Pour créer ce snippet :
Allez dans le menu Tools / Developer / New Snippet...
Dans une nouvelle fenêtre vous devez voir apparaître la maquette du code d'un snippet proposé par défaut.
Dans la section CDATA se trouve le code du snippet. C'est le texte qui se trouve entre <![CDATA[ et ]]>. Pour notre snippet, supprimez ce texte et remplacez le par Hello world.
En dessous se trouve une zone de commentaire. Décommentez la ligne tabTrigger, enlevez une parie du hello et laissez le h. On spécifie ici ce qui va déclencher le snippet.
Dans le répertoire %appdata%/Sublime Text 3/Packages/User, sauvegardez votre fichier sous le nom hello.sublime-snippet.
Prenez un fichier. L'extension n'a pas d'importance. Tester votre snippet en tapant h+tab et vous devez avoir un Hello world.
On va créer un snippet qui va insérer un console.log() et qui va nous donner la possibilité d'éditer quelque chose entre les parenthèses du console.log(). Ce snippet devra être déclenché par la séquence cl+tab. Ce snippet devra uniquement être disponible dans les fichiers JavaScript.
Accédez au menu Tools / Developer / New Snippet...
Ecrivez console.log($1) comme code du snippet. Le $1 indique qu'à cet endroit là il y a une zone éditable. Cette zone va donc nous permettre d'insérer du texte entre les parenthèses.
Décommentez la ligne de commentaire tabTrigger et mettez cl.
Décommentez la ligne de commentaire scope pour mettre source.js. Cette modification va limiter la portée de votre snippet aux fichiers d'extension js.
Pour un fichier html il faut mettre text.html.
Pour un fichier css il faut mettre source.css.
Sauvegardez ce fichier au nom de console-log.sublime-snippet dans le répertoire %appdata%/Sublime Text 3/Packages/User.
Prenez un fichier avec l'extension .js et tapez cl puis éditez la zone en tapant 'Bonjour'.
Allez maintenant dans le menu Tools / Snippets et vérifiez la présence des deux snippets que nous avons créés.
Nous allons maintenant continuer à améliorer notre snippet. Si vous avez déjà travaillé avec des snippets vous savez que quelquefois il y a dans le snippet une zone éditable avec une valeur par défaut qui peut être modifiée. Vous savez aussi que vous pouvez avoir plusieurs zones éditables dans un même snippet et que vous pouvez naviguer d'une zone vers la suivante avec un tab.
Nous allons modifier notre snippet console.log de manière à avoir une première zone avec la valeur par défaut 'message' et une deuxième zone dans laquelle on pourra insérer un point virgule.
Récupérez en édition votre fichier. Eventuellement allez le chercher dans la zone %appdata% avec le menu Preferences / Browse Packages puis User.
Remplacez le ${1} par un ${1:'message'}. Le :'message' c'est pour la valeur par défaut.
Ajoutez un $2 à la fin pour insérer une deuxième zone éditable. Si il y en avait une troisième vous utiliseriez $3 et ainsi de suite.
Maintenant regardez lorsque je tape cl chez moi j'ai la completion qui s'active. Ici la completion me propose mes snippets et les propositions issues d'un plugin de completion Javascript que j'ai installé.
Vous pourriez avoir besoin de changer le nom, ici console-log, qui est affiché pour votre snippet. Vous pouvez le faire en ajoutant la balise XML description. Regardez ci-dessous. J'ai changé le nom et j'ai mis Mon Log.
Vous pouvez constater que la description du snippet a changé dans la liste d'autocompletion.
