Commandes personnalisées dans Visual Studio Code : tâches, extraits de code et raccourcis

Guide Alpha » Game » Commandes personnalisées dans Visual Studio Code : tâches, extraits de code et raccourcis

Si vous passez beaucoup de temps à programmer, vous vous demanderez tôt ou tard comment automatiser les tâches répétitives dans Visual Studio Code : exécuter des scripts, transformer du texte sélectionné, lancer des tests ou ouvrir votre projet dans le navigateur en quelques frappes. VS Code est bien plus qu’un simple éditeur ; grâce aux commandes personnalisées, aux tâches, aux extraits de code et aux raccourcis, vous pouvez l’adapter entièrement à vos besoins.

Ce guide vous propose un tour d'horizon complet des options de personnalisation pour créer un flux de travail sur mesure : commandes basées sur tasks.json, extraits de code, raccourcis clavier et fichiers de configuration JSON , interaction avec la palette de commandes et intégration avec d'autres environnements comme GitHub Codespaces ou encore les projets Visual Studio et .NET . L'objectif ? Vous offrir un environnement optimisé et performant, parfaitement adapté à vos besoins.

Concept de commandes personnalisées dans Visual Studio Code

Lorsqu'on parle de commandes personnalisées dans VS Code, on associe généralement plusieurs éléments : les tâches, les raccourcis clavier, les extraits de code et la palette de commandes elle-même . Le but est d'exécuter des actions spécifiques, simples ou complexes, rapidement grâce à une commande ou une combinaison de touches.

Un exemple typique consiste à vouloir faire ce que permet Geany : envoyer un bloc de texte sélectionné à un programme externe et le remplacer par le résultat de ce programme . Cette fonctionnalité n'est pas intégrée à VS Code, mais vous pouvez vous en approcher en combinant des tâches de type shell ou processus, des extensions spécifiques et des raccourcis clavier . De plus, vous disposez d'autres outils puissants comme les extraits de code et les curseurs multiples qui, en pratique, résolvent de nombreux problèmes d'automatisation de code.

L'essentiel est de comprendre que VS Code est conçu pour être hautement configurable : langage, thèmes, espaces de travail, extensions, paramètres avancés, tâches et raccourcis . Tout cela est contrôlé par des fichiers JSON (settings.json, tasks.json, keybindings.json, extraits de code, etc.) et par l'interface graphique intégrée à l'éditeur.

Outre l'éditeur léger VS Code, il existe Visual Studio (l'environnement de développement intégré complet de Microsoft) qui permet également de personnaliser et d'exporter les raccourcis clavier . Bien que légèrement différent, le principe d'attribution de commandes aux touches et de partage des configurations est très similaire.

Personnalisation générale de Visual Studio Code

L'un des principaux atouts de VS Code réside dans sa personnalisation quasi-totale : langue de l'interface, thème de couleurs, flux de travail, extensions, paramètres, tâches et raccourcis . Le tout est organisé en plusieurs catégories claires au sein même de l'éditeur.

Changer la langue de l'éditeur

Par défaut, VS Code est installé en anglais, mais vous pouvez Configurez l'interface en espagnol en installant le pack de langue.Le processus typique consiste à ouvrir la palette de commandes avec Ctrl + Maj + P o F1Tapez quelque chose comme « configurer la langue d'affichage » et sélectionnez le pack de langue espagnole.

Une fois le module linguistique installé, l'éditeur affichera un message vous invitant à redémarrer pour appliquer la modification . Après le redémarrage, l'interface, les menus et les messages s'afficheront en espagnol. Si, pour une raison quelconque, la modification n'est pas prise en compte, vous pouvez désinstaller le module linguistique puis le réinstaller pour forcer la modification.

Thèmes de couleur et d'apparence

Visual Studio Code propose plusieurs thèmes de couleurs répartis en trois groupes principaux : sombre, clair et à contraste élevé . Le thème par défaut est « Sombre moderne », mais vous pouvez le modifier via le menu Apparence ou en cliquant sur l’icône d’engrenage (Gérer) située en bas à gauche.

Lorsque vous ouvrez le sélecteur de thèmes, vous verrez une liste filtrable ; il vous suffit de cliquer sur le thème souhaité pour l’appliquer instantanément . Vous pouvez par exemple passer du thème « Moderne sombre » au thème « Moderne clair » pour utiliser un fond clair, ou rechercher d’autres thèmes installés via les extensions pour une personnalisation encore plus poussée.

Zones et espaces de travail

VS Code organise votre code en espaces de travail. La configuration la plus courante consiste à utiliser un dossier comme racine du projet : c’est l’espace de travail classique. Il suffit d’ouvrir un dossier depuis le menu, et l’explorateur de VS Code l’utilisera comme base.

À partir de la version 1.18, les espaces de travail à dossiers multiples ont été introduits , permettant de regrouper différents dépôts ou projets au sein d'un même environnement. Ces espaces de travail sont enregistrés sous forme de fichiers de configuration que vous pouvez rouvrir ultérieurement.

Dans de nombreux contextes pédagogiques ou pour des projets simples, il est judicieux de continuer à utiliser un seul dossier par projet , pour des raisons d'organisation et pour isoler les configurations spécifiques au sein de chaque cours ou application.

Extensions : la porte d’entrée vers plus de commandes

La magie de VS Code réside en grande partie dans ses extensions, qui enrichissent les fonctionnalités de l'éditeur avec de nouveaux langages, outils, débogueurs, extraits de code et commandes personnalisées . Toutes ces extensions sont disponibles sur la Place de marché Visual Studio Code et se gèrent facilement directement depuis l'éditeur. Si vous recherchez des idées ou des ressources, consultez nos conseils et actualités logicielles.

Pour installer des extensions, il suffit de cliquer sur l'icône Extensions dans la barre latérale, de rechercher par nom ou mot-clé, d'ouvrir les détails de l'extension et de cliquer sur Installer . Certaines extensions nécessitent un redémarrage de l'éditeur pour être activées ; d'autres s'activent automatiquement. Une fois installées, elles ajoutent généralement leurs propres commandes à la palette de commandes, que vous pouvez combiner avec des raccourcis clavier et des tâches.

Préférences de configuration (settings.json)

VS Code distingue deux niveaux de paramètres : les paramètres utilisateur (globaux) et les paramètres d’espace de travail . Les paramètres globaux s’appliquent à tout ce que vous ouvrez, tandis que les paramètres d’espace de travail n’affectent que le ou les dossiers de l’espace de travail actuel.

Les modifications s'effectuent généralement depuis l'écran Paramètres, mais elles sont toutes enregistrées dans deux fichiers JSON nommés settings.json : un fichier global situé dans le profil utilisateur et un autre dans le dossier .vscode de chaque projet. Vous pouvez afficher uniquement les options modifiées grâce au filtre situé en haut à droite. Si vous préférez modifier manuellement les fichiers JSON, des raccourcis sont disponibles sur cet écran.

Lorsque vous travaillez directement avec settings.json ou tout autre fichier de configuration JSON, il est essentiel d'écrire correctement les chemins : utilisez des barres obliques simples (/) ou des doubles barres obliques inverses (\\), mais jamais une seule barre oblique inverse (\) , car en JSON, une barre oblique inverse est interprétée comme un caractère d'échappement. Si vous utilisez Linux, consultez les conseils spécifiques à votre distribution dans notre guide des astuces logicielles Linux.

Lorsque vous travaillez directement avec settings.json ou tout autre fichier de configuration JSON, il est très important d'écrire correctement les chemins : utilisez des barres obliques simples (/) ou des doubles barres obliques inverses (\\), mais jamais une seule barre oblique inverse (\) , car en JSON la barre oblique inverse simple agit comme un caractère d'échappement.

Les tâches dans Visual Studio Code : la base de nombreuses commandes personnalisées

Les tâches VS Code constituent l'un des moyens les plus puissants de créer des commandes personnalisées. Une tâche est essentiellement une définition JSON structurée qui spécifie la commande à exécuter, ses arguments et le format d'affichage du résultat , entre autres détails. Elles sont enregistrées dans le fichier tasks.json.

On peut distinguer les tâches globales (utilisateur) des tâches d'espace de travail . Les tâches globales sont disponibles dans tous les projets, tandis que les tâches d'espace de travail existent uniquement dans le dossier ou l'espace de travail contenant le fichier .vscode/tasks.json . Cela permet, par exemple, d'avoir une tâche « Déploiement complet » différente pour chaque projet.

Préparation du fichier tasks.json

Pour utiliser les tâches dans un projet classique, ouvrez le dossier du projet, vérifiez la présence d'un dossier caché `.vscode` à la racine , et s'il n'existe pas déjà, créez-y un fichier nommé ` tasks.json` . Si vous utilisez l'interface de VS Code, l'éditeur générera un modèle lors de la création d'une nouvelle tâche.

Dans le cas d'une tâche globale, VS Code créera le fichier tasks.json dans le dossier de configuration utilisateur (sous Windows, dans le profil utilisateur, à l'emplacement AppData\Roaming\Code\User). Vous pourrez ensuite définir autant de tâches que vous le souhaitez et les réutiliser dans différents projets, pourvu qu'elles soient pertinentes pour votre environnement.

Structure de base d'une tâche

Chaque tâche est définie par une série de propriétés JSON. Les plus importantes pour la conception de commandes personnalisées sont l'étiquette, le type, la commande et les arguments , bien qu'il en existe beaucoup d'autres pour contrôler des comportements avancés.

• étiquette: nom descriptif de la tâche ; c’est le texte que vous verrez lorsque vous l’exécuterez.
• type: type de tâche, par exemple shell, process, npm, gulp, grunt o typescript.
• commander: la commande à exécuter, telle que npm run dev o ionic serve.
• args: liste des arguments supplémentaires pour la commande (facultatif).
• groupe: regroupement des tâches, où vous pouvez indiquer mots (build, test o noneet si c'est le est par défaut du groupe.
• problèmeMatière: règles de détection des erreurs et des avertissements dans la sortie de la commande.
• détail: texte explicatif sur le rôle de la tâche.
• présentation: contrôle la façon dont la sortie est affichée dans le terminal intégré : si la commande est vue (echo), lorsque la fenêtre s'ouvre (révéler), si elle se concentre (concentration ) et le type de panneau (panneau: shared, dedicated, new).
• options d'exécution y courir: quand et comment la tâche est lancée, par exemple folderOpen pour le démarrer lors de l'ouverture du projet.

Grâce à ces éléments, vous pouvez créer tout type de projet, depuis une tâche minimale qui lance un serveur de développement jusqu'à un pipeline interne qui compile, exécute des tests et déploie votre application en une seule commande.

Tâches simples : une seule commande

Une tâche simple consiste à effectuer une seule action. Imaginez un projet Ionic dans lequel vous souhaitez une commande « Démarrer le serveur » qui lance… ionic serve Lors de l'ouverture du dossier, il suffirait de définir une tâche de type shell avec la commande correspondante et, si vous souhaitez aller plus loin, ajoutez runOn : "folderOpen" pour s'exécuter automatiquement dès que l'espace de travail démarre.

Pour lancer manuellement une tâche, la méthode habituelle consiste à ouvrir la palette de commandes avec Ctrl + Maj + P, Écrire Exécuter la tâche et choisissez dans la liste le étiquette que vous avez assignée. S'il s'agit de la tâche de compilation ou de test par défaut, elle s'intégrera également aux autres fonctions de l'éditeur.

Tâches composées : plusieurs commandes enchaînées

Le véritable potentiel du fichier tasks.json se révèle dans les tâches composées. Ce type de commande personnalisée permet d'exécuter plusieurs sous-tâches de manière séquentielle ou en parallèle . Un exemple classique est la tâche « Déploiement complet » qui exécute d'abord les tests, puis compile l'application et enfin la déploie via SSH.

La propriété clé ici est dépend de, où vous spécifiez les autres tâches à exécuter lors du lancement de la tâche principale. Vous pouvez également contrôler l'ordre d'exécution. dépend de l'ordre, que admite valores como sequence o parallel pour décider si elles sont exécutées séquentiellement ou simultanément.

Si l'une des sous-tâches échoue, l'exécution de la suivante est interrompue par défaut, sauf si vous lui demandez explicitement de continuer. Ainsi, une seule commande dans la palette de commandes (ou associée à un raccourci clavier) permet d'exécuter l'intégralité du processus d'intégration et de déploiement de votre projet.

Extraits de code personnalisés sous forme de « pseudo-commandes »

Outre les tâches, une autre méthode très pratique pour créer des « commandes » personnalisées dans VS Code consiste à utiliser des extraits de code . Ces derniers n'exécutent pas de processus externes, mais permettent d'insérer des blocs de code entiers à l'aide d'un préfixe et de la touche Tabulation, ce qui représente un gain de temps considérable lors de l'écriture de structures répétitives.

Pour créer des extraits de code, ouvrez la palette de commandes (Ctrl + Maj + P) et recherchez quelque chose comme « extrait de code ». Vous pourrez ensuite choisir si vous souhaitez un fichier d'extrait de code. de défis ou spécifique à un langage particulier (par exemple, PHP). VS Code ouvrira un fichier JSON (par exemple, php.json) dans lequel vous ajouterez vos définitions.

Dans ce JSON, chaque extrait comporte trois champs principaux : préfixe (le raccourci que vous allez écrire), corps (le contenu du code, ligne par ligne) et description (une brève explication pour vous reconnaître lorsque vous avez plusieurs extraits).

Une technique utile consiste à utiliser le même préfixe de base pour tous vos extraits de code personnalisés, par exemple, un préfixe commençant par un trait de soulignement comme _wpada . Cela évite les conflits avec les raccourcis créés par les extensions et vous permet de reconnaître instantanément les extraits de code que vous avez définis.

Pour une insertion fluide, vérifiez dans vos paramètres que l' option `editor.tabCompletion` est activée . Cela vous permet de saisir le préfixe, et la touche Tab insérera automatiquement l'extrait sélectionné.

Exemple d'extrait de code WordPress et utilisation des tabulations

Imaginez un extrait de code appelé « WP Ajouter une action » associé au préfixe _wpada dans vos extraits de code PHP. En écrivant ce préfixe dans un fichier PHP, VS Code affichera la liste des extraits de code contenant ce texte, y compris le description que vous avez miseet, après confirmation, il insérera le code que vous avez défini.

L'un des grands avantages des extraits est qu'ils peuvent résister onglets numérotés como $1, $2, $3Le curseur se déplace d'une position à l'autre à chaque fois que vous appuyez sur Tab, ce qui vous permet de préparer plusieurs positions pour la saisie. Vous pouvez même répéter le même nombre ($1) dans différentes parties de l'extrait afin qu'un multicurseur et écrivez la même chose à ces mêmes endroits en même temps.

Vous pouvez ainsi créer un extrait de code qui, par exemple, insère la structure d'une fonction avec son nom à plusieurs endroits, un commentaire de documentation et le code prêt à être écrit, le tout contrôlé par des tabulations. C'est une méthode très pratique pour standardiser les modèles de code au sein d'un projet, sans avoir à se souvenir de la structure exacte à chaque fois.

Créez des extraits de code encore plus rapidement grâce aux extensions

Si la modification de JSON vous semble trop fastidieuse, des extensions comme snippet-creator vous permettent de créer des extraits de code directement à partir du code existant dans un fichier. Leur fonctionnement est généralement le suivant : vous écrivez le bloc de code à généraliser, ouvrez la palette de commandes, recherchez une option comme « Créer un extrait », et l’extension vous demandera un nom, un préfixe, une description et le langage.

Une fois la génération terminée, l'extrait de code est automatiquement enregistré dans le répertoire JSON correspondant. Vous pouvez ensuite l'appeler en utilisant son préfixe et la touche Tabulation . Bien que certaines de ces extensions ne soient plus prises en charge, cette méthode reste pratique pour générer rapidement de nombreux extraits de code.

Raccourcis clavier dans VS Code et leur relation avec les commandes

Les raccourcis clavier sont essentiels à la fluidité de l'ensemble. Ils permettent de lancer des commandes natives de l'éditeur, d'exécuter des tâches, d'activer des extensions ou de contrôler l'édition de code sans quitter le clavier des yeux. Plus vous les utiliserez, plus votre flux de travail quotidien sera fluide.

Visual Studio Code propose une vaste collection de raccourcis prédéfinis pour des actions telles que l'ouverture de fichiers, la navigation entre les onglets, la duplication de lignes, l'ajout de commentaires au code, l'ouverture du terminal intégré, la recherche et le remplacement, le déplacement entre les symboles, et bien plus encore. Il vous permet également de créer vos propres raccourcis et de les personnaliser à votre guise.

Créer, modifier et supprimer des raccourcis clavier

Pour gérer les raccourcis clavier, vous pouvez ouvrir le menu des préférences clavier en cliquant sur l'icône d'engrenage ou en utilisant la commande Préférences : Ouvrir les raccourcis clavier . Un onglet s'ouvrira alors, affichant un tableau présentant toutes les commandes disponibles et leurs combinaisons actuelles.

Pour attribuer un nouveau raccourci à une commande, recherchez-la dans la liste (vous pouvez filtrer par nom, par exemple en saisissant « mises à jour » ou une partie du nom en anglais) et double-cliquez dessus pour spécifier la combinaison de touches . Si vous utilisez, par exemple, Ctrl+Alt+A et que cette combinaison est disponible, elle sera attribuée à la commande. Si une autre combinaison était déjà associée, vous pouvez la modifier ou la supprimer via le menu contextuel.

De plus, un fichier JSON spécifique, keybindings.json , permet de définir directement les raccourcis clavier sous forme d'objets JSON. C'est très pratique pour copier votre configuration de touches entre ordinateurs, la partager avec votre équipe ou si vous préférez une approche déclarative.

fichier keybindings.json et étendue du raccourci

Le fichier global keybindings.json est stocké dans le même dossier de configuration utilisateur que settings.json. Il est généralement vide au départ et se remplit au fur et à mesure que vous personnalisez ou ajoutez des raccourcis depuis l'interface graphique ou en les saisissant manuellement.

Dans ce fichier, vous pouvez, par exemple, créer des raccourcis pour ouvrir des fichiers dans différents navigateurs, lancer des tâches spécifiques ou activer des commandes d'extension . Chaque entrée indique la combinaison de touches, la commande et, éventuellement, les conditions de contexte.

Il est important de noter que ces raccourcis ont une portée globale dans VS Code, c'est-à-dire qu'ils s'appliquent à tous les espaces de travail . Si un raccourci déclenche une tâche qui n'existe pas dans l'espace de travail actuel (car aucun fichier tasks.json ne contient cette balise), le raccourci restera sans effet. Par conséquent, il est conseillé de veiller à la cohérence entre vos raccourcis et les tâches que vous utilisez dans chaque projet.

Maîtriser les raccourcis : basiques, avancés et astuces pour s’en souvenir

Pour tirer pleinement parti des commandes personnalisées, il est utile d'apprendre quelques raccourcis de navigation et d'édition de base : ouvrir des fichiers avec Ctrl+P , changer d'onglet avec Ctrl+Tab , fermer et rouvrir des onglets avec Ctrl+W et Ctrl+Shift+T , commenter et décommenter avec Ctrl/ , dupliquer des lignes ou les déplacer avec des combinaisons de touches Alt et flèches, etc.

Une fois les bases acquises, vous pouvez passer à des fonctionnalités avancées telles que l'utilisation de plusieurs curseurs avec Alt+clic , la sélection verticale avec Maj+Alt pendant le glisser-déposer, la recherche de symboles avec Ctrl+T ou l'accès aux définitions avec F12 . Tout cela vous permet de vous affranchir largement de la souris et de naviguer avec une agilité accrue.

Si vous avez du mal à vous souvenir de tous les raccourcis, VS Code intègre un panneau de référence accessible avec Ctrl+K ou Ctrl+S , et de nombreuses actions affichent leurs raccourcis correspondants dans les menus contextuels. Des extensions de type « aide-mémoire » sont également disponibles, et si vous préférez la méthode traditionnelle, vous pouvez toujours imprimer un aide-mémoire avec vos raccourcis favoris et le garder à portée de main jusqu'à ce que vous les ayez mémorisés.

Visual Studio classique et ses raccourcis personnalisés

Bien que ce guide soit consacré à VS Code, il convient de préciser que l' IDE Visual Studio permet également une personnalisation très poussée des raccourcis clavier . Le principe est similaire, même si l'interface et les noms des menus diffèrent.

Dans Visual Studio classique, ouvrez la boîte de dialogue Options, accédez à la section Clavier et recherchez les commandes par leur nom sans espaces , par exemple « solutionexplorer ». Sélectionnez ensuite la commande, choisissez le contexte (par exemple Global) et attribuez-lui un raccourci clavier.

La notion de contexte est importante : si un raccourci est défini uniquement dans le contexte global, il exécutera toujours la même commande . Cependant, il est possible d’attribuer le même raccourci à différentes commandes selon que l’on se trouve dans l’Explorateur de solutions, un concepteur spécifique, etc. Dans ce cas, le contexte spécifique prévaut.

De plus, Visual Studio offre la possibilité d' exporter et d'importer les configurations de clavier . Vous pouvez enregistrer uniquement la partie « Clavier » dans un fichier et la partager avec vos collègues afin que tous disposent des mêmes raccourcis clavier, tout comme vous pouvez synchroniser votre fichier keybindings.json dans VS Code.

Palette de commandes et espaces de code GitHub

La palette de commandes de VS Code est le point d'entrée principal pour presque toutes les actions : exécuter des tâches, lancer des extraits de code, activer des commandes d'extension et gérer les fonctionnalités de GitHub Codespaces . Vous y accédez avec Ctrl+Maj+P ou F1 , puis il vous suffit de commencer à saisir le nom de la commande souhaitée.

Dans Codespaces, la palette de commandes propose des actions spécifiques telles que l'arrêt de l'espace de code actuel, la reconstruction du conteneur de développement, l'ajout de configurations prédéfinies ou l'exportation des journaux . Saisissez simplement « Codespaces » pour afficher les commandes correspondantes.

Si, par exemple, vous devez appliquer des modifications secrètes ou souhaitez changer le type de machine, vous devrez… Arrêtez et redémarrez l'espace de codeCela se fait depuis la palette en saisissant une commande du type « Arrêter l’espace de code actuel ». Pour reconstruire le conteneur après modification, devcontainer.json ou l' DockerfileVous rechercherez « Reconstruire le conteneur » et sélectionnerez la commande correspondante.

Il existe également des commandes pour exporter tous les journaux relatifs à l'espace de code ou pour consulter les journaux de création des conteneurs . Celles-ci sont très utiles en cas de problème lors de l'installation, afin de diagnostiquer précisément ce qui s'est passé pendant le processus de création de l'environnement distant.

En définitive, la palette de commandes devient le point unique à partir duquel découvrir et lancer toutes les commandes disponibles , qu'elles soient natives de l'éditeur ou fournies par des extensions ou par l'environnement GitHub Codespaces lui-même.

Compte tenu de tout ce qui précède, il est facile de comprendre pourquoi Visual Studio Code a acquis une place si importante auprès des développeurs : avec un peu d’attention, vous pouvez combiner tâches, extraits de code, raccourcis et configuration JSON pour créer un environnement parfaitement adapté à votre flux de travail, transformer du texte presque exactement comme dans des éditeurs tels que Geany et, de manière générale, vous libérer de nombreuses tâches mécaniques pour vous concentrer sur ce qui compte vraiment : écrire et maintenir du code de qualité avec le moins d’efforts supplémentaires possible.

Article connexe:

Guide complet pour exécuter des programmes dans l'invite de commandes : astuces, commandes et conseils