Maîtrisez les extraits de code de VS Code pour coder efficacement – techsyncer

Lorsque vous écrivez le dernier morceau de code dans Visual Studio Code (VS Code), vous surprenez-vous à taper la même chose encore et encore ? Peut-être avez-vous tapé une déclaration de fonction dix fois aujourd’hui ou défini le même ensemble de paramètres sur commande pour la 20ème fois. Saviez-vous que vous pouvez récupérer votre temps et votre santé mentale en utilisant les extraits de code de Visual Studio Code ?

Les extraits de code de Visual Studio Code sont de petits morceaux de texte stockés dans VS Code. Vous pouvez invoquer ces extraits via un menu ou une séquence de touches et pouvez économiser beaucoup de temps lorsque vous vous retrouvez à répéter des blocs de texte avec peu de différences entre chaque occurrence.

Par exemple, ci-dessous, vous pouvez voir en tapant simplement wvb dans VS Code, vous avez l’option d’étendre beaucoup plus de texte, comme indiqué par le texte Write-Verbose dans la boîte. C’est la puissance des extraits !

Dans cet article, vous allez apprendre à travailler avec les extraits de code de VS Code, y compris l’utilisation des extraits par défaut, des extraits d’extension, et même la création des vôtres !

Prérequis

Cet article sera un guide pratique pour mettre les mains à la pâte. Si vous prévoyez de suivre et d’apprendre à travailler avec les extraits de code de VS Code, vous aurez besoin de la version 1.17 de VS Code ou supérieure. Pour être tout à fait transparent, j’utiliserai VS Code 1.38.1 sur Windows.

Vous pouvez télécharger la dernière version de VS Code pour votre plateforme particulière ici.

Trouver les extraits de code de VS Code

Avant de commencer à créer vos propres extraits de code (ce que vous ferez), il est important d’apprendre comment trouver les extraits de code intégrés disponibles pour vous.

Vous pouvez trouver tous les extraits de code dans l’interface du menu. L’interface du menu vous permet de consulter et d’utiliser les extraits de code. Pour accéder au menu, vous pouvez soit appuyer sur F1 ou Ctrl-Shift-P, taper « extrait de code » et appuyer sur Entrée. Vous verrez un menu apparaître similaire à celui ci-dessous.

Lorsque vous appuyez sur Entrée sur Insérer un extrait de code, vous verrez une liste déroulante des extraits de code disponibles, comme indiqué ci-dessous. Vous pouvez voir qu’il y a plusieurs extraits de code disponibles par défaut et voir plus en faisant défiler vers le bas.

La liste déroulante des extraits de code disponibles vous permet de consulter les extraits de code intégrés qui sont disponibles en ajoutant une extension de langage dans VS Code.

Extensions de langage

Vous pouvez utiliser VS Code pour travailler avec de nombreux langages différents. Chaque langage a ses propres subtilités. Pour prendre en charge ces différences, VS Code prend en charge les extensions de langage.

Les extensions de langage fournissent à VS Code des fonctionnalités d’édition intelligentes pour différents langages de programmation. Les extensions de langage offrent au langage de programmation un support supplémentaire tel que :

Mise en évidence de la syntaxe
IntelliSense
Formatage
Vérification des erreurs
Complétion des extraits de code

Les extensions s’installent via le menu des extensions de VS Code.

Vous pouvez examiner la définition de ces extraits de code donnés par les extensions de langage en ouvrant le fichier JSON sur Windows situé à C:\Users<NomUtilisateur>.vscode\extensions\ms-code.-\snippets.

Les extensions en elles-mêmes n’ont rien à voir avec les extraits de code, mais vous constaterez que de nombreuses extensions sont livrées avec des extraits de code intégrés dont vous devez être conscient.

Expansion des extraits de code

Lorsque vous sélectionnez un extrait de code via l’interface du menu, vous verrez le contenu de l’extrait de code dans le fichier. Ce processus de conversion des définitions d’extraits de code en code utile s’appelle expansion.

Lorsque vous appelez le préfixe, VS Code lit ce préfixe spécifique et exécute les instructions que vous définissez dans l’extrait de code. Ces instructions peuvent varier d’un extrait de code à l’autre. Tout ce processus d’appel, de conversion et d’insertion de l’extrait de code s’appelle expansion.

Utilisation des extraits de code des extensions VS Code

Certains extraits de code sont inclus par défaut dans VS Code, mais lorsque vous installez une extension, ils viennent parfois avec leurs propres extraits de code. Des exemples d’extensions avec des extraits de code inclus sont l’extension Python de Microsoft, l’extension PowerShell de Microsoft et l’extension C# de Microsoft.

Emplacement des extraits de code des extensions

Ces extensions sont normalement installées dans Windows sous le répertoire C:\Users<NomUtilisateur>.vscode\extensions de votre ordinateur comme vous pouvez le voir ci-dessous.

Les dossiers des extensions suivent la convention de nommage ms-vscode.-. Chacun de ces dossiers contient un dossier snippet qui contient les extraits de code inclus avec l’extension.

Contents of *C:\Users<UserName>.vscode\extensions*

Exemple de Code Snippet d’Extension

Pour illustrer l’utilisation d’un extrait de code d’extension, prenons par exemple l’extension PowerShell. Cette extension est livrée avec quelques extraits utiles appelés region et for pour accélérer la création de blocs régionaux PowerShell et *boucles for*.

Disons que vous devez créer une boucle for dans un script PowerShell encadré dans un bloc régional. Le code pour faire cela est montré ci-dessous. Le code dans la capture d’écran ci-dessous fait 50 caractères de long et crée une boucle for à l’intérieur d’un bloc régional qui itère sur les nombres de 1 à 10.

Au lieu de taper chaque caractère dans cet exemple, vous pouvez utiliser deux extraits qui sont installés avec l’extension PowerShell de Microsoft appelés region et for.

Jetez un coup d’œil ci-dessous pour voir à quel point il est facile d’utiliser chacun de ces extraits pour économiser beaucoup de frappe !

Création de fragments de code personnalisés pour Visual Studio Code

Vous n’avez pas à vous limiter aux extraits de code fournis par VS Code lui-même ou par les extensions. Peut-être que les extensions existantes ne contiennent pas la mise en page de code dont vous avez besoin, ou vous souhaitez formater ces extraits vous-même. Heureusement pour vous, vous pouvez créer vos propres extraits de code ! Dans cette section, vous verrez comment faire exactement cela.

Pour créer un extrait personnalisé, ouvrez vos extraits utilisateur dans VS Code en cliquant sur Fichiers → Préférences → Extraits utilisateur. Cela ouvrira la portée de sélection de langage pour les extraits. C’est là que vous pouvez spécifier la langue dans laquelle vous souhaitez créer l’extrait. Vous pouvez voir un exemple de ce à quoi cela ressemble dans la capture d’écran ci-dessous.

En choisissant une langue, VS Code créera un fichier language.json dans C:\Users\\AppData\Roaming\Code\User\snippets sous Windows. Tous les extraits utilisateur créés pour différentes langues auront un fichier dans ce répertoire.

Les langues disponibles peuvent différer de ce que vous voyez ci-dessus. Dans cette installation de VS Code, de nombreuses extensions de langage ont déjà été installées.

Trouvez la langue pour laquelle vous souhaitez créer l’extrait et appuyez sur Entrée pour ouvrir le fichier JSON de la langue. C’est ici que vos extraits personnalisés seront stockés, et c’est ici que vous pouvez les créer.

Il y a quatre éléments de données à spécifier pour un extrait personnalisé:

A snippet name (line 9 below)
A prefix, which is what you’ll use to call your snippet (line 8 below)
A body, which is your snippet code that is loaded into your scripts (lines 7 to 3 below)
A description, which will show up in your IntelliSense (line 2 below)

*Example snippet definition of the For statement*

Création d’un extrait Python personnalisé

Voyons ce qu’il faut pour créer un extrait personnalisé pour le langage de programmation Python. Dans cet exemple, le préfixe dt invoquera un extrait Python personnalisé. Cet extrait affichera un message avec l’heure actuelle pré-remplie.

Créez le fichier JSON

Commencez par ouvrir le sélecteur de langage d’extrait, saisissez Python, et appuyez sur Entrée pour créer un fichier python.json. Cela ouvrira un fichier python.json dans le dossier C:\Users<NomUtilisateur>\AppData\Roaming\Code\User\snippets de Windows.

Vous pouvez voir son état par défaut dans l’image ci-dessous.

Attribution d’un Nom et d’un Préfixe

Maintenant, il est temps de commencer à éditer le fichier JSON. Tout d’abord, définissez le nom et le préfixe (dt). Les préfixes d’extrait sont courts et clairs, car c’est la valeur tapée pour appeler l’extrait. Plus le préfixe de l’extrait est court, moins vous avez de caractères à taper lorsque vous souhaitez l’appeler.

Vous pouvez voir un exemple de ce à quoi cela ressemble ci-dessous.

Définition du Corps

Le corps contient le code qui sera étendu lorsque l’extrait est appelé. Ce code peut être du texte simple et des commentaires. Il peut également avoir d’autres fonctions que vous verrez dans les sections suivantes. Si le corps a de nombreuses lignes, il y a quelques pièges auxquels vous devrez faire attention.

Chaque ligne doit être entre guillemets
Chaque ligne doit se terminer par une virgule
Toutes les lignes doivent être entre crochets (“[” et “]”)

Vous pouvez voir un exemple de ce à quoi ressemble le corps de l’exemple d’extrait ci-dessous.

Définition de la Description

La description est un message décrivant le préfixe comme indiqué ci-dessous et défini ci-dessous le corps.

La description sera affichée sous le préfixe dans la liste d’extraits et fournira plus d’informations sur ce que fait l’extrait. Cela aide également à différencier l’extrait d’autres créations similaires.

Voici une capture d’écran d’exemples d’extraits identifiant des préfixes et des descriptions.

Si vous n’avez pas déjà défini d’extraits personnalisés Python, une fois la création de l’extrait terminée, vous devriez avoir un fichier python.json qui ressemble à l’extrait de code ci-dessous.

{
    "DateTime Snippet": {
        "prefix": "dt",
        "body": [
            "import datetime",
            "dt = datetime.datetime.now()",
            "print(f\"The time is {dt} and this is a message\")"
        ],
        "description": "Prints a message with current time"
    }
}

Enregistrez ce fichier JSON et maintenant l’extrait personnalisé est disponible dans n’importe quel fichier Python dans VS Code.

Maintenant, lorsque vous ouvrez un onglet Python et tapez le préfixe dt, l’extrait personnalisé ci-dessous apparaît. Appuyez sur Entrée pour développer le corps de l’extrait dans l’onglet Python.

Créer un extrait JavaScript personnalisé en utilisant du texte inclus

Les extraits ne se limitent pas aux mots que vous définissez dans le corps de l’extrait. Les extraits peuvent également inclure du texte du fichier à partir duquel vous les appelez.

VS Code dispose de variables internes que vous pouvez utiliser. Ce sont des espaces réservés qui prennent le texte actuellement sélectionné et l’insèrent dans l’extrait. Par exemple, en plaçant la variable $TM_SELECTED_TEXT dans l’extrait, vous pouvez afficher le texte sélectionné. Consultez la page de référence des variables de VS Code pour une analyse complète de toutes les variables internes de VS Code.

Pour démontrer, créons un extrait qui crée simplement une ligne pour afficher le texte sélectionné dans la console appelée log-it.

Ouvrez le sélecteur de langage de l’extrait, tapez JavaScript, et appuyez sur Entrée pour créer un fichier javascript.json. Ce fichier ressemblera au fichier python.json créé dans la section précédente. Cette fois-ci, il contient du code JavaScript d’exemple au lieu de code Python. Vous pouvez voir son état par défaut dans la capture d’écran ci-dessous.

Maintenant, créez un extrait en utilisant le JSON suivant :

{
	"Print selected line to console": {
		"prefix": "log-it",
		"body": [
			"console.log('$TM_SELECTED_TEXT');"
		],
		"description": "Log highlighted text output to console"
	}
}

Enregistrez ce fichier JSON et vous pourrez maintenant utiliser cet extrait dans vos fichiers JavaScript.

Lorsque vous appelez cet extrait avec du texte surligné, il remplacera $TM_SELECTED_TEXT par le texte que vous avez surligné. Lorsque vous appelez cet extrait sans texte surligné, $TM_SELECTED_TEXT sera vide. Vous pouvez voir cela en action dans la capture d’écran ci-dessous.

*JavaScript `$TM_SELECTED_TEXT`Snippet in Action*

Création d’un extrait personnalisé PowerShell avec des espaces réservés

Jusqu’à présent, les exemples que vous avez vus étaient complets lorsqu’ils étaient appelés. Même le JavaScript suppose que vous avez surligné du texte au préalable. Mais que faire dans les cas où vous devez saisir des valeurs dans l’extrait après l’appel ?

Que faire si vous voulez taper la valeur dans le console.log() au lieu d’utiliser le texte surligné ? Et si vous voulez taper à différents endroits dans l’extrait ?

Dans cette section, vous apprendrez comment utiliser les taquets de tabulation pour vous permettre de saisir du texte dans le code produit par le snippet. Les tabulations sont des emplacements définis dans votre snippet où le curseur se déplacera. Ces emplacements sont visités dans l’ordre à chaque pression de la touche tabulation. Avec ces taquets de tabulation, vous pouvez saisir des valeurs dans le snippet après son expansion.

Les taquets de tabulation, définis en utilisant les variables du snippet $0, $1, $2, et ainsi de suite dans le corps du snippet, indiquent au snippet où le curseur ira ensuite lorsque vous appelez votre snippet et appuyez sur tabulation.

Les taquets de tabulation suivent un ordre normal (1 suit 2 suit 3, etc.) avec une exception : le taquet de tabulation 0 est l’endroit où le curseur se trouvera après tous les autres taquets de tabulation. Pour illustrer cela, le snippet ci-dessous se développe en un message Write-Output avec la date actuelle et un espace pour plus de texte.

Ce corps avec deux taquets de tabulation

$1 à la fin du message Write-Output
$0 à la ligne suivante pour que le snippet se termine sur une ligne vide

{
    "DateTime Snippet PS": {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message "The time is $((Get-Date).ToLocalTime()) and $1"","$0"
        ]
        "description": "PSCustomObject with 3 lines"
    }
}

Enregistrez ce snippet et appelez-le en tapant le préfixe dtPS dans un fichier PowerShell.

Lorsque le snippet se développe, votre curseur saute à la position du taquet de tabulation 1. À partir de là, ajoutez la valeur ou le code que vous souhaitez et appuyez sur tabulation pour déplacer le curseur vers le prochain taquet de tabulation. Cela continuera jusqu’à ce que vous ayez parcouru tous les taquets de tabulation que vous avez spécifiés.

Vous pouvez voir cela en action dans la capture d’écran ci-dessous.

Ajout de valeurs par défaut aux tabulations

Alors que les tabulations sont excellentes pour commencer, que se passe-t-il si vous avez besoin de valeurs spécifiques généralement à ces emplacements mais que vous souhaitez avoir la possibilité de les modifier, si nécessaire ? Il est maintenant temps d’inclure des valeurs par défaut.

L’exemple ci-dessus avait une tabulation, mais lorsque l’extrait de code s’est développé, il n’y avait pas de texte à sa place. Le curseur a sauté à l’emplacement de la tabulation, puis l’utilisateur a dû prendre le relais.

Si seulement il existait un moyen qu’une valeur puisse être là où se trouve la tabulation—de cette manière, l’extrait de code pourrait se développer et cette valeur serait étendue avec lui. Lorsque la tabulation arrive à cet endroit, la valeur par défaut pourrait être écrasée ou elle peut être ignorée.

Voyons comment ajouter des valeurs par défaut aux extraits de code personnalisés. Vous le ferez en modifiant le fichier JSON de l’extrait de code PowerShell ci-dessus.

Pour commencer, ouvrez le sélecteur de langage d’extrait de code, choisissez PowerShell, et changez les tabulations de $1 à ${1: ceci est mon message par défaut}. La valeur après le deux-points devient la valeur par défaut. Cette valeur est étendue avec l’extrait de code.

Lorsque cette tabulation est atteinte, deux choses peuvent se produire. La valeur par défaut peut être écrasée, ou elle peut être ignorée et conserver sa valeur par défaut.

Vous pouvez voir ci-dessous le changement dans le corps.

{
	"DateTime Snippet PS" {
		"prefix": "dtPS",
		"body" : [
			"Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and $1{1:this is my default message}\"",
			"$0"
		],
		"description": "PSCustomObject with 3 lines"
	}
}

Une fois mis à jour et enregistré, ces valeurs par défaut sont étendues et apparaissent également dans la fenêtre IntelliSense lorsqu’elles sont appelées, comme le montre la capture d’écran ci-dessous.

Les messages par défaut sont de bons exemples de ce que vous pouvez faire avec les arrêts tabulation. Les arrêts tabulation vous donnent également la possibilité de choisir. Dans la section suivante, vous allez voir un exemple d’ajout de choix à vos arrêts tabulation.

Ajout de choix aux arrêts tabulation

Les arrêts tabulation ne se limitent pas à avoir une valeur par défaut ou aucune valeur du tout. Ils peuvent être définis dans la définition de snippet de VS Code pour donner à l’utilisateur des options lorsque le snippet se développe également.

Peut-être avez-vous une situation où vous souhaitez choisir une valeur ou une commande différente dans un snippet. Au lieu de créer trois snippets différents avec des choix différents, vous pouvez modifier le snippet pour présenter un choix avec un arrêt tabulation, comme indiqué dans la capture d’écran ci-dessous.

Les arrêts tabulation présenteront un choix lorsque la syntaxe suivante est utilisée dans le corps du snippet:

${N|Choice1,Choice2,Choice3[,Choice]|}

L’arrêt tabulation indiqué ci-dessus a été modifié pour donner le choix de:

Write-Output
Write-Warning
Write-Error

Cela a été fait en plaçant deux caractères de barre verticale ( | ) après l’arrêt tabulation. Les choix sont placés à l’intérieur des barres verticales, séparés par des virgules. Vous pouvez voir cela dans le bloc de code ci-dessous.

${1|
    Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- Choix 1 
    Write-Warning -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- Choix 2
    Write-Error -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\" // <-- Choix 3
|}

Vous pouvez voir ci-dessous l’exemple de snippet.

{
    "DateTime Snippet PS" {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", Write-Warning -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\", Write-Error -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\"|}",
            "$0"
        ],
        "description": "PSCustomObject with 3 lines"
    }
}

Lorsque le snippet personnalisé se développe maintenant, le choix de l’option à choisir apparaîtra dans une fenêtre IntelliSense, comme on peut le voir dans la capture d’écran ci-dessous.

À partir d’ici, vous pouvez sélectionner le choix que vous souhaitez et le voir se développer dans ce choix. Dans notre exemple ci-dessous, la ligne de code entière est remplacée par l’option de choisir entre trois commandes Write différentes, et cela montre que chacune peut être appelée et exécutée sans problème.

Résumé

Les extraits personnalisés peuvent être du texte simple ou du code. Ils peuvent avoir des points d’arrêt afin que vous puissiez inclure des messages, des valeurs par défaut ou des choix, ainsi que du texte mis en surbrillance.

Cela ne doit pas être une tâche ardue consistant à taper chaque caractère de chaque bloc de code. Avec les extraits, vous n’avez pas à vous souvenir de la syntaxe exacte pour une boucle for, un foreach, ou une instruction switch à chaque fois. Les extraits sont parfaits pour cette niche.

I’ve shown Python, JavaScript, and PowerShell snippets in this post. VS Code snippets are available for many, many more languages. Your limits are only what you use and what you can think of!

Lecture supplémentaire

Introduction aux fonctions PowerShell