Les Snippets sont des templates (modèles) de code qui facilitent la saisie de code répétitifs, telles que des boucles ou des instructions conditionnelles.

Dans Visual Studio Code, les Snippets apparaissent dans IntelliSense (CTRL+ESPACE) ou (⌃ESPACE) mélangés à d’autres suggestions, ainsi que dans un sélecteur de Snippets dédié (“Insérer un Snippet” dans la palette de commandes).

Snippets inclus dans VSCode

VS Code a des Snippets intégrés pour un certain nombre de langages tels que : JavaScript, TypeScript, Markdown et PHP.

Vous pouvez voir les extraits disponibles pour une langue en exécutant la commande “Insérer un Snippet” dans la palette de commandes pour obtenir une liste des Snippets pour la langue du fichier actuel. Cependant, gardez à l’esprit que cette liste comprend également les extraits de code utilisateur que vous avez définis et tous les extraits fournis par les extensions que vous avez installées.

Installer des Snippets de la MarketPlace

De nombreuses extensions sur VSCode Marketplace incluent des Snippets de code. Vous pouvez rechercher des extensions contenant des Snippets dans la vue Extensions (CTRL+SHIFT+K) ou (⇧⌘X) à l’aide du filtre @category:”snippets”.

Si vous trouvez une extension que vous souhaitez utiliser, installez-la, puis redémarrez VS Code et les nouveaux Snippets seront disponibles.

Créez vos propres Snippets

Vous pouvez facilement définir vos propres Snippets sans aucune extension. Pour créer ou modifier vos propres Snippets, sélectionnez Snippets utilisateur sous Fichier > Préférences (Code > Préférences sur macOS), puis sélectionnez la langue (par identifiant de langue) pour laquelle les Snippets doivent apparaître, ou l’option de fichier Nouveaux Snippets globaux s’ils doivent apparaitre pour toutes les langues.

Les fichiers de Snippets sont écrits en JSON, prennent en charge les commentaires de style C et peuvent définir un nombre illimité de Snippets. Les Snippets prennent en charge la plupart des syntaxes TextMate pour un comportement dynamique, formatent intelligemment les espaces blancs en fonction du contexte d’insertion et permettent une édition multiligne facile.

Vous trouverez ci-dessous un exemple d’extrait de boucle for pour JavaScript :

// in file 'Code/User/snippets/javascript.json'
{
  "For Loop": {
    "prefix": ["for", "for-const"],
    "body": ["for (const ${2:element} of ${1:array}) {", "t$0", "}"],
    "description": "A for loop."
  }
}

Dans l’exemple ci-dessus :

• “For Loop” est le nom du Snippet. Il est affiché via IntelliSense si aucune description n’est fournie.
  Le préfixe définit un ou plusieurs mots déclencheurs qui affichent l’extrait dans IntelliSense. La correspondance de sous-chaîne est effectuée sur les préfixes, donc dans ce cas, “fc” pourrait correspondre à “for-const”.
• body est une ou plusieurs lignes de contenu, qui seront jointes en plusieurs lignes lors de l’insertion. Les nouvelles lignes et les tabulations intégrées seront formatées en fonction du contexte dans lequel l’extrait est inséré.
• description est une description facultative du Snippet affiché par IntelliSense.

De plus, le corps de l’exemple ci-dessus comporte trois espaces réservés (listés par ordre de traversée) : ${1:array}, ${2:element} et $0. Vous pouvez rapidement passer à l’espace réservé suivant avec Tab, auquel cas vous pouvez modifier l’espace réservé ou sauter à nouveau le suivant. La chaîne après les deux points (le cas échéant) est le texte par défaut, par exemple element dans ${2:element}. L’ordre de parcours des espaces réservés est croissant par nombre, à partir de un ; zéro est un cas spécial facultatif qui vient toujours en dernier et quitte le mode extrait avec le curseur à la position spécifiée.

Pour aller plus loin dans la création de Snippet personnalisés, vous pouvez consulter la documentation complète (en anglais) : https://code.visualstudio.com/docs/editor/userdefinedsnippets