Introduction
Si vous êtes développeur et que vous avez déjà une première expérience sur un projet, alors la notion de répétition de code vous parle. En effet, qui ne s’est jamais fait la remarque : « C’est la cinquième fois que je réécris ce morceau de code, dans plusieurs fichiers différents avec 3 variables qui changent ». Vous me direz qu’un bon vieux copier-coller fait l’affaire, certes. Mais si je vous disais que vous pouviez le faire de manière générique, avec des variables ?
Entre en scène le snippet, ou code snippet ! (Raccourci de code en français). Bien que ce soit une petite fonctionnalité mais gain de temps énorme. Un bout de code réutilisable qui vous fera gagner en efficacité et en productivité.
Dans cet article, nous définirons plus en détail ce que sont ces fameux snippets avant d’explorer leur mise en place et utilisation. Après cela, nous parlerons donc des avantages qu’ils peuvent apporter pour un développeur, tout en considérant également de manière globale un projet.
1. Qu’est-ce qu’un code snippet ?
Le code snippet (simplifié en snippet) est un bloc de code personnalisable et réutilisable. Il se structure en différentes parties :
"Generate private method" : {
"prefix" : "p-method",
"body" : "private method() : void { return; }",
"description" : "Create a basic private method"
}
Dans cet exemple :
- “Generate private method” est le nom du snippet.
- “prefix” définit le raccourci à taper pour déclencher le snippet.
- “body” contient le code qui sera généré par le snippet. Il peut inclure des marqueurs génériques ($1, $2, etc.).
- “description” est une courte explication de ce que fait le snippet
Il existe deux grandes catégories de snippets : les snippets d’IDE et les snippets de bibliothèque ou de Framework.
- Les snippets d’IDE sont liés au langage que vous utilisez pour coder (HTML, JavaScript, C#, etc.)
- Les snippets de bibliothèques ou de Framework sont liés au contexte de votre projet. Par exemple avec Angular, on peut avoir un snippet dédié à générer le corps d’un formulaire.
2. Mise en place et utilisation
Dans le cadre de cet article j’utilise Visual Studio Code comme IDE, mais la plupart des outils comme VisualStudio, Sublime Text et autres supportent l’utilisation de snippets.
Il n’est pas nécessaire d’être un développeur senior pour saisir les principaux avantages des snippets: vitesse et efficacité.
En reprenant mon exemple en introduction :
"Generate private method" : {
"prefix" : "p-method",
"body" : "private method() : void { return; }",
"description" : "Create a basic private method"
}
Une fois ce snippet mis en place, simplement en tapant “p-method” le snippet sera suggéré par l’IntelliSense de l’IDE.
En appuyant sur “entrer”, le snippet s’exécutera et génèrera le code :
Aller plus loin avec les marqueurs génériques
Si vous trouvez cet exemple un peu trop simple, complexifions un peu avec les marqueurs génériques. Les marqueurs génériques (ou tabstops) sont des marqueurs numérotés (ici $1, $2) dans le corps du snippet qui marquent l’ordre de navigation du curseur à travers l’extrait de code généré :
"Generate private method" : {
"prefix" : "p-method",
"body" : [ "private method($1) : void { ",
"$2",
"}"
],
"description" : "Create a basic private method"
}
Dans cet exemple le code généré sera le même. Toutefois le curseur sera automatiquement placé là où se situe le marqueur $1. Une fois le paramètre défini, si vous appuyez sur la touche Tab votre marqueur sera automatiquement au marqueur suivant $2 pour vous permettre d’écrire le contenu de la méthode.
Notez qu’ici, “body” représente désormais un tableau de chaînes de caractères, chaque élément correspondant à une ligne à générer.
Et que se passe-t-il si l’on répète plusieurs fois le même marqueur ? C’est une question que les plus observateurs peuvent déjà se poser. Ce que vous écrirez sera répété, tout simplement !
Prenons l’extrait suivant :
"Generate private method" : {
"prefix" : "p-method",
"body" : [ "private method($1: $2) : $2 { ",
"return $3",
"}"
],
"description" : "Create a basic private method"
}
Ici, on remarque que j’ai deux fois le marqueur $2. Dorénavant lorsque j’écrirai le type du paramètre attendu dans la méthode, je définirai ce même type comme le retour attendu de ma méthode.
Placeholder et liste d’options
Encore trop simple ? Sachez donc que, par ailleurs, les marqueurs génériques peuvent également contenir des placeholder avec un texte spécifique que vous voulez voir affiché par défaut, voire même une liste d’options !
- Snippet avec placeholder :
"Print to console" : {
"prefix" : "log",
"body" : [
"console.log('${1:Hello world}');",
“$2”
],
"description" : "Log output to console"
}
Ici par défaut c’est le texte “Hello world” qui sera écrit dans le “console.log()”.
- Snippet HTML avec liste d’option
"Create button" : {
"prefix" : "button link",
"body": "<button class='${1|primary,secondary,success,warning,danger|}'>$2</button>",
"description" : "Create a link button"
}
Ici au moment de créer votre bouton vous aurez le choix entre les différentes valeurs prévue ! Bien sûr vous pouvez toujours entrer une autre chaine de caractère.
3. Avantage à tous les niveaux
Pour un développeur qui doit en moyenne écrire 500 à 700 lignes de code par jour, les snippets réduisent fortement l’impression de répétitivité, la perte de temps et les erreurs de frappe. On peut maintenant se concentrer plus sereinement sur la réflexion et la logique, ce qui améliore la qualité du code.
En attendant, les avantages ne sont pas limités au fait d’écrire du code plus vite. Dans un contexte de projet, ils permettent la standardisation du code :
- Cohérence : Garantir un même format d’écriture de méthodes, de classes, etc.
- Bonnes pratiques : Par exemple, pour prendre un autre exemple l’inclusion de “aria-hidden” par défaut pour les icônes ou d’autres pratiques d’accessibilité pour les frontend
Ces points facilitent particulièrement l’embarquement des nouveaux venus sur un projet, maintiennent la consistance malgré le turnover et simplifient votre travail sur des projets personnels.
Conclusion
En résumé, les snippets dépassent le simple rôle de raccourcis clavier.
De véritables alliés vous aident au quotidien, en vous faisant gagner du temps et améliorer la qualité. Que vous soyez un développeur débutant ou que vous ne comptiez plus vos années d’expérience, ils vous permettront de vous concentrer sur l’essentiel : la logique et la réflexion.
Pour terminer, n’attendez pas votre prochain gros projet pour vous y mettre ! Commencez par créer des snippets pour les 3 blocs de codes que vous écrivez le plus régulièrement. Expérimentez, trouvez la formule qui vous convient ! Une fois habitué, vous verrez qu’il est difficile de s’en passer !
Yann LECORRE
Développeur Fullstack
