Les snippets dans VSCode

Voir la vidéo
Junior
Télécharger la vidéo

Les snippets sont un outil puissant de Visual Studio Code qui permet d'automatiser l'écriture de code répétitif. Dans cet article je vous propose de partager mes astuces pour tirer parti de cette fonctionnalité.

Création d'un snippet avec l'IA

Aujourd'hui l'écriture de snippet est plus simple que jamais avec l'utilisation de l'intelligence artificielle. Pour obtenir un résultat optimal n'hésitez pas à lui donner les instructions suivantes :

  • Le code que vous souhaitez transformer en snippet
  • Les instructions spécifiques (par exemple, rendre le nom du composant dynamique)
  • Les conventions que vous souhaitez appliquer

Par exemple :

Génère un snippet VSCode pour ce code (rend "name" dynamique et utilise les modifiers pour setName)

const [name, setName] = useState()

Et le code généré est : 

{
    "Use State with Dynamic Name": {
        "prefix": "rs",
        "body": [
            "const [${1:name}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initialValue})"
        ],
        "description": "Generate a useState hook with dynamic name and setter"
    }
}

Lors de mes tests les modèles que j'ai utilisés (claude et deepseek) donne en général un résultat proche de celui attendu.

Installation du snippet

Une fois le JSON du snippet obtenu vous pouvez l'ajouter à votre éditeur :

  1. Ouvrez le menu Fichier > Préférences > Configure User Snippets
  2. Sélectionnez le langage pour lequel vous souhaitez créer le snippet
  3. Collez votre snippet dans le fichier JSON
  4. Modifier le prefix pour sélectionner le racourci à utiliser

Ensuite, lorsque vous êtes sur un fichier de bon type, vous pouvez utiliser votre prefix puis appuyer sur Tab pour générer le code.

Création d'un snippet à la main

Pour des cas plus complexes les modèles d'IA vont avoir tendance à générer quelques erreurs (surtout sur des snippets PHP à cause des $ dans les noms de variable). Pour créer le code de base de votre snippet vous pouvez utiliser le site snippet-generator.app qui permettra de générer le JSON de base.

Attention à échapper les caractères spéciaux :

  • $ deviendra \\$
  • \ deviendra \\

Utilisation des "Tabstops"

Il est possible d'indiquer ou l'éditeur devra placer le curseur lors de la génération du code. Cela permet ainsi de personnaliser rapidement la génération en fonction de vos besoins.

  • $1, $2, $3 permet de définir où va se placer le curseur
  • On peut ajouter une valeur par défaut avec la syntaxe ${1:MaClass}
  • On peut utiliser une expression régulière pour remplacer ${1/REGEXP/REMPLACEMENT/}
  • Il est possible d'utiliser des modificateur pour transformer ce qui est capturé par l'expression régulière, par exemple pour mettre la première capture en minuscule (${1:/downcase}).

Par exemple, voici un morceau de snippet que j'ai pour du PHP :

[
"class ${1:${TM_FILENAME_BASE/Controller//}}Controller extends Controller",
"{",
"    public function index()",
"    {$0",
"        Gate::authorize('viewAny', $1::class);",
"        return view('${2/(.*)/${1:/downcase}/}.${1/(.*)/${1:/downcase}/}s.index', [",
"            '${1/(.*)/${1:/downcase}/}s' => $1::orderBy('id', 'desc')->paginate(20),",
"        ]);",
"    }",
"}",
]
Publié
Technologies utilisées
Visual Studio Code
Auteur :
Grafikart
Partager