Installer et utiliser Visual Studio Code pour développer des programmes écrits en Python

Duration1h15

Présentation & objectifs

La première activité vous a permis d’installer sur votre machine un environnement de développement en Python fonctionnel. Un éditeur de texte standard était utilisé pour écrire les codes sources en Python. L’exécution des programmes écrits était lancée depuis un terminal avec les lignes de commande appropriées.

À présent, cette seconde activité a pour objectif d’installer un environnement de développement intégré (IDE), en l’occurrence Microsoft Visual Studio Code et de l’utiliser pour développer, exécuter, déboguer vos programmes écrits en Python. Un IDE est un logiciel qui est central pour les programmeurs, car il permet d’écrire, d’exécuter et de déboguer des programmes, de manière centralisée, avec beaucoup de facilité. De plus, vous installerez dans cet IDE quelques extensions pour vous aider dans vos tâches de programmation.

À la fin de cette activité, vous devez disposer sur votre machine personnelle, d’une instance de Visual Studio Code fonctionnelle, c’est-à-dire qui vous permette de réaliser les prochaines activités de programmation en Python, activités qui vous seront demandées en première année (UE Informatique, UE Mathématique)

1 — Qu’est-ce qu’un environnement de développement intégré (IDE)

Un environnement de développement intégré ou IDE - Integrated Development Environment en anglais, est une application logicielle qui aide les programmeurs à développer du code logiciel efficacement. Il augmente la productivité des développeurs en combinant des capacités telles que l’édition de codes sources, la compilation, les tests et le packaging dans une application facile à utiliser. Tout comme les écrivains utilisent des éditeurs de texte et les comptables utilisent des tableurs, les développeurs de logiciels utilisent des IDE pour faciliter leur travail.

Un IDE rassemble les fonctionnalités de tous les outils que nous avons déjà vus (éditeur, interpréteur) et de nouveaux (débogueur) en un seul endroit. L’IDE vous aidera avec les tâches répétitives de bas niveau, à condition que vous l’ayez configuré correctement. Dans le cadre de cette session, l’aide que nous allons évoquer, va de la coloration syntaxique à la production automatique d’un exécutable et au lancement de son exécution à partir de vos sources.

Tout en fournissant de l’aide et de nouveaux outils aux développeurs, un IDE s’appuie sur des outils déjà installés tels que compilateurs, interprètes, débogueurs, etc. Un IDE est donc un puissant agrégateur d’outils installés, fournissant souvent une interface graphique pour interagir avec ces outils. Si vous n’installez pas un interpréteur Python, un IDE pour développer des programmes Python sera inutile, sauf s’il en installe un, lors de sa propre procédure d’installation.

1.1 — À quoi sert un IDE ?

Vous pouvez utiliser n’importe quel éditeur de texte pour écrire du code. Cependant, la plupart des environnements de développement intégrés (IDEs) incluent des fonctionnalités qui vont au-delà de l’édition de texte. Ils fournissent une interface centrale pour les outils courants des développeurs, rendant le processus de développement logiciel beaucoup plus efficace. Les développeurs peuvent commencer rapidement à programmer de nouvelles applications au lieu d’intégrer et de configurer manuellement différents logiciels. Ils n’ont pas non plus à apprendre tous les outils et peuvent se concentrer sur une seule application. Voici quelques raisons pour lesquelles les développeurs utilisent des IDE :

  • Automatisation de l’édition de code – Un IDE peut aider le développeur à écrire du code, en respectant la syntaxe et les règles du langage informatique ciblé.

  • Coloration syntaxique – Un IDE peut formater le code en utilisant différentes couleurs ou polices pour vous aider à le lire. Cela aide à trouver rapidement les erreurs de syntaxe et à mieux comprendre le sens du code.

  • Complétion intelligente du code – un IDE peut faire des suggestions pour compléter une instruction de code lorsque le développeur commence à taper.

  • Support IA – Un IDE peut aider en utilisant la génération de code par IA pour créer du code basé sur une invite conversationnelle de l’utilisateur.

  • Support de refactoring – Un IDE peut aider dans une certaine mesure le développeur à refactoriser le code, c’est-à-dire restructurer le code source pour le rendre plus efficace et lisible sans changer sa fonctionnalité principale.

  • Automatisation locale de la compilation – Un IDE peut effectuer des tâches de développement répétables qui font typiquement partie de chaque changement de code (par exemple, compilation, tests, …).

  • Débogage – Un IDE peut aider le développeur à parcourir le code, ligne par ligne, pendant son exécution et à inspecter le comportement du code.

  • Support collaboratif – Un IDE peut aider le développeur à travailler avec d’autres personnes (développeur, designer, …) sur un même logiciel (co-édition en direct, partage de morceaux de code, partage d’un dépôt commun utilisant des systèmes de contrôle de version intégrés, …)

1.2 — Comment choisir un IDE ?

De nombreux IDE existent sur le marché avec une gamme de fonctionnalités et de prix variables. Beaucoup d’IDEs sont open source, gratuits, ou encore adossés à des licences qui permettent leur utilisation, dans un cadre bien défini.

Voici quelques critères à considérer lors du choix d’un IDE :

  • Langage de programmation – Certains IDE peuvent se concentrer sur des langages informatiques spécifiques et fournir une aide plus poussée en conséquence.

  • Système d’exploitation – Certains IDE peuvent cibler des systèmes spécifiques (Windows, MacOS, Linux) ou être disponibles sur plusieurs systèmes.

  • Performance – Selon la technologie sur laquelle un IDE est basé, les performances comme la consommation de mémoire ou de disque, la réactivité de l’interface utilisateur, … peuvent varier.

  • Fonctionnalités d’automatisation – Alors que certaines fonctionnalités sont proposées par tous les IDE (éditeur de code source, automatisation de la compilation, débogueur), des fonctionnalités additionnelles peuvent aussi être utiles. De quoi avez-vous besoin pour vous aider à développer ?

  • Personnalisation – Certains IDE incluent la capacité de personnaliser les flux de travail pour correspondre aux besoins et préférences d’un développeur, via des plugins, extensions ou add-ons. L’écosystème d’un IDE est-il actif ou assez riche pour vous fournir ce dont vous avez besoin ?

  • La “vie” de l’IDE – Les mises à jour logicielles sont-elles fréquentes ? Pour quelles raisons (bugs, correctifs de sécurité, nouvelles fonctionnalités) ces mises à jour ont-elles lieu ? Y a-t-il une communauté active (blogs officiels, documentation à jour) autour de l’IDE ?

Ce tableau liste quelques IDE gratuits (ce n’est pas une liste exhaustive) :

Nom
Distributeur
Accès gratuit
Systèmes
Langages
Visual Studio Code Microsoft Open source Windows
Linux
MacOS
Most
PyCharm JetBrains Community edition
Pro edition (for students)
Windows
Linux
MacOS
Python
JavaScript
CoffeeScript
Eclipse Eclipse Fundation Open source Windows
Linux
MacOS
Most
NetBeans Apache Software Fundation Open source Windows
Linux
MacOS
Most
IntelliJ IDEA JetBrains Community edition Windows
Linux
MacOS
Java
Groovy
Kotlin
Scala
Python
Rust
Code::Blocks Code::Blocks Open source Windows
Linux
MacOS
Most
XCode IDE Apple Yes MacOS C
C++
Objective-C
Objective-C++
Java
AppleScript
Python
Ruby
ResEdit (Rez)
Swift
Information

Il existe beaucoup plus d’IDEs sur le marché.

Cependant, récemment, Visual Studio Code (VSCode en abrégé) a clairement été adopté comme l’outil de choix par de nombreux développeurs, quel que soit le langage de programmation considéré.

Ainsi nous vous suggérons fortement de l’utiliser, car au cours de l’UE, nous vous fournirons des instructions qui s’appuient sur cet outil. Vous êtes évidemment libre de faire autrement, si vous pouvez traduire nos instructions pour VSCode vers votre IDE préféré.

2 — Microsoft Visual Studio Code

2.1 — Installer l’IDE

Jusqu’à présent, dans cette session pratique, vous avez utilisé un éditeur de texte standard pour écrire vos scripts Python. Visual Studio Code est un IDE fournissant un éditeur de code léger, flexible et open source. Cependant, il peut être beaucoup plus utile qu’un simple éditeur de code, car il peut être étendu via des mécanismes d’extensions.

Voici comment l’installer, en fonction de votre système :

Les moyens les plus simples d’installer Visual Studio Code sont soit directement depuis le Microsoft Store soit depuis le site officiel de Visual Studio Code https://code.visualstudio.com/Download. Essayez la deuxième option par exemple : téléchargez le fichier d’installation qui correspond à votre machine, puis lancez-le pour installer Visual Studio Code IDE sur votre machine.

Cependant, si vous préférez utiliser le terminal, essayez WinGet (le gestionnaire de paquets Windows). Pour cela, en supposant que WinGet soit disponible sur votre machine, tapez la ligne de commande :

winget install Microsoft.VisualStudioCode
winget install Microsoft.VisualStudioCode

Le moyen le plus simple est d’installer Visual Studio Code depuis le paquet qui correspond à votre système (ex., Debian, RPM…) sur la page de téléchargement. Cependant, si vous préférez utiliser le terminal, tapez les deux commandes suivantes :

wget -O vscode.deb https://code.visualstudio.com/sha/download?build=stable&os=linux-deb-x64
sudo apt install ./vscode.deb

Vous devrez alors taper le mot de passe administrateur. Les caractères n’apparaîtront pas à l’écran pendant que vous le tapez. C’est une mesure de sécurité, cela fonctionnera quand même.

Le moyen le plus simple d’installer Visual Studio Code est depuis le site officiel https://code.visualstudio.com/ où vous téléchargez l’application qui correspond à votre architecture. N’oubliez pas de glisser-déposer l’application téléchargée depuis le dossier “Downloads” vers le dossier “Applications”. Cela vous facilitera le lancement de Visual Studio Code plus tard.

Cependant, si vous préférez utiliser HomeBrew (HomeBrew doit être déjà installé), cette ligne de commande fera le travail :

brew install --cask visual-studio-code

Dans certains cas, il peut être intéressant d’utiliser Visual Studio Code sans l’installer sur la machine sur laquelle vous travaillez. Si vous souhaitez faire cela, allez simplement sur le site pour exécuter une version de Visual Studio Code directement dans votre navigateur avec plusieurs limitations (pas de terminal intégré, pas de compilation, …). Cependant, certaines extensions comme “LiveShare” fonctionnent.

Important

Gardez Visual Studio Code à jour !

En l’absence de contre-indications particulières, vous devez installer toutes les mises à jour lorsqu’elles sont proposées, soit immédiatement, soit à la fermeture de l’éditeur. Pour cela, ne désactivez pas la vérification automatique des mises à jour.

Une version mineure est généralement disponible une fois par mois avec de nouvelles fonctionnalités que vous pouvez vouloir découvrir et utiliser. Parfois, des mises à jour supplémentaires sont proposées car elles corrigent une faille de sécurité ou une régression : c’est pourquoi garder votre Visual Studio Code à jour est une très bonne pratique.

2.2 — Un premier tour de l’IDE

Une fois l’installation réussie, lancez simplement l’application Visual Studio Code depuis votre interface graphique comme une application classique.

a. La fenêtre de bienvenue

La première fenêtre qui apparaît après l’installation peut ressembler à celle-ci, avec un onglet “Welcome”.

Panneau Welcome

Via cet onglet, vous pouvez directement commencer à régler certains éléments de l’interface de l’IDE, installer des extensions qui ajouteront des fonctionnalités spécifiques à l’IDE, etc.

Attention

Pour cette activité, nous vous demandons de fermer l’onglet “Welcome”, et de suivre les consignes suivantes, étape par étape, pour mieux comprendre certains mécanismes basiques mais cruciaux de l’interface de Visual Studio Code. Ne vous inquiétez pas, vous pouvez le rouvrir à tout moment via la “palette de commandes” (mot-clé “Welcome”).

b. Vue schématique de l’interface de VSCode

Vue synthétique de l’interface

Cinq zones composent l’interface de Visual Studio Code :

  • Barre d’activité (A) – Située sur le côté gauche, une série verticale d’icônes vous permet d’ouvrir différentes vues telles que le navigateur de fichiers, la vue de recherche, le gestionnaire d’extensions ou la vue de débogage. Lorsque vous cliquez sur une icône, la vue correspondante s’affiche dans la barre latérale principale (B), juste à droite de la barre d’activité (A). Notez que le contenu de cette barre (A), c’est-à-dire les icônes qui y apparaissent, dépend des extensions que vous installez dans votre VSCode. Pour l’instant, concentrons-nous sur ces deux icônes :

    • Icône Explorateur – Ouvre la vue montrant le dossier actuellement ouvert.

    • Icône Extensions – Ouvre la vue qui montre les extensions actuellement installées, mais aussi qui donne toutes les extensions que vous pouvez télécharger et installer.

  • Barre latérale principale (B) – La vue lancée en cliquant sur une icône de la barre d’activité (A) s’ouvre à droite de la barre d’activité, en (B). Le contenu de la barre latérale principale dépend évidemment de la vue. Si vous cliquez de nouveau sur l’icône active de la barre d’activité, la barre latérale principale disparaît pour laisser plus d’espace à la zone à sa gauche : la zone d’édition (C).

  • Zone d’édition (C) – C’est là que tous les fichiers ouverts peuvent être édités. Le script Python que vous avez écrit plus tôt dans cette activité sera ouvert et édité à cet endroit, dans quelques étapes.

  • Zone des panneaux (D) – Sous la zone d’édition, les panneaux sont essentiellement des onglets qui permettent d’interagir avec les outils installés dont vous avez besoin (terminaux intégrés, sorties du compilateur, console de débogage, sortie d’exécution, messages du moteur LaTeX, …). Certains panneaux s’ouvriront lorsque vous exécuterez votre script Python.

  • Barre d’état (E) – En bas de la fenêtre, la barre d’état donne des informations sur le fichier ouvert ou le statut actuel de l’éditeur comme le langage courant, la position du curseur, la branche GIT actuelle, la session Live Share, etc.

Plus d’information sur l’interface graphique de Visual Studio Code IDE est disponible dans la documentation. Gardez ce lien pour plus tard (par exemple, après avoir terminé cette activité).

3 — Un premier script Python avec VSCode

3.1 — Ouvrir votre script

Vous allez devoir ouvrir et éditer le script Python hello_world.py que vous avez écrit plus tôt et que vous avez probablement stocké dans le dossier <docs>/IMT/computer_science/s5/env/session_2/. Néanmoins, vous avez peut-être précédemment choisi un autre nom pour le fichier ou le dossier ; dans ce cas, adaptez cette procédure en fonction de la situation (et de vos choix d’organisation).

Pour ce faire, vous pouvez ouvrir votre script Python via le menu “File”.

Bloc Open File

Cependant, depuis le bloc “Open”, plusieurs choix sont possibles :

  • Open File – L’IDE ouvre uniquement le fichier en tant qu’entité autonome, pour l’éditer comme n’importe quel autre éditeur de texte. Pour l’IDE, cela signifie que ce fichier n’appartient à aucun projet ou ensemble de fichiers travaillant conjointement. L’IDE agit en conséquence et ne propose pas toutes ses fonctionnalités. En effet, lorsque vous implémentez des solutions pour un laboratoire, ou travaillez dans un projet, vous aurez probablement besoin de plusieurs fichiers Python travaillant ensemble, pour répondre au problème complet. Dans cette perspective, utiliser “Open File” n’est pas la bonne méthode.

  • Open Folder – Visual Studio Code ouvrira un dossier et le considérera comme un “espace de travail” (comme un espace dédié pour un projet ou une activité par exemple). C’est le choix que nous allons sélectionner.

    Ouvrez le dossier <docs>/IMT/computer_science/s5/env/session_2/ (ou celui que vous avez choisi). Une fois ouvert, son contenu apparaît dans la “Barre latérale principale” car l’icône Explorateur de la barre d’activité est automatiquement sélectionnée.

    Vous devez y voir apparaître votre fichier Python.

  • Open Workspace from file – Ce choix est pour ouvrir des espaces de travail multi-racines (non utilisé dans cette activité).

Information

Un espace de travail Visual Studio Code est la collection d’un ou plusieurs dossiers ouverts dans une fenêtre (instance) de Visual Studio Code.

  • Espace de travail à dossier unique Dans la plupart des cas, vous aurez un seul dossier ouvert comme espace de travail (ici c’est le cas). En fait, lorsqu’on ouvre un dossier dans Visual Studio Code, il est automatiquement vu comme un espace de travail. Cela signifie que Visual Studio Code garde automatiquement la trace de sa configuration, comme vos fichiers ouverts ou la disposition de l’éditeur. Lorsque vous rouvrez ce dossier, l’éditeur sera comme vous l’avez laissé précédemment.

  • Espace de travail multi-racines – Si vous avez besoin que plusieurs dossiers distincts fassent partie d’un espace de travail, vous créerez et ouvrirez un espace de travail multi-racines qui est essentiellement un fichier JSON listant tous les dossiers de l’espace de travail.

3.2 — Éditer votre script

Cliquez sur le fichier hello_world.py dans la barre latérale principale, pour l’ouvrir dans un nouvel onglet, logiquement nommé hello_world.py, dans la zone d’édition.

Comme vous pouvez le voir, un nouvel éditeur contenant votre script apparaît dans la zone d’édition de l’interface graphique. Une coloration syntaxique basique est même déjà opérationnelle.

Visual Studio Code peut vous demander si vous souhaitez installer l’extension Python recommandée. Cette extension, une fois installée, vous aidera depuis l’interface à lancer l’exécution d’un script. Cependant, vous refuserez cette opportunité car vous le ferez plus tard vous-même dans cette activité. La procédure peut être utile pour installer d’autres extensions. Fermez donc la boîte de dialogue de notification en bas à droite.

Maintenant, vous pouvez éditer votre fichier script Python et l’enregistrer (Menu “File” puis “Save”).

Important

Tant que les modifications dans l’éditeur ne sont pas enregistrées, un point blanc est affiché à côté du nom du fichier dans l’onglet d’édition.

Maintenant, une question demeure : comment exécuter ce script ?

3.3 Exécuter votre script Python

Vous avez votre script hello_world.py ouvert dans une fenêtre et maintenant, vous voulez l’exécuter.

Il existe au moins deux façons de lancer l’exécution de votre script.

a. Exécution à partir du terminal intégré.

Visual Studio Code vous propose un terminal intégré qui agit essentiellement comme un terminal classique, mais l’avantage est qu’il apparaît directement dans la fenêtre Visual Studio Code, dans la zone des panneaux. Cliquez sur le menu “View” puis sélectionnez “Terminal”.

Le panneau “Terminal” apparaît dans la zone dédiée.

Depuis ce terminal, vous pouvez appeler l’interpréteur Python sur votre script et voir le résultat de son exécution, comme dans l’activité précédente.

C’est vraiment pratique d’avoir à la fois votre code source et un panneau d’exécution dans la même fenêtre. Quelle que soit la méthode que vous utiliserez plus tard, vous aurez toujours la possibilité d’exécuter vos scripts Python depuis un terminal intégré à Visual Studio Code.

b. Exécution en utilisant l’extension Python de VSCode

L’extension Python proposée précédemment peut vous offrir des moyens plus simples de lancer vos scripts mais aussi beaucoup d’autres outils (complétion automatique, débogage, tests) utiles pour vous aider.

Nous allons donc installer l’extension Python que nous avons refusée plus tôt ! Cette étape ne sera évidemment pas à refaire à chaque exécution

Important

Notez les étapes pour installer une extension, car elles seront les mêmes pour toutes les extensions que vous souhaitez installer.

1) Tout d’abord, ouvrez la vue “Extensions” (cliquez simplement sur l’icône “Extensions” dans la barre d’activité).

Cette vue vous montre les extensions installées et vous propose soit des extensions populaires soit des extensions que Visual Studio Code juge pertinentes pour vous.

2) Comme un fichier Python est déjà ouvert, Visual Studio Code vous proposera probablement l’extension Python dans la section “Recommandé”. Alternativement, vous pouvez utiliser le champ “Search Extensions” pour des mots décrivant ce que vous cherchez (dans notre cas, “Python”).

L’extension dont nous avons besoin (celle qui vous a été recommandée précédemment, lors de l’exécution via le terminal) est celle fournie par Microsoft.

3) Cliquez sur cette extension pour avoir plus de détails.

Prenez le temps de lire toutes les informations données. Regardez l’auteur de l’extension (ici certifié Microsoft), le nombre d’utilisateurs, etc. Consultez les onglets intégrés “Details”, “Features”, etc. pour plus de détails sur les fonctionnalités, comportements, contraintes, etc. Vous apprendrez qu’elle installera “Pylance” et “Python Debugger”.

Trouvez ces deux extensions, et lisez leurs pages d’information.

Quand vous êtes prêt, cliquez sur le bouton “Install”.

4) Quelques instants plus tard, la vue sera mise à jour pour vous montrer que les extensions mentionnées ont été installées.

Une nouvelle barre d’outils devrait apparaître en haut à droite de l’éditeur hello_world.py, vous permettant d’exécuter le script.

5) La barre d’état indique l’interpréteur Python qui sera utilisé pour les exécutions ultérieures.

Comme vous en avez déjà un sur votre machine (installé lors de la première activité), il devient celui par défaut. Pour savoir où est installé l’interpréteur Python qui sera utilisé, positionnez simplement le curseur de la souris sur la partie droite de la barre d’état.

Si le dossier que vous avez ouvert en tant que workspace contient un environnement virtuel pour Python, environnement que vous avez créé lors de l’activité précédente, VSCode le détecte et l’active pour les exécutions suivantes. C’est très pratique. Dans ce cas, la barre d’état reflète que l’environnement virtuel (ici ueinfos5) est activé.

Remarque

Si vous avez plusieurs interpréteurs installés sur votre système, soit Visual Studio Code vous demandera lequel utiliser lors de la première exécution, soit vous pourrez définir votre propre configuration spécifique via le fichier JSON launch.json, créé dans votre espace de travail. Ceci est particulièrement utile si vous voulez toujours exécuter Python avec un argument spécifique par exemple.

6) Maintenant, vous êtes prêt à exécuter votre script :

En haut à droite de l’onglet d’édition hello_world.py, cliquez simplement sur le triangle “Run the Python file”.

Le panneau terminal s’ouvre (si nécessaire), pour vous permettre de voir l’exécution du script Python (comme précédemment).

Bravo, vous avez exécuté votre premier script Python depuis VSCode !

Important

L’extension Python n’est pas l’interpréteur Python. Le bouton sur lequel vous avez cliqué, n’est qu’un (puissant) raccourci pour lancer l’interpréteur Python que vous avez installé dans l’activité précédente.

L’extension n’est pas et n’installe pas un interpréteur Python.

Dans le cas où vous n’avez aucun interpréteur Python installé sur votre système, Visual Studio Code seul ne sait pas quoi faire, et vous demande d’installer (ou de sélectionner) un interpréteur Python.

La même séparation entre l’interface fournie par l’IDE et les outils requis s’applique lorsque vous utilisez d’autres langages. Par exemple, dans le cas du codage en C++, vous devez installer un compilateur (par exemple, gcc ou clang) avant d’utiliser une extension C++ dans Visual Studio Code qui vous aide à compiler votre code source.

4 — Configurer Visual Studio Code à son goût (optionnel)

Une des forces de Visual Studio Code est que vous pouvez le configurer à votre goût, dans ses moindres détails, via ses différents paramètres. Presque toutes les parties de l’éditeur VSCode, de l’interface utilisateur au comportement des différents outils proposés ont des options que vous pouvez modifier.

Cependant, il est important de noter que Visual Studio Code fournit deux niveaux de paramétrage :

  • Les paramètres utilisateur – Ces paramètres s’appliquent globalement à toute instance de Visual Studio Code que vous ouvrez.

  • Les paramètres de l’espace de travail – Ces paramètres sont stockés dans votre espace de travail et ne s’appliquent que lorsque l’espace de travail est ouvert. Au sein du workspace, les paramètres sont prioritaires par rapport aux paramètres utilisateur.

L’objectif de cette section est donc :

  • Apprendre à régler des paramètres basiques (nous choisissons la taille de la police de l’éditeur).
  • Observer l’impact d’un tel réglage.
  • Comprendre où et comment Visual Studio Code stocke les paramètres.

4.1 Ouvrir la fenêtre des paramètres de l’IDE

Ouvrez l’interface graphique des paramètres via le menu “File/Preferences/Settings”.

La nouvelle fenêtre “Settings” liste tous les éléments possibles que vous pouvez régler soit au niveau Utilisateur soit au niveau Espace de travail. C’est la raison pour laquelle vous avez deux listes, dans deux onglets séparés. Vous pouvez vérifier que les deux listes proposent globalement les mêmes paramètres, avec quelques extras pour la liste de l’espace de travail.

4.2 — Modifier un paramètre

Important

Le dossier <docs>/IMT/computer_science/s5/env/session_2/ (ou équivalent) est actuellement ouvert (en tant qu’espace de travail à dossier unique), donc nous allons modifier la taille de la police de l’éditeur uniquement pour cet espace de travail, en la passant à 36. La taille de la police dans les paramètres Utilisateur reste à 14. Assurez-vous de modifier le paramètre dans l’onglet Workspace et non dans l’onglet User.

Vous avez deux façons de trouver le champ correspondant au paramètre que vous voulez modifier :

  • Soit naviguez dans l’arborescence des paramètres proposée sur la partie gauche de la page. Dans notre cas, vous devez ouvrir l’arborescence “Text Editor”, puis ouvrir la catégorie “Font”, et la partie droite de la page vous permettra de modifier tous les paramètres de cette catégorie. Parmi ces paramètres, vous trouverez la taille de la police (“Font Size”).

  • Soit utilisez le champ “Search settings” en haut de la page. Tapez quelques mots-clés relatifs au paramètre que vous voulez modifier (ici tapez “font size”). La partie inférieure vous montrera tous les paramètres correspondants. Parmi ces paramètres, vous trouverez la taille de la police (“Font Size”).

Changez la valeur de la taille de la police de 14 à 36. Une fois la modification faite, tous les éditeurs sont impactés. Allez dans la fenêtre éditant le fichier hello_world.py, et observez la différence de taille.

4.3 — Vérifier la portée de l’impact

La question ici est : comment savoir si la modification de la taille de la police impacte uniquement l’éditeur lorsque l’espace de travail est ouvert ?

Pour y répondre, nous allons faire quelques tests :

  • Fermez le dossier (c’est-à-dire le dossier actuel, qui est l’espace de travail courant).

  • Ouvrez le fichier hello_world.py en tant que fichier autonome via le menu “Open File”, et non via le menu “Open Folder”.

  • La taille de la police dans ce nouvel éditeur est toujours 14 car il n’y a pas de paramètres d’espace de travail en action ici, seulement les paramètres Utilisateur (globaux).

Cela démontre clairement la différence entre les paramètres Utilisateur et les paramètres d’Espace de travail.

  • Fermez le fichier et ouvrez de nouveau le dossier <docs>/IMT/computer_science/s5/env/session_2/ (ou équivalent).

Explorez maintenant les différents paramètres. Vous pouvez parcourir la liste de tous les paramètres possibles et en changer certains pour adapter l’interface graphique à vos préférences (par exemple, la couleur de fond, la couleur du texte, la taille des tabulations, …).

4.4 — Où et comment sont stockés les paramètres de l’espace de travail ?

Puisque vous avez changé la taille de la police, avez-vous remarqué d’autres changements ?

Si vous regardez attentivement, un nouveau sous-dossier nommé .vscode est apparu dans le dossier <docs>/IMT/computer_science/s5/env/session_2/ de l’espace de travail. Dans ce dossier le fichier JSON settings.json contient tous les paramètres que vous avez modifiés avec les valeurs que vous avez choisies.

Peut-on modifier manuellement les paramètres via le fichier JSON settings.json ?

Comme c’est un fichier texte, vous pouvez ouvrir le fichier JSON settings.json dans Visual Studio Code comme n’importe quel fichier texte.

Vérifiez la valeur de la clé editor.fontSize (c’est la clé qui stocke la taille de la police de l’éditeur). Vous devriez trouver la valeur que vous avez définie plus tôt (ici c’était 36).

Notez que cette taille de police est aussi utilisée pour afficher le fichier “settings.json” car le dossier d’espace de travail “Session2” est actuellement ouvert.

Le fichier settings.json n’est pas en lecture seule. Modifiez-le pour revenir à une taille de police de 14, par exemple.

Dès que vous enregistrez le fichier settings.json, l’IDE prend en compte les nouveaux paramètres (au moins pour la taille de la police).

Information

Si vous êtes curieux et voulez vérifier la présence du dossier .vscode en utilisant un terminal et la ligne de commande, notez que ce sous-dossier a l’attribut “Hidden” qui le rend invisible, sauf si vous demandez spécifiquement dans votre ligne de commande d’afficher tous les fichiers y compris les “cachés”. Cela se fait comme suit :

dir /a:h
Get-ChildItem -Attributes Hidden
ls -a
ls -a

4.5 — Où et comment sont stockés les paramètres Utilisateur ?

Logiquement, les paramètres Utilisateur sont stockés globalement (pas dans le dossier de l’espace de travail), dans un fichier JSON différent également nommé settings.json. Ainsi, son emplacement dépend de votre plateforme :

%APPDATA%\Code\User\settings.json
$HOME/.config/Code/User/settings.json
$HOME/Library/Application\ Support/Code/User/settings.json

Vous pouvez également ouvrir, modifier et enregistrer ce fichier JSON. Les nouveaux paramètres Utilisateur seront alors appliqués (notez que redémarrer Visual Studio Code peut être nécessaire pour certains paramètres).

5 — La Palette de commandes

Lorsque vous utilisez Visual Studio Code, l’outil le plus important est certainement la Palette de commandes.

C’est clairement un des mécanismes les plus utiles à connaître pour un utilisateur de Visual Studio Code. En effet, la Palette de commandes donne accès à toutes les commandes disponibles. Par exemple, vous pouvez exécuter des commandes d’éditeur, ouvrir des fichiers, rechercher des symboles, et voir un aperçu rapide d’un fichier, le tout via la même fenêtre interactive.

Pour cette première fois, nous allons l’ouvrir avec quelques clics de souris, via le menu “View”.

Utilisation du clavier

Cependant, la Palette de commandes est généralement ouverte beaucoup plus rapidement via le clavier par une combinaison de touches :

  • F1 ou CTRL+SHIFT+P, sur PC
  • SHIFT+COMMAND+P, sur MacOs

En effet, une fois ouverte, vous avez un accès direct à toutes les fonctionnalités de Visual Studio Code, y compris les raccourcis clavier pour les opérations les plus courantes. Il est donc important de pouvoir ouvrir cette palette facilement.

Une fois la palette ouverte, tapez dans le champ quelques mots-clés décrivant l’opération que vous souhaitez faire. Ici, nous voulons accéder au fichier settings.json Utilisateur, tapez donc “settings”. Lorsque la commande que vous voulez apparaît, cliquez dessus (ici, “Preferences: Open User Settings (JSON)”).

Notez que les commandes récentes sont placées en premier dans la liste.

Une commande intéressante

Avec la Palette de commandes, vous pouvez accéder à l’entrée “Help: Keyboard Shortcuts Reference”. Cela vous donnera accès à un fichier PDF contenant tous les raccourcis clavier.

Important

La Palette de commandes est l’endroit où toutes les commandes se trouvent, y compris celles fournies par les extensions. Elle permet aux commandes externes d’être appelées de la même manière que les commandes internes, et participe à la flexibilité de l’interface de Visual Studio Code.

Ainsi, si vous voulez développer vos propres extensions VSCode, il est important que vos noms de commandes soient appropriés, afin que les utilisateurs puissent facilement les trouver.

5.1 — Réglage de la télémétrie

Visual Studio Code collecte des données de télémétrie qui peuvent être envoyées à Microsoft afin d’avoir des retours sur les plantages ou bugs de l’IDE, pour améliorer le comportement et les performances de l’IDE, … Vous avez le contrôle sur la nature des informations réellement envoyées.

En utilisant la “Palette de commandes”, recherchez les paramètres utilisateur liés à la “télémétrie” (alternativement, vous pouvez chercher “telemetry” dans le menu “File > Preferences > Settings”). Vous devriez obtenir un paramètre “Telemetry: Telemetry Level” qui vous permet :

  • de mieux comprendre ce que signifie la télémétrie.
  • de sélectionner le niveau de télémétrie que vous souhaitez.
  • de lire à la fois la politique de collecte de données Microsoft et la déclaration de confidentialité.

Par défaut, “all” est le niveau de télémétrie par défaut, et nous allons le régler sur “off”. Cependant, vous pouvez sélectionner le niveau que vous souhaitez.

Comment vérifier que le choix précédent a été pris en compte ?

Comme dans la section précédente, ouvrez le fichier JSON des paramètres utilisateur via la palette de commandes par exemple. Vous y trouverez une nouvelle entrée qui stocke votre nouveau paramétrage.

5.2 — Choix de la langue de l’interface utilisateur

Visual Studio Code vous permet de changer la langue utilisée pour son interface utilisateur. Cela peut être intéressant pour plusieurs raisons. Cependant, pour ce laboratoire, nous recommandons de garder la langue anglaise car tous les exemples et aides sont adaptés à cette langue. Évidemment, les fonctionnalités de Visual Studio Code restent valides indépendamment de la langue (les mots-clés eux peuvent logiquement changer cependant).

En utilisant la “Palette de commandes”, recherchez le mot-clé “display” comme dans “display language”. Sélectionnez la commande “Configure Display Language”.

Une fenêtre popup propose une série de langues possibles pour l’interface utilisateur. Imaginez que vous voulez utiliser la langue brésilienne pour l’interface.

Sélectionnez simplement la langue appropriée dans la liste. Cela peut prendre quelques instants pour télécharger le pack de langue correspondant.

Visual Studio Code vous demande de redémarrer pour prendre en compte la nouvelle langue, et c’est tout !

Revenez à la version anglaise de l’interface.

Une autre façon de sélectionner une nouvelle langue d’interface est de cliquer sur le bouton Extensions, dans la barre d’activité, chercher et sélectionner le “Language Pack” qui correspond à la langue que vous voulez. En fait, vous avez fait cela en utilisant la “Palette de commandes” comme vous le notez, l’extension “Brazilian Language Pack” a été installée dans votre Visual Studio Code.

Vous pouvez maintenant supprimer le pack de votre installation si vous n’avez plus besoin de le garder bien sûr.

6 — Éditez votre script à l’aide de la complétion de code

L’objectif de cette section est d’éditer votre script Python pour finalement aboutir à ce script.

L’idée est de tirer profit des mécanismes de complétion de code offerts par l’extension Python, pour éditer rapidement le script. De plus, nous utiliserons l’analyse statique de code offerte par l’extension Pylance, pour vous aider à corriger les erreurs que vous pourriez écrire.

6.1 — Édition du script étape par étape, en utilisant la complétion de code

En partant du script basique hello_world.py, nous allons ajouter les lignes manquantes :

1) Allez dans l’éditeur et commencez à taper “a” sur une nouvelle ligne. Une petite fenêtre apparaîtra pour vous proposer des choix pour compléter la ligne que vous tapez. Ici, nous voulons juste avoir une variable a donc tapez simplement espace pour continuer : pas de complétion à utiliser.

Terminez d’écrire la ligne 2.

2) À la ligne suivante (ligne 3), nous allons appeler la fonction Python print. Commencez simplement à taper “p” et une fenêtre popup vous proposera la fonction print, parmi d’autres choix.

3) Pour accepter un choix, sélectionnez-le avec le clavier et appuyez sur la touche Entrée, ou utilisez la souris.

Ici, la fonction print est le premier choix dans la liste, donc vous devez juste appuyer sur Entrée et le nom de la fonction est inséré dans l’éditeur.

4) La fonction print a besoin d’entrées que vous devez fournir, entre parenthèses.

Tapez donc “(”. La parenthèse ouvrante après la commande print et observez ce que fait l’éditeur pour vous. La parenthèse fermante est automatiquement ajoutée… très utile ! De plus, une nouvelle fenêtre popup vous donne des informations sur les paramètres que vous pouvez fournir à la fonction (le nombre de paramètres, leurs types, leurs significations et l’ordre d’appel).

5) Ici, nous voulons juste fournir à la fonction print la chaîne “End of program is coming”, donc tapez simplement cette chaîne de caractères.

6) À tout moment, si vous positionnez votre curseur de souris sur le mot print (c’est-à-dire une fonction de la bibliothèque standard Python ou de packages installés) dans l’éditeur, et attendez quelques millisecondes, des informations utiles sur la fonction apparaîtront aussi.

7) N’oubliez surtout pas d’enregistrer votre fichier (un gros point blanc à côté du nom de votre script signifie que vos modifications ne sont pas enregistrées sur le disque).

Bravo, il ne vous reste plus qu’à exécuter votre script !

6.2 — Que se passe-t-il en cas d’erreurs lors de l’édition ?

L’extension Python Pylance que vous avez installée avec l’extension Python, peut vous aider à trouver certaines erreurs que vous pourriez commettre en écrivant votre code.

En effet, Pylance est un serveur de langage, qui fournit des fonctionnalités comme IntelliSense, le linting logique (avec des erreurs et avertissements), les actions de code, la navigation dans le code, la coloration sémantique, …

Information

Lint est le terme informatique pour un outil d’analyse statique de code utilisé pour signaler les erreurs de programmation, bugs, erreurs stylistiques et constructions suspectes.

Visual Studio Code, via le mécanisme des extensions, vous permet d’installer des extensions plus dédiées au linting, comme l’extension Pylint qui s’appuie sur le paquet Python Pylint.

Pour plus de clarté, deux exemples simples sont proposés. Néanmoins, essayez d’ajouter à ce script vos propres lignes Python (avec des erreurs potentielles), et voyez dans quelle mesure l’IDE peut vous être utile.

6.2.1 — Exemple 1

Dans cet exemple, vous oubliez de fermer un ensemble de parenthèses (ici celle fermant l’appel à print à la ligne 3). La portion de la ligne où une erreur syntaxique a été détectée est mise en surbrillance.

Si vous positionnez votre souris sur la parenthèse surlignée, un message expliquant l’erreur s’affiche. De plus, dans la zone des panneaux, un badge contenant le chiffre “1” apparaît dans l’onglet “Problem”.

Cliquez sur l’onglet du panneau “Problem” pour voir le message.

Le panneau “Problem” liste toutes les erreurs et avertissements (ici une seule erreur) qui nécessitent votre attention. La vue en liste est particulièrement utile lorsque vous avez beaucoup d’erreurs ou d’avertissements, sur un script assez long. Dans notre cas, Pylance vous dit qu’une parenthèse manquante a été détectée : c’est à vous de corriger le problème.

6.2.2 — Exemple 2

Le second exemple est plus subtil. Imaginez que vous êtes débutant en Python, mais que vous connaissez un autre langage pour lequel il n’est pas nécessaire de mettre des parenthèses autour des valeurs utilisées pour appeler une fonction. Vous obtiendrez probablement ceci :

La chaîne “End of program is coming” est mise en surbrillance. Cela signifie qu’un problème a été détecté : c’est bien !

Cependant, la raison de la détection n’est pas “Parenthèses manquantes” mais “Les instructions doivent être séparées par un retour à la ligne ou des points-virgules”. En effet, l’interpréteur Python considère la fonction print comme une première instruction (ne faisant rien ici, la fonction ne sera pas appelée) et la chaîne de caractères comme une seconde instruction. En effet la règle en Python est que deux instructions doivent être soit sur des lignes différentes, soit sur la même ligne, mais séparées par des points-virgules.

Vous pouvez vous conformer au message de Pylance et mettre les deux instructions sur deux lignes différentes.

Plus aucune erreur n’est signalée, mais si vous exécutez le programme, il n’affichera pas la chaîne “End of program is coming!”. Pourtant en respectant la règle syntaxique de Python que Pylance vous propose, ce comportement à l’exécution, est correct. Cependant, est-ce celui que vous attendiez ? Dans notre cas, la réponse est NON. En fait, vous auriez dû ajouter les parenthèses au lieu de vous conformer aveuglément au message d’erreur.

Information

Ce deuxième exemple très basique illustre que ces outils statiques sont là uniquement pour vous aider. Cependant, vous êtes le développeur, et c’est à vous de prendre les décisions pertinentes. Cela sera encore plus vrai lorsque vous utiliserez des outils IA pour développer du code.

7 — Déboguez votre premier script Python

Vous devez déboguer votre programme lorsqu’il plante à l’exécution, ou lorsque les résultats qu’il produit ne sont pas ceux qu’il devrait donner. Dans ces cas, vous devez enquêter, trouver l’origine de ces problèmes et faire les corrections appropriées : c’est l’essence du débogage.

Il existe plusieurs façons de déboguer un programme :

  • Vous pouvez ajouter des instructions print dans votre code afin d’afficher des messages ou le contenu des variables. Bien que ce code de débogage vous aide à trouver les problèmes, il encombre aussi bien vos sorties terminal que votre code source.

  • Vous devriez probablement utiliser un débogueur soit depuis la ligne de commande (ce qui peut être délicat) soit depuis un IDE. En effet, les IDE modernes rendent principalement le code de débogage inutile en permettant de placer des points d’arrêt à des endroits spécifiques dans le programme, et en fournissant la capacité de voir la valeur des variables via l’IDE plutôt que dans les sorties du programme.

Dans cette section, l’objectif est de montrer comment vous pouvez interrompre l’exécution d’un script à un ou plusieurs endroits que vous jugez pertinents, et inspecter par exemple le contenu des variables courantes pour voir si tout est nominal.

Important

Tester n’est pas déboguer !

Le test logiciel est l’acte de vérifier si un logiciel satisfait aux attentes. Selon les résultats des tests, le débogage “peut” être nécessaire.

7.1 — Ajouter un point d’arrêt

Un point d’arrêt ou breakpoint consiste à placer intentionnellement et à un endroit particulier, un arrêt ou une pause dans un programme, à des fins de débogage.

Plus généralement, un point d’arrêt est un moyen d’acquérir des connaissances sur un programme pendant son exécution. En effet, pendant l’interruption, le programmeur inspecte l’environnement de test (par exemple, les registres à usage général, certains emplacement mémoire, le contenu des variables, journaux, fichiers, …) pour savoir si le programme fonctionne comme prévu.

En pratique, un point d’arrêt conditionnel ajoute au point d’arrêt standard une ou plusieurs conditions qui déterminent si l’exécution du programme doit être interrompue à l’emplacement du point d’arrêt.

Vous voulez poser un point d’arrêt à la ligne 2. Cela signifie que vous voulez démarrer l’exécution du script, mais la mettre en pause juste avant d’exécuter la ligne 2, c’est-à-dire avant d’affecter la valeur 10 à la variable a.

Pour ajouter un point d’arrêt à un script Python, utilisez votre souris pour passer sur la marge dans l’éditeur de hello_world.py, juste à gauche du numéro 2 (c’est-à-dire la deuxième ligne de votre script). Une fenêtre popup vous dira de cliquer pour définir le point d’arrêt à cet endroit.

Une fois fait, un point rouge indique qu’un point d’arrêt est défini pour la ligne 2.

Si vous voulez supprimer le point d’arrêt, cliquez sur ce point rouge.

7.2 — Exécuter le programme en mode débogage

Pour bénéficier du point d’arrêt, vous devez exécuter le script en mode débogage, afin que les points d’arrêt soient activés.

Pour exécuter votre script en mode débogage, ouvrez le menu déroulant juste à droite du triangle “Exécution” que vous avez utilisé pour lancer l’exécution du script et sélectionnez “Python Debugger: Debug Python File” :

L’exécution démarre puis se met en pause.

Notez que cela a pris plus de temps pour démarrer l’exécution comparé à votre exécution standard précédente. En effet, l’environnement de débogage doit être préparé pour traiter vos points d’arrêt, et vous permettre, à ces occasions, à l’exécution, d’inspecter l’état courant de votre programme.

Plusieurs observations très importantes doivent être faites :

  • Dans la barre d’activité, le bouton “Run and debug” ( ) a été sélectionné.
  • Logiquement, la barre latérale principale change pour ouvrir la vue “Run and Debug”, où il est possible d’inspecter l’environnement d’exécution (par exemple, la valeur des variables).
  • La barre d’état reflète que vous êtes actuellement en train de déboguer un programme : sa couleur change et une nouvelle icône, celle de “Run and Debug”, apparaît à sa gauche.
  • Le terminal révèle les commandes que l’IDE (et l’extension Debug) ont utilisées pour lancer le débogage du programme.
  • Le terminal montre aussi que la ligne 1 a été exécutée car la chaîne “Hello World!” a été affichée.
  • Dans l’éditeur de script, un petit triangle horizontal jaune carré à gauche ( ) apparaît autour du point d’arrêt rouge, indiquant quelle sera la prochaine ligne à exécuter.
  • Enfin, dans la zone d’édition, à droite de l’onglet hello_world.py, un nouvel ensemble d’icônes est affiché, vous permettant de contrôler le flux d’exécution de votre programme :

7.3 — Exécution pas à pas

A présent, nous voulons continuer l’exécution du programme en exécutant la ligne 2, c’est-à-dire celle qui crée une variable a et lui affecte la valeur 10.

Pour cela, allez dans le nouvel ensemble d’icônes et faites passer le curseur de la souris sur ces boutons pour découvrir comment ils peuvent contrôler le flux d’exécution. Ne cliquez pas encore !

Comme vous allez probablement beaucoup les utiliser, gardez en mémoire leurs raccourcis clavier : cela vous fera gagner beaucoup de temps lors du débogage de vos programmes.

Ici, nous voulons juste que la ligne 2 soit exécutée puis que l’exécution soit mise en pause avant d’exécuter la ligne 3, donc cliquez simplement sur le bouton “Step Over”.

Une fois ceci fait, le petit triangle horizontal jaune carré qui représente la prochaine ligne à être exécutée, s’est déplacé devant la ligne 3. Cela signifie que la ligne 2 a été exécutée, et que la ligne 3 sera exécutée ensuite.

Comment vérifier si la variable a a été définie et correctement affectée ?

Dans la barre latérale principale, sous la catégorie “Variables”, vous devriez trouver qu’une variable nommée a a été créée et que sa valeur courante est 10.

Dans le panneau “Variables”, vous pouvez également modifier directement la valeur de la variable a (par exemple, lui donner la valeur 20). Si vous faites cela, lorsque vous allez ensuite exécuter la ligne 3, la variable a aura 20 pour valeur.

7.4 — Terminer l’exécution

Maintenant, nous voulons juste que l’exécution continue (sans pas à pas) et aille au prochain point d’arrêt ou à la fin du programme (s’il ne reste plus de point d’arrêt à rencontrer pendant l’exécution).

Pour cela, cliquez simplement sur le bouton “Continuer”, dans la barre d’outils de débogage.

Comme l’exécution n’a croisé aucun point d’arrêt, elle va jusqu’à la fin du programme, terminant la session de débogage. On observe les changements suivants :

  • La ligne 3 a été exécutée, affichant “End of program is coming!” dans le terminal.
  • La barre d’état reprend sa couleur d’origine.
  • Logiquement, vous ne pouvez plus voir les valeurs de vos variables de programme car, une fois l’exécution terminée, l’environnement d’exécution de votre programme n’existe plus.

7.5 — Explorer les fonctionnalités de VSCode pour le débogage

Vous trouverez beaucoup d’informations supplémentaires sur comment déboguer un programme dans la documentation Visual Studio Code :

  • Définir des points d’arrêt conditionnels, des points d’arrêt qui mettent en pause l’exécution de votre programme uniquement si certaines conditions que vous spécifiez sont vérifiées.
  • Définir des configurations spécifiques pour lancer votre programme selon vos besoins : cela se fait via un nouveau fichier JSON, launch.json.

Pour les spécificités du débogage Python, une page spécifique existe, où vous apprendrez :

  • Comment remplir le launch.json pour créer des configurations spécifiques pour le débogueur Python.
  • Comment installer un débogueur debugpy qui peut être exécuté depuis la ligne de commande.
  • Pourquoi utiliser un environnement virtuel peut être une bonne idée :
    • Garder la trace des versions de tous les interprètes Python et packages installés peut devenir rapidement compliqué.
    • Utiliser des environnements virtuels séparés vous permet de fixer, pour chaque environnement, une liste prédéfinie de versions pour tous ces éléments.

N’hésitez pas à prendre un moment plus tard après cette activité pour consulter ces liens !

8 — Quelques extensions utiles

La dernière partie de cette activité va vous indiquer quelques extensions pour Visual Studio Code, extensions qui vont seront utiles pour vos activités informatique.

Comme vous l’avez surement deviné, VSCode dispose de nombreuses extensions utiles, pour beaucoup de buts différents.

8.1 — Extensions à installer

Veuillez installer les extensions suivantes, en utilisant la même procédure que celle que vous avez utilisée pour installer l’extension Python :

  • Jupyter – Cette extension fournit un support basique des notebooks pour les kernels de langage supportés dans les Jupyter Notebooks. Elle permet à n’importe quel environnement Python d’être utilisé comme kernel Jupyter. Cependant, ce n’est pas un kernel Jupyter : vous devez avoir un environnement Python dans lequel vous avez installé le package Jupyter. Cette extension installe aussi 4 extensions supplémentaires pour une meilleure expérience avec les notebooks Jupyter dans Visual Studio Code. Par exemple, l’extension Jupyter Notebook Renderers qui permet aux notebooks d’afficher des images comme .png, .gif, .jpeg et .svg. Vous utiliserez cette extension dans le projet.

  • Live Share – Cette extension vous permet d’éditer et déboguer collaborativement avec d’autres en temps réel, quel que soit le langage de programmation utilisé ou le type d’application que vous développez. Vous utiliserez cette extension pour travailler en groupe.

  • GitHub Copilot & GitHub Copilot Chat – Ces extensions vous permettent de connecter votre instance Visual Studio Code à une technologie IA, et de l’utiliser depuis votre IDE, pour vous aider à écrire du code, ou même pour produire du code. Vous devriez apprendre à utiliser de tels outils, car ils deviennent indispensables pour tout développeur.

8.2 — Extensions que vous pourrez utiliser plus tard (installations optionnelles)

Voici aussi une courte liste d’extensions qui peuvent vous aider pendant votre cursus. Les installer aujourd’hui est optionnel, vous pouvez revenir à cette liste plus tard :

  • LaTeX Workshop – Cette extension fournit les fonctionnalités de base pour la composition LaTeX. Cependant, ce n’est pas un moteur LaTeX : vous avez besoin d’une distribution LaTeX compatible fonctionnant correctement sur votre système (TeX Live par exemple). Vous pouvez alors aussi utiliser Visual Studio Code pour éditer vos fichiers LaTeX et produire vos documents finaux.

  • GitLab Workflow – Lorsque vous travaillez avec des dépôts GitLab, cela vous permet d’intégrer des commandes à VSCode.

  • De nombreuses extensions “cosmétiques” existent. Vous pouvez vouloir jeter un œil aux extensions “Todo Tree” ou “Material Icon Theme”, par exemple, pour personnaliser votre instance Visual Studio Code.

  • D’autres extensions utiles pour le développement collaboratif ou l’aide IA seront installées dans les prochaines activités de l’UE.

Information

N’hésitez pas à essayer, utiliser, évaluer et partager avec nous d’autres extensions que vous trouvez utiles. Nous compléterons cette liste pour transmettre vos suggestions aux futurs étudiants !

Pour aller plus loin

Vous avez installé des extensions supplémentaires à votre instance Visual Studio Code. Certaines vont vous permettre de :

  • Potentiellement effectuer de la co-édition via LiveShare,
  • Bénéficier d’une aide d’un moteur IA (ici GitHub Copilot).

L’objectif de cette section est de vous proposer quelques indications pour utiliser les deux extensions mentionnées

1 — Co-éditez vos fichiers avec Live Share

1) Une fois l’extension LiveShare installée, utilisons-la pour co-éditer du code. Regardez la barre d’état (à gauche) où vous voyez une nouvelle icône indiquant le statut des sessions Live Share.

2) Choisissez un coéquipier, puis suivez les consignes données dans les pages de documentation pour :

  • Créer une session Live Share.
  • Inviter votre coéquipier en tant qu’invité.
  • Co-éditer un script Python.
  • Lancer et déboguer ce script.

N’oubliez pas de jouer aussi le rôle d’invité, c’est-à-dire répondre à une invitation pour co-éditer et exécuter un fichier Python.

Voici quelques remarques importantes sur LiveShare :

  • Live Share ne crée pas un dépôt où toutes les sources sont versionnées et partagées entre développeurs (comme avec GitHub ou GitLab par exemple). Le développeur qui initie le partage permet à tous les invités d’accéder (en lecture et/ou écriture) à ses propres fichiers, c’est-à-dire ceux sur son propre ordinateur.

  • Une fois la session LiveShare fermée, les invités ne reçoivent pas une copie des fichiers édités.

  • Les invités interagissent à distance avec votre instance de Visual Studio Code : c’est comme si vous aviez un second clavier et une souris connectés à votre ordinateur et contrôlés indépendamment. Soyez donc sûr de faire confiance aux invités que vous invitez car ils peuvent faire beaucoup de modifications sur votre machine.

Information

Par défaut, VSCode est livré avec un contrôle de source, qui s’appuie sur Git. Cela offre une autre façon de travailler sur un projet collaboratif. Les dépôts Git comme GitHub ou GitLab sont courants dans les applications réelles, et vous devrez travailler dessus pendant votre cursus.

Lors d’une prochaine session sur les outils collaboratifs de développement, une initiation à Git sera proposée. Vous verrez que Git et LiveShare n’ont pas les mêmes objectifs et peuvent être utilisés de manière complémentaire.

2 — Bénéficier de l’aide IA avec Copilot

Les outils d’intelligence artificielle (IA) sont devenus omniprésents dans la société. Des outils à usage général tels que ChatGPT ou Microsoft Copilot offrent une interface de chat conversationnelle qui vous permet de rechercher des informations spécifiques, générer du texte comme des emails et des résumés, et créer des images basées sur des invites textuelles que vous écrivez. Vous pouvez même demander à ces outils d’écrire du code dans de nombreux langages informatiques largement utilisés, y compris JavaScript, C, et Python, ou de traduire du code d’un langage à un autre.

En supposant que vous sachiez comment l’utiliser, ce type d’outil vous aidera à augmenter votre productivité, et vous fera gagner beaucoup de temps.

Sans entrer dans les détails, ces outils ont été entraînés sur d’énormes (c’est-à-dire vraiment vraiment vraiment énormes) quantités de données. Grâce à ce processus, ils ont appris comment traduire une intention en une sortie particulière, en générant une réponse la plus probable à une invite donnée. En particulier, ils ont vu beaucoup de codes, et savent ce qu’est une syntaxe correcte ou non, ce qui est un code potentiel pour réaliser un algorithme, etc.

GitHub Copilot est aussi un outil IA. Cependant, contrairement aux modèles IA à usage général, il a été entraîné uniquement sur des codes. Par conséquent, au moment de la rédaction, il est plus spécialisé pour la programmation que ses homologues généraux.

Voici un exemple de ce que GitHub Copilot peut faire pour vous. Vous pouvez aussi vérifier le code Java, qui a été généré en utilisant GPT4o (version payante de ChatGPT), en demandant une traduction du code Python.

Écrivons un petit test pour vérifier si le code produit fonctionne :

# Let's use Copilot to generate a Python function
# Here, let's write a function that creates an index for all words in a text
# The function should return a dictionary where the keys are words and the values are lists of indexes where the word appears in the text
# To do it with Copilot, since the description above is quite precise, just let the tool complete the function and press the Tab key to accept the completion
def index_words ( text: str
                ) -> dict:

    """
        Indexes all the words in a text.
        The function will return a dictionary where the keys are words, and the values are lists of indexes where the word appears in the text.
        In:
            * text: The text to index.
        Out:
            * indexes: The dictionary containing the indexes of all the words in the text.
    """

    # Debug
    assert isinstance(text, str) # Type check for text

    # Process the text
    words = text.split()
    indexes = {}
    for i, word in enumerate(words):
        if word not in indexes:
            indexes[word] = []
        indexes[word].append(i)
    return indexes

# Let's test the function
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia, nibh a tincidunt luctus, tortor nunc molestie ante, ut egestas est sapien quis orci. Nunc laoreet eget ipsum id rhoncus. Curabitur vel nibh bibendum, eleifend nibh gravida, tempus massa. Donec id felis blandit, pretium nisl ut, sagittis ligula. Curabitur vitae accumsan ex. Pellentesque interdum condimentum sem, eu aliquet arcu mollis ac. Mauris pellentesque lobortis mi, eget aliquam mauris gravida vel. Nulla quis dui vel arcu malesuada vulputate. Praesent nisi ex, tincidunt fermentum augue eu, cursus vehicula ipsum. Nam vel diam gravida, ultrices eros sed, cursus libero. Etiam maximus tincidunt metus in maximus."
index = index_words(text)
print(index)
// Needed imports
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * To run this code, you need to have Java installed on your computer, then:
 * - Create a file named `Main.java` in a directory of your choice.
 * - Copy this code in the file.
 * - Open a terminal in the directory where the file is located.
 * - Run the command `javac Main.java` to compile the code.
 * - Run the command `java -ea Main` to execute the compiled code.
 * Note: '-ea' is an option to enable assertions in Java.
 */
public class Main {

    /**
     * This function was translated from the Python code.
     * This is also the case for the contents of the "main" function.
     *
     * @param text The text to index.
     * @return     The dictionary containing the indexes of all the words in the text.
     */
    public static Map<String, List<Integer>> indexWords(String text) {
        // Split the text into words
        String[] words = text.split("\\s+");
        // Create a map to store the indexes
        Map<String, List<Integer>> indexes = new HashMap<>();

        // Loop over the words and populate the index map
        for (int i = 0; i < words.length; i++) {
            String word = words[i];
            // If the word is not yet in the map, add it
            if (!indexes.containsKey(word)) {
                indexes.put(word, new ArrayList<>());
            }
            // Append the current index to the list
            indexes.get(word).add(i);
        }

        return indexes;
    }

    /**
     * This is the entry point of your program.
     * It contains the first codes that are going to be executed.
     *
     * @param args Command line arguments received.
     */
    public static void main(String[] args) {
        // Let's test the method
        String text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia, nibh a tincidunt luctus, tortor nunc molestie ante, ut egestas est sapien quis orci. Nunc laoreet eget ipsum id rhoncus. Curabitur vel nibh bibendum, eleifend nibh gravida, tempus massa. Donec id felis blandit, pretium nisl ut, sagittis ligula. Curabitur vitae accumsan ex. Pellentesque interdum condimentum sem, eu aliquet arcu mollis ac. Mauris pellentesque lobortis mi, eget aliquam mauris gravida vel. Nulla quis dui vel arcu malesuada vulputate. Praesent nisi ex, tincidunt fermentum augue eu, cursus vehicula ipsum. Nam vel diam gravida, ultrices eros sed, cursus libero. Etiam maximus tincidunt metus in maximus.";
        Map<String, List<Integer>> index = indexWords(text);
        System.out.println(index);
    }

}

Lors de l’exécution du code Python, nous obtenons la sortie suivante :

Sortie
{'Lorem': [0], 'ipsum': [1, 27], 'dolor': [2], 'sit': [3], 'amet,': [4], 'consectetur': [5], 'adipiscing': [6], 'elit.': [7], 'Sed': [8], 'lacinia,': [9], 'nibh': [10, 32, 35], 'a': [11], 'tincidunt': [12, 80, 98], 'luctus,': [13], 'tortor': [14], 'nunc': [15], 'molestie': [16], 'ante,': [17], 'ut': [18], 'egestas': [19], 'est': [20], 'sapien': [21], 'quis': [22, 71], 'orci.': [23], 'Nunc': [24], 'laoreet': [25], 'eget': [26, 65], 'id': [28, 40], 'rhoncus.': [29], 'Curabitur': [30, 48], 'vel': [31, 73, 88], 'bibendum,': [33], 'eleifend': [34], 'gravida,': [36, 90], 'tempus': [37], 'massa.': [38], 'Donec': [39], 'felis': [41], 'blandit,': [42], 'pretium': [43], 'nisl': [44], 'ut,': [45], 'sagittis': [46], 'ligula.': [47], 'vitae': [49], 'accumsan': [50], 'ex.': [51], 'Pellentesque': [52], 'interdum': [53], 'condimentum': [54], 'sem,': [55], 'eu': [56], 'aliquet': [57], 'arcu': [58, 74], 'mollis': [59], 'ac.': [60], 'Mauris': [61], 'pellentesque': [62], 'lobortis': [63], 'mi,': [64], 'aliquam': [66], 'mauris': [67], 'gravida': [68], 'vel.': [69], 'Nulla': [70], 'dui': [72], 'malesuada': [75], 'vulputate.': [76], 'Praesent': [77], 'nisi': [78], 'ex,': [79], 'fermentum': [81], 'augue': [82], 'eu,': [83], 'cursus': [84, 94], 'vehicula': [85], 'ipsum.': [86], 'Nam': [87], 'diam': [89], 'ultrices': [91], 'eros': [92], 'sed,': [93], 'libero.': [95], 'Etiam': [96], 'maximus': [97], 'metus': [99], 'in': [100], 'maximus.': [101]}
{mollis=[59], ante,=[17], sem,=[55], vel.=[69], adipiscing=[6], est=[20], cursus=[84, 94], eleifend=[34], accumsan=[50], Pellentesque=[52], egestas=[19], augue=[82], nunc=[15], mi,=[64], orci.=[23], mauris=[67], maximus.=[101], id=[28, 40], Nulla=[70], molestie=[16], vel=[31, 73, 88], elit.=[7], ut=[18], lobortis=[63], Etiam=[96], luctus,=[13], in=[100], lacinia,=[9], fermentum=[81], vulputate.=[76], sed,=[93], eu=[56], Sed=[8], pellentesque=[62], vitae=[49], ipsum=[1, 27], amet,=[4], felis=[41], Curabitur=[30, 48], laoreet=[25], tempus=[37], Mauris=[61], ac.=[60], arcu=[58, 74], dolor=[2], bibendum,=[33], metus=[99], rhoncus.=[29], ex,=[79], vehicula=[85], ex.=[51], diam=[89], sit=[3], interdum=[53], a=[11], nisi=[78], tortor=[14], blandit,=[42], tincidunt=[12, 80, 98], nisl=[44], ipsum.=[86], ultrices=[91], condimentum=[54], aliquam=[66], massa.=[38], ut,=[45], Praesent=[77], nibh=[10, 32, 35], gravida,=[36, 90], Donec=[39], libero.=[95], Lorem=[0], aliquet=[57], malesuada=[75], pretium=[43], sapien=[21], Nunc=[24], dui=[72], quis=[22, 71], Nam=[87], eu,=[83], consectetur=[5], eget=[26, 65], sagittis=[46], ligula.=[47], gravida=[68], eros=[92], maximus=[97]}
Information

Notez que le code généré ci-dessus peut être différent de celui que vous obtenez lors du test. La raison est que GitHub Copilot prend en compte votre session actuelle, comment vous avez tendance à formater vos codes, etc.

Par exemple, générons le même code dans un nouvel espace de travail. Voici ce que nous obtenons par défaut :

Ainsi, si vous écrivez systématiquement de la documentation/commentaires pour vos fonctions, il en tiendra compte, et s’adaptera à votre pratique. Plus les exemples sont propres, plus le code généré le sera !

Pour faire fonctionner GitHub Copilot dans votre IDE, il ne suffit pas d’installer l’extension. Vous devez aussi l’activer. Pour cela, inscrivez-vous au Student Developer Pack gratuit et suivez les indications.

Une fois fait, pour voir comment Copilot peut interagir avec vous pendant le développement, vous pouvez suivre le tutoriel GitHub Copilot et commencer à faire votre propre expérience.

Information

Y a-t-il quelque chose que vous auriez aimé voir ici ?

Faites-le nous savoir sur le serveur Discord ! Peut-être pouvons-nous l’ajouter rapidement. Sinon, cela nous aidera à améliorer le cours pour l’année prochaine !

Pour aller au-delà

On dirait que cette section est vide !

Y a-t-il quelque chose que vous auriez aimé voir ici ? Faites-le nous savoir sur le serveur Discord ! Peut-être pouvons-nous l’ajouter rapidement. Sinon, cela nous aidera à améliorer le cours pour l’année prochaine !