Les tâches dans VS Code

Article écrit par Benoit Caccinolo

Ce que j’apprécie avec l’éditeur VS Code, c’est que sa prise en main est aisée. En une demi-journée, vous êtes productif. Les commandes principales sont toutes regroupées dans la toolbar latérale :

• naviguer rapidement dans le projet
• faire une recherche globale
• commiter ses modifications

VS Code est simple d’utilisation mais reste très configurable. Il possède un système d’extensions vous donnant accès à un grand nombre de fonctionnalités tierces (debuggers, langages, thèmes…).

Parmi cet océan de fonctionnalités, je me suis mis à utiliser récemment les tâches VS Code.

Travaillant sur un projet entièrement dockerisé, lancer les tests était fastidieux. Pour cette raison, j’ai créé ma première tâche pour lancer mes tests directement dans mon container de test. J’ai rapidement trouvé cela intéressant et j’ai commencé à l’utiliser pour toutes mes tâches sur mes projets, principalement au lancement des tests et des linters.

Chaque projet contient des tâches, des scripts devant être régulièrement lancés en console. Cela peut être une tâche de mise à jour des dépendances avec la commande npm update ou encore le lancement d’une tâche de migration avec la commande rake db:migrate.

Quel est l’avantage de lancer ses commandes via une tâche plutôt que via mon terminal comme on le fait habituellement ? Un des grands avantages est que l’on reste dans le même contexte, on ne quitte pas l’éditeur. Quand vous êtes en train d’essayer de faire passer des tests, c’est fatigant de passer sans cesse du terminal à votre éditeur. De plus la combinaison Option + clic sur le chemin d’un fichier, ouvre directement le fichier contenant l’erreur remontée par vos tests.

Comment créer une tâche dans VS Code ?

Pour créer une tâche dans VS Code, une fois votre projet ouvert, lancer la commande Tasks: Run Task. L’éditeur va vous proposer de créer un fichier de tâches pour le projet actuel. Un fichier .vscode/tasks.json sera créé à la racine du projet. Il contient le squelette d’une tâche.

{   "version": "2.0.0",   "tasks": [     {       "label": "echo",       "type": "shell",       "command": "echo Hello"     }   ] } 

Une fois le fichier sauvegardé, lancer de nouveau la commande Tasks: Run Task. La tâche echo est maintenant disponible. En lançant la tâche, VS Code demande de sélectionner un problemMatcher. Je ne l’ai jamais utilisé mais cela permet de parser les données de sortie de la tâche. Pour faire simple, sélectionner simplement Continue without scanning the task output. Un panneau va s’ouvrir sur le côté avec la sortie de la tâche. Pour plus d’information sur les problemMatchers se référer à la documentation.

Customisons la présentation !

Vous pouvez maintenant utiliser ce modèle de tâche pour créer les vôtres. Une section non présente de base mais bien utile est presentation. Cette option permet de configurer le comportement du panneau affichant le résultat de la tâche. En voici un exemple :

{   "tasks": [     {       ...       "presentation": {         "echo": true,         "reveal": "always",         "focus": true,         "clear": false       }     }   ] } 

Parcourons les options listées dans cet exemple :

• "echo": true : la sortie de la tâche est toujours affichée
• "reveal": "always" : le panneau est toujours affiché
• "focus": true : le focus du curseur est positionné sur le panneau latéral. Cela permet de fermer cette partie plus facilement, à l’aide de la touche Entrée, pour retourner dans le code par la suite
• "clear": false : le terminal n’est pas nettoyé avant que la tâche ne soit lancée. On conserve ainsi l’historique des tâches précédentes

Ce n’est ici qu’une partie des options de présentation.

Des commandes dynamiques

Il est possible de créer des commandes dynamiques à l’aide de variables de substitution mises à disposition pour créer une commande. Un exemple courant utilisant cette fonctionnalité est le fait de lancer les tests présents dans le fichier ouvert. La commande est :

"command": "rspec ${relativeFile}" 

Voici la commande pour lancer le test se trouvant juste sous le curseur :

"command": "rspec ${relativeFile}:${lineNumber}" 

La liste des variables les plus intéressantes :

• ${workspaceFolder} – le chemin du projet ouvert (ex : ‘/Users/joe/sources/my_project’)
• ${file} – le nom du fichier en cours d’édition (ex : ‘hello_world.js’)
• ${relativeFile} – le chemin du fichier relativement à workspaceFolder (ex : ‘/Users/joe/sources/my_project/hello_world.js’)
• ${lineNumber} – le numéro de la ligne où se trouve le curseur
• ${selectedText} – le texte sélectionné (ex : «console.log(‘hello’)»)

La liste complète se trouve dans la documentation de VS Code.

Et la cerise sur le gâteau !

VS Code va même plus loin, il se propose d’extraire les tâches existantes de votre projet. Par exemple, sur un projet Ruby on Rails, toutes les tâches rake sont détectées. En lançant la commande «Tasks : configure task», les tâches détectées seront listées.

En sélectionnant une tâche, elle est directement copiée dans tasks.json. Vous pouvez ensuite la configurer si nécessaire. Elle est ensuite accessible dans la liste des tâches.

Et bien plus

Ceci n’est que le début de ce qu’il est possible de faire avec les tâches VS Code. Pour aller plus loin reportez-vous à la documentation.