Table des matières

Au cours de ce TD, vous découvrirez les principales fonctionnalités de Visual Studio Code (VSC). En particulier, vous apprendrez à :

• ouvrir un dossier contenant les fichiers d'un projet.
• reconnaître les principaux composants de l'interface de VSC.
• exécuter un script Python (avec et sans arguments).
• installer un paquet ou un module Python.
• utiliser un linter et un débogueur.

1. Préliminaires

👉 Téléchargez cette archive sur votre ordinateur.

👉 Déplacez ce fichier du dossier Téléchargements vers un dossier de votre ordinateur dans lequel vous conservez habituellement vos documents.

👉 Décompressez le fichier :

• Si vous utilisez Windows, vous pouvez faire un clic droit sur le fichier et choisir Extract all.
• Si vous utilisez macOS, vous pouvez simplement double-cliquer sur le fichier.

👉 Après avoir décompressé le fichier, vous devriez obtenir un dossier nommé lab0code.

2. Un aperçu de VSC

VSC est un éditeur de code qui offre plusieurs fonctionnalités pour faciliter le développement de logiciels.

👉 Ouvrez VSC de la même manière que vous ouvririez n'importe quel autre programme sur votre ordinateur.

Une fenêtre comme celle de la figure 1 devrait apparaître.

La barre d'activité (ang., activity bar) contient les boutons suivants :

• Le bouton Explorateur (ang., Explorer) vous donne accès au panneau Explorateur, où vos fichiers apparaîtront lorsque vous ouvrirez un dossier.
• Le bouton Recherche (ang., Search) ouvre le panneau Recherche, où vous pouvez rechercher du texte dans les fichiers d'un dossier ouvert.
• Le bouton Contrôle de code source (ang., Source Control) ouvre le panneau Contrôle de code source, où vous pouvez suivre les modifications apportées à vos fichiers à l'aide de Git (Git sera le sujet du TD 2).
• Le bouton Exécuter et déboguer (ang., Run and Debug) vous donne accès au débogueur VSC.
• Le bouton Extensions (ang., Extensions) ouvre un panneau où l'on peut installer et gérer les extensions de VSC. Les extensions sont des modules qui ajoutent des fonctionnalités à VSC.

En fonction des extensions que vous avez installées, la barre d'activité peut inclure d'autres icônes.

2.1 Ouvrir un dossier

👉 Ouvrez le dossier lab0code dans VSC : cliquer sur Ouvrir... dans la page d'accueil (voir Figure 1) et recherchez le dossier en utilisant le sélecteur de fichiers qui apparaît.

Les fichiers du dossier ouvert (le dossier racine – root en anglais – du projet) apparaissent dans l'Explorateur de VSC, comme le montre la figure 2.

3. Un coup d'œil rapide sur un code Python

👉 Dans l'Explorateur, double-cliquez sur le fichier socialnet.py.

Le fichier s'ouvre dans un onglet sur la partie droite de la fenêtre VSC.

Dans ce fichier, vous trouverez la définition d'une fonction nommée common_friends() et, juste après la définition, un code qui appelle la fonction : l'appel d'une fonction déclenche l'exécution de ses instructions.

Nous voulons maintenant exécuter le code. Mais avant cela, nous allons rapidement dire quelques mots sur l'environnement Python.

4. L'environnement Python

Une application Python est un ensemble de fichiers sources Python, qui sont des fichiers texte normaux.

Un fichier source est appelé :

• un script, s'il peut être exécuté directement. Le fichier socialnet.py est un script.
• un module, s'il contient la définition de variables et l'implémentation de fonctions qui peuvent être importées dans d'autres fichiers sources.

Un paquet est un groupe de modules apparentés qui, ensemble, réalisent une certaine fonctionnalité.

• Les modules d'un paquet sont souvent organisés dans une hiérarchie de dossiers et de sous-dossiers.
• Un exemple de paquet est matplotlib, qui contient les modules nécessaires pour créer des visualisations statiques, animées et interactives en Python.

Pour exécuter un script, vous avez besoin d'un environnement Python. Vous devriez déjà en avoir téléchargé et installé un depuis python.org.

L'installation comprend :

• un interpréteur Python. Un interpréteur est un logiciel capable de comprendre un programme écrit dans un langage de programmation et de l'exécuter.
• la bibliothèque standard Python, qui fournit des fonctions utiles, des types (par exemple, des entiers, des chaînes), des modules et des paquets. La liste des éléments inclus dans la bibliothèque standard est disponible ici.
• un gestionnaire de paquets appelé pip, un outil pour télécharger et installer des paquets et des modules Python supplémentaires non inclus dans la bibliothèque standard.

👉 En fonction de votre utilisation passée de Python, plusieurs environnements Python peuvent être installés sur votre ordinateur. Vérifions si c'est le cas :

• Ouvrez la palette de commandes de VSC : si vous êtes sous Windows, appuyez simultanément sur les touches Ctrl+Maj+P de votre clavier ; si vous êtes sous macOS, appuyez simultanément sur Cmd+Maj+P. Vous pouvez également cliquer sur le menu Affichage (dans la barre de menu supérieure) et sélectionner Palette de commandes.
• Un champ de texte devrait apparaître en haut de la fenêtre VSC. Tapez la commande suivante : Python : Sélectionner un interpréteur.
• La liste des interpréteurs Python installés sur votre ordinateur devrait apparaître. Pour chacun d'entre eux, vous devriez également voir le chemin d'accès au dossier dans lequel l'interpréteur est installé.
• L'interpréteur Python actuellement utilisé devrait être mis en évidence. Assurez-vous que l'interpréteur évidencé est la dernière version que vous avez installée.

5. Exécuter le code

Sélectionnez l'onglet dans lequel le script socialnet.py est ouvert. L'interpréteur Python actuel doit être visible en bas à droite de la fenêtre (voir figure 3).

👉 Cliquez sur le bouton d'exécution (voir Figure 3) pour exécuter le script sélectionné (socialnet.py).

Un terminal devrait automatiquement apparaître au bas de la fenêtre, où la sortie du programme est affichée.

5.1 Utilisation du terminal

Un terminal est une interface textuelle, où vous pouvez taper des commandes pour interagir avec le système d'exploitation.

👉 Maintenant nous allons voir comment exécuter un script Python depuis un terminal.

Utilisateurs Windows, cliquez ici

Tapez la commande suivante pour appeler l'interpréteur Python et afficher sa version :

python --version

Si vous obtenez une erreur Command not found, essayez la commande suivante :

py --version

Utilisateurs macOS, cliquez ici

Tapez la commande suivante pour appeler l'interpréteur Python et afficher sa version :

python3 --version

👉 En cas de réponse positive à la question précédente, exécutez le script socialnet.py.

Utilisateurs Windows, cliquez ici

Tapez la commande suivante :

python socialnet.py

ou

py socialnet.py

Utilisateurs macOS, cliquez ici

Tapez la commande suivante :

python3 socialnet.py

5.2 Passer des arguments

Vous pouvez passer un nombre quelconque d'arguments à un script Python. Dans le code, vous pouvez accéder aux arguments via sys.argv, une variable définie dans le module sys (qui fait partie de la bibliothèque standard de Python) qui contient les arguments sous la forme d'une liste de chaînes de caractères. Plus précisément :

• sys.argv[0] est le nom du script (socialnet_args.py dans notre exemple).
• Tout argument transmis au script sera disponible dans la sous-liste sys.argv[1:].

👉 Ouvrez le fichier socialnet_args.py dans VSC.

Ce fichier contient la définition d'une fonction common_friends() (la même que dans le script socialnet.py), où le réseau social est lu à partir d'un fichier dont le nom est passé en argument.

Prenez le temps de lire le code à partir de la ligne 25 et commentez-le avec votre chargé de TD. Notez que dans le dossier lab0code se trouve un fichier CSV socnet.csv qui contient un réseau social simple.

👉 Exécutez le script via le terminal en tapant la commande suivante :

Utilisateurs Windows, cliquez ici

python socialnet_args.py socnet.csv

ou

py socialnet_args.py socnet.csv

Utilisateurs macOS, cliquez ici

python3 socialnet_args.py socnet.csv

6. Installation de paquets et de modules

Si vous souhaitez télécharger et installer de nouveaux modules ou paquets qui ne font pas partie de la bibliothèque standard de Python, vous pouvez utiliser pip.

👉 Nous allons maintenant installer le module pyperclip, que nous utiliserons dans le TD 4.

Utilisateurs Windows, cliquez ici

Tapez la commande suivante :

python -m pip install pyperclip

ou :

py -m pip install pyperclip

Utilisateurs macOS, cliquez ici

Tapez la commande suivante :

python3 -m pip install pyperclip

👉 La commande précédente installe le nouveau module uniquement dans l'environnement Python actuel. Si vous changez d'environnement Python, le module pyperclip ne sera plus disponible et vous devrez le réinstaller.

7. Linting

Dans les fichiers socialnet.py et socialnet_args.py, vous devriez voir des soulignements ondulés bleues et jaunes. Ces soulignements sont ajoutés par l'une des extensions que vous avez installées lorsque vous avez configuré VSC : Pylint.

Pylint est un linter très utilisé, un programme qui lit et analyse le code source d'un programme afin de mettre en évidence des constructions problématiques qui peuvent produire une erreur lors de l'exécution du programme.

Notez qu'un linter n'exécute pas un programme pour découvrir les problèmes ; il le fait en lisant uniquement le code source. Ce processus est appelé analyse statique.

8. Débogage

Lorsque nous écrivons du code en Python ou, d'ailleurs, dans n'importe quel autre langage de programmation, nous sommes susceptibles de faire des erreurs qui entraîneront inévitablement des résultats indésirables et inattendus. Ces erreurs sont communément appelées bogues (ang., bugs).

Le processus de recherche de bogues dans un code est appelé débogage (ang., debugging) ; un logiciel qui nous aide à déboguer est appelé un débogueur (ang., debugger). Lorsque vous avez configuré VSC, vous avez installé l'extension Python qui comprend également un puissant débogueur Python.

👉 Ouvrez le script buggy.py.

Ce script contient une implémentation boguée du Tri par insertion (ang., Insertion Sort), un célèbre algorithme pour trier une liste d'éléments.

👉 Exécutez le script.

Vous devriez confirmer que le résultat du script n'est effectivement pas ce à quoi vous vous attendiez.

👉 Configurez le débogueur.

1. Sélectionnez le bouton Exécuter et déboguer dans la barre d'activité.

2. Le débogueur a besoin d'un fichier de configuration nommé launch.json. Créez-en un en cliquant sur create a launch.json file (Figure 4).

3. Un champ de texte apparaît en haut de la fenêtre. Sélectionnez Python Debugger (Figure 5).

4. Un autre champ de texte apparaît, dans lequel vous pouvez choisir la configuration de débogage. Sélectionnez Fichier Python Déboguer le fichier Python actuellement actif (Figure 6).

👉 Démarrez le débogage (Figure 7).

🤔 Avez-vous remarqué que le script buggy.py est exécuté jusqu'à sa terminaison, et que nous n'avons pas eu le temps de déboguer le code ? C'est là que les points d'arrêt entrent en jeu.

8.1 Les points d'arrêt

Un point d'arrêt (ang., breakpoint) pointe vers une instruction d'un programme où le débogueur met en pause l'exécution. Lorsque le programme est en pause, le développeur peut regarder les valeurs actuelles des variables dans l'espoir d'obtenir des indices sur la raison du bogue.

👉 Ajoutez un point d'arrêt au début de la boucle for, en faisant un clic la marge gauche de l'éditeur (Figure 8).

👉 Démarrez le débogueur. L'exécution devrait maintenant se mettre en pause au point d'arrêt.

Sur la gauche, vous devriez voir la valeur actuelle de toutes les variables et une barre d'outils de débogage (ang., debug toolbar) devrait apparaître (Figure 9). Le panneau Pile des appels (ang., Call stack) indique que l'instruction en cours d'exécution est dans la fonction insertion_sort() définie dans le module buggy.py.

8.2 Barre d'outils de débogage

Nous allons maintenant apprendre à utiliser les boutons de la barre d'outils du débogueur.

👉 Assurez-vous que vous avez ajouté un point d'arrêt, comme indiqué dans la Figure 8.

👉 Activez le point d'arrêt (clic droit sur le point d'arrêt gris et sélectionner Activer Point d'arrêt) et redémarrez le débogueur.

👉 Redémarrez le débogueur.

👉 Redémarrez le débogueur en cliquant sur le bouton Rédemarrer .

👉 Supprimez le point d'arrêt en cliquant simplement dessus, et ajoutez un nouveau point d'arrêt à la ligne 14 (où la fonction insertion_sort() est appelée).

👉 Redémarrez le débogueur en cliquant sur le bouton Rédemarrer .

👉 Redémarrez le débogueur en cliquant sur le bouton Rédemarrer .

👉 Arrêtez le débogueur en cliquant sur le bouton Arrêter (ang., Stop) .

8.3 Fonctionnalités supplémentaires du débogueur

Avant d'utiliser le débogueur pour trouver le bogue dans le script buggy.py, examinons d'autres fonctionnalités du débogueur.

Manipulation de variables

En plus du panneau Variables, vous pouvez consulter la valeur d'une variable en passant simplement la souris dessus (Figure 10).

Vous pouvez ajouter des expressions dans le panneau Espion (ang., Watch) (Figure 11). Dans notre exemple, la fonction insertion_sort() ne doit pas ajouter de valeur à la liste donnée en argument. Nous pouvons donc ajouter des expressions pour confirmer que c'est bien le cas.

Vous pouvez définir manuellement la valeur d'une variable en faisant un clic droit sur le nom de la variable dans le panneau Variable (Figure 12). Cette option est utile lorsque vous souhaitez modifier l'entrée d'une fonction et observer son comportement.

Les points de journalisation

En plus des points d'arrêt, VSC fournit un autre outil appelé points de journalisation (ang., logpoints). Le but d'un point de journalisation n'est pas de mettre en pause l'exécution du programme, mais plutôt d'afficher un message lorsque l'exécution atteint le point de journalisation. Vous pouvez ajouter un point de journalisation en faisant un clic droit à gauche d'un numéro de ligne et en sélectionnant Ajouter un point de journalisation (Figure 13).

Vous pouvez ensuite spécifier un message de journal (ang., log) (Figure 14). Le message de journal peut également inclure des expressions Python entre accolades. Dans la figure 14, lorsque le point de journalisation est atteint par l'exécution du programme, les valeurs {i}, {j}, {arr} et {key} sont remplacées par les valeurs actuelles des variables correspondantes.

👉 Lorsque vous avez fini de modifier le message, vous devez appuyer sur la touche Entrée.

Lorsque vous exécutez le débogueur, les messages de journal s'affichent dans la console de débogage lorsque le point de journalisation est atteint (figure 15).

8.4 Trouver le bogue

En savoir plus sur Visual Studio Code

Si vous souhaitez en savoir plus sur Visual Studio Code, nous vous recommandons vivement les vidéos d'introduction disponibles sur le site officiel.