Installation et usage minimal de Visual Studio Code

Capsule vidéo associée

Maintenant, on va installer un environnement intégré de développement, un IDE en anglais, qui s’appelle Visual Studio Code, VSCode en abrégé.

VSCode a été développé par Microsoft sous forme d’un projet open-source. Il est apparu en 2015 et depuis il est devenu l’IDE le plus répandu dans la communauté des développeurs. Il est simple à utiliser et on peut étendre ses fonctionnalités avec ce qui s’appelle des extensions qui peuvent être développées et proposées par la communauté.

Pour son installation, il faut se reporter à la page officielle d’installation visible ici :

https://code.visualstudio.com/download

Pour MacOSX il s’agit d’un installeur graphique qu’il faut exécuter

Pour Linux c’est un fichier d’installation qu’il faut d’abord télécharger, soit un fichier .deb pour les Linux de type Debian, les plus répandus, soit un fichier .rpm pour les Linux de type Redhat. Par exemple sous Ubuntu, qui est un Linux Debian, il faut taper une commande d’installation comme :

sudo apt install ~/Download/<fichier>.deb

Une fois qu’il est installé, il y a deux façons de le lancer : - soit par l’icone de l’application, par exemple moi qui suis sous sur Mac je l’ai mis dans la barre de lancement - soit par une commande unix, et on peut alors préciser le répertoire courant du projet ouvert. Pour ça il faut ouvrir un terminal et taper la commande suivante :

code .

Une fois que VSCode est lancé, les éléments les plus importants sont visibles dans la partie gauche, en particulier dans cette barre verticale avec les 4 icones qui correpondent aux 4 grandes fonctionnalités de VSCode.

La principale fonctionnalité, c’est celle du premier icone ‘Explorateur’ qui permet de voir et d’agir sur tout le contenu du répertoire courant. Il faut comprendre que dans VSCode, un projet c’est un répertoire, tout simplement. VSCode permet aussi de gérer des projets qui sont composés de plusieurs répertoires - ce qu’il appellent des ‘workspace’ - mais on ne l’utilisera pas. Donc pour nous, il est important que VSCode soit ouvert avec comme répertoire courant le répertoire du projet sur lequel on souhaite travailler. Pour vérifier qu’on est dans le bon répertoire courant, il faut regarder ICI Si on n’est pas dans le bon, on peut en changer dans le menu ‘Fichier’, soit en choisissant “Ouvrir le dossier…”, soit “Ouvrir les éléments récents…” Quand c’est fait, la zone ‘Explorateur’ qui est ici, elle nous montre toute la hiérarche des fichiers et des répertoires à l’intérieur du projet courant, et à partir de là il très est facile de créer / renommer / déplacer des fichiers ou des répertoires, soit en utilisant les petites icones qui sont LÀ ou en utilisant le clic droit. Par exemple je peux créer un fichier index.html à la racine du projet et écrit un peu de texte (démo) Lorsqu’on souhaite éditer le contenu d’un fichier, on double-clic dessus et il s’ouvre dans la zone d’édition. Par défaut on ne peut éditer que des fichiers dit ‘texte’, c’est à dire qu’ils ne contiennent que le texte sans décoration, mise en page etc. Même si parfois VSCode ou une de ses extensions colorie certains mots ou certaines parties, ces couleurs ne font pas partie du texte fu fichier lui-même, elles apparaissent seulement à l’affichage. Par ailleurs il a dans VSCode un grand nombre de raccourcis très efficaces, je n’en citerai que deux : - d’abord, la recherche dans un fichier, avec Crtl-F ou CMD-F sur Mac Ça ouvre une petite fenêtre qui permet de choisir le texte qu’on recherche. En cliquant ICI ça permet de remplacer le texte trouvé par un autre. Et il y a derrière CES icones des fonctionnalités encore plus sophistiquées qui sortent du cadre de cette introduction - ensuite, il y a le raccourci Ctrl-P ou Cmd-P sur Mac, qui permet d’ouvrir un fichier du projet à partir d’une partie de son nom. Par exemple etc. Vous noterez que Ctrl-P n’est pas un raccourci pour imprimer un fichier ; il n’y a d’ailleurs pas de fonction d’impression par défaut dans VSCode

Donc voilà pour cette fonctionnalité d’exploration et d’édition des fichiers, qui est la fonctionnalité principale

Le deuxième icone à gauche correspond à une fonctionnalité de recherche dans tous les fichiers du projet. Elle marche comme la fonctionnalité Ctrl-F, sauf qu’elle est capable d’opérer sur plusieurs fichiers

La troisième icone correspond à l’utilisation d’un gestionnaire de partage de code comme Git, et ça sort du cadre de cette introduction

La quatrième icone est le ‘debugger’, qui permet de monitorer l’exécution des programmes Je vais l’illustrer avec un petit script JS simple :

let total = 0
for (let i = 0; i < 10; i++) {
   total += i*i
}

Bien sûr on peut exécuter ce script depuis un terminal (démo) Mais VSCode permet de l’exécuter en mode ‘debug’. Pour ça il faut créer une configuration d’exécution pour lui. On clique ICI et ça permet d’éditer un fichier launch.json qui contient toutes les configurations d’exécution. (demo ++)

La cinquième icone est le gestionnaire des extensions de VSCode On peut voir la liste des extensions déjà installées, et on peut facilement chercher des extensions en tapant des mots-clés. L’extension dont on aura le plus besoin s’appelle Volar, adaptée aux applications Vue3