Go to Hackademy website

Les tâches dans VS Code

Benoit Caccinolo

Posté par Benoit Caccinolo dans les catégories outils

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

vscode latérale toolbar

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.

creation d'une tache

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.

tâches détecté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.

L’équipe Synbioz.
Libres d’être ensemble.

Articles connexes

Krita, c'est quoi ?

07/11/2019

Je dessine, retouche, peins et anime sur Photoshop depuis plus de 10 ans. C’est bien simple, j’aime Photoshop autant que je le déteste. C’est un très bon logiciel malgré ses défauts. Il est complet,...

Un plugin Vim à la mimine

03/01/2019

Dans l’article précédent, intitulé une assez bonne intimité, je vous présentais GPG et le chiffrement de courriels. Nous avons alors remarqué que le contenu d’un courriel était encodé de sorte que le...

Une assez bonne intimité

20/12/2018

Si vous êtes utilisateur de MacOS, il y a de fortes chances que vous utilisiez Apple Mail pour échanger des courriels. Et comme vous êtes sensible à la confidentialité des informations que vous...

Tests end to end avec Jest et Puppeteer

05/07/2018

Dans cet article, on va partir sur des tests end to end. Pour planter le décor, un test end to end (e2e) est un test logiciel qui a pour but de valider que le système testé répond correctement à un...