Outil de conversion de code en extrait en ligne, prend en charge JavaScript / TypeScript / React / JSX / TSX      

Veuillez saisir un nom d'extrait (name)
Veuillez saisir un préfixe d'extrait (prefix)
Veuillez saisir une description d'extrait (description)
Veuillez saisir le texte du code (code body)
Type de génération
Résultat de l'extrait généré

VSCode Comment utiliser les extraits de code


Snippets in Visual Studio Code
Les extraits de code VS sont un moyen puissant d'améliorer votre productivité de codage en automatisant l'insertion de blocs de code fréquemment utilisés. Il peut s'agir de simples extensions de texte ou de modèles plus complexes avec des espaces réservés et des variables. Voici comment les exploiter :

Création d'extraits :

Accéder aux paramètres d'extrait : Accédez à Fichier > Préférences > Extraits utilisateur (Code > Préférences > Extraits utilisateur sur macOS). Vous pouvez également utiliser la palette de commandes (Ctrl+Maj+P ou Cmd+Maj+P) et saisir « Préférences : Configurer les extraits utilisateur ».

Choisir une langue : vous serez invité à sélectionner une langue pour votre extrait (par exemple, javascript.json, python.json, etc.). Cela garantit que l'extrait n'est disponible que pour cette langue spécifique. Vous pouvez également créer un fichier « Extraits globaux » si vous souhaitez que l'extrait soit accessible dans toutes les langues.

Définir l'extrait : les extraits sont définis au format JSON. Chaque extrait possède un nom, un préfixe (le raccourci que vous saisirez pour déclencher l'extrait), un corps (le code à insérer) et une description facultative.

Exemple (JavaScript) :
{
  "For Loop": {
    "prefix": "forl",
    "body": [
      "for (let i = 0; i < $1; i++) {",
      "  $0",
      "}"
    ],
    "description": "For loop with index"
  }
}
Dans cet exemple :

"For Loop" : le nom de l'extrait (pour référence).
"forl" : le préfixe. Tapez "forl" et appuyez sur Tab pour insérer l'extrait.
"body" : le code à insérer. $1, $2, etc. sont des tabulations (espaces réservés). $0 est la position finale du curseur.
"description" : une description facultative affichée dans les suggestions IntelliSense.
Utilisation d'extraits :

Tapez le préfixe : dans un fichier du type de langue approprié, commencez à saisir le préfixe que vous avez défini (par exemple, forl).

Sélectionnez l'extrait : IntelliSense de VS Code vous suggérera l'extrait. Sélectionnez-le avec les touches fléchées ou en cliquant.

Utilisez les tabulations : appuyez sur Tab pour naviguer entre les tabulations ($1, $2, etc.) et remplissez les valeurs.

Variables :

Les extraits peuvent également utiliser des variables telles que $TM_FILENAME, $CURRENT_YEAR, etc. Pour une liste complète, consultez la documentation de VS Code.

Exemple avec variables (Python) :
{
  "New Python File": {
    "prefix": "newpy",
    "body": [
      "#!/usr/bin/env python3",
      "# -*- coding: utf-8 -*-",
      "",
      "# ${TM_FILENAME}",
      "# Created by: ${USER} on ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}"
    ]
  }
}
En maîtrisant les extraits, vous pouvez réduire considérablement la saisie répétitive et garantir la cohérence de votre code. Expérimentez la création de vos propres extraits pour les modèles de code fréquemment utilisés et regardez votre efficacité de codage augmenter.