Créer des snippet sur VSCode pour augmenter votre productivité

Qui n’a pas tappé un millier de fois echo ou console.log? Voir function(){}, ou encore () => {} ?

Grâce aux snippets customisés, vous allez pouvoir vous affranchir de cette corvée et être plus productif.

Trouver le menu des custom snippet dans VSCode

Faites la combinaison de touches CTRL + SHIFT + P (sous Windows) et tapez « snippet », sélectionnez custom

Ceci va vous amener au fichier csl.code-snippets . Voici un example de code que vous pouvez faire :

	"Print to console": {
		"scope": "javascript,typescript",
		"prefix": "cls",
		"body": [
			"console.log('$1','$2');",
		],
		"description": "Log output to console"
	}

Vous tapez le prefix « cls » et le body s’affichera. Notez les placeholder $1 et $2, vous pourrez basculer de l’un à l’autre avec la touche TAB.

Un site pour générer le code pour vos snippets.

Les snippets par framework ou langage

Il existe déjà dans la marketplace, des plugins où les snippets sont déjà définis. Allez dans la marketplace et tapez « snippet ». Emmet est intégré d’office et s’occupe du HTML et CSS. Pour le reste je vous laisse découvrir, il y en a pour tous les langages et frameworks. Normalement en 2024 VSCode est capable de détecter le langage de votre projet et vous propose des plugins à installer. Par exemple, si vous avez un fichier docker compose, il va vous proposer le plugin docker correspondant.

Retour en haut