Guide d’utilisation du Visual Studio Code

Visual Studio Code, abrégé VS Code, est l’un des éditeurs de code multi-plateforme les plus utilisés dans le domaine du développement web. D’après un sondage réalisé par Stack Overflow en 2021, cet outil est classé en haut de la liste des plateformes gratuites et open source les plus populaires. Sur les 82 277 développeurs web interrogés, 71,06 % affirment être satisfaits de Visual Studio Code et vouloir continuer à l’utiliser. Étant passionné par le métier de développeur web, vous souhaitez vous initier à l’usage de cet outil ? Suivez le guide !

Définition et fonctionnalités de Visual Studio Code

Le Visual Studio Code est un IDE (Environnement de développement intégré). Le choisir comme outil de travail, c’est bénéficier de ses multiples atouts, entre autres : son large choix de plugins, sa conception minimale et son support cross-platform. De plus, sa facilité d’utilisation fait de lui une solution idéale pour tous développeurs web qu’importe leur niveau.

Ce logiciel peut supporter une dizaine de langages, notamment Java, JavaScript, Go, Node.js et C++. Le code source est récupérable gratuitement sous la licence libre MIT sur le site Github. Sur le site de Microsoft, il est proposé sous la licence propriétaire. Une version compilée du logiciel, sans les outils de télémétrie, est disponible sur le site VS Codium.

VS Code est basé sur Electron, une structure dédiée au développement des applications web Node.js. qui s’exécutent sur le moteur de présentation Blink. Il utilise le même composant d’éditeur qu’Azure DevOps et prend en charge le sous-système Windows pour Linux.

Découvrez comment utiliser le VS code en utilisant le plugin Remote-SSH (exemple qu’on a pris dans cet article). Cela vous permet par exemple de travailler sur un système Windows pour obtenir au final un code utilisable sur un système Linux.

D’abord, voici les éléments dont vous aurez besoin :
• un poste de travail local doté d’un système Windows, Mac OSX ou Linux. Le ChromeOS est à exclure ;
• le logiciel VS Code ;
• une paire de clés SSH générée en fonction du système utilisée ;
• un serveur Ubuntu 18.04 déjà configuré comprenant un utilisateur non root sudo activé et un pare-feu.

Les étapes à suivre pour utiliser Visual Studio Code

• Étape 1 : l’installation du plugin Remote-SSH

Rendez-vous sur Extensions Marketplace pour télécharger le plugin Remote-SSH. Vous pouvez également y trouver toutes les extensions prises en charge et les extensions tierces pour divers langages de programmation. Cet outil est visible sur le coté gauche de l’IDE et est caractérisé par l’icône quatre carrés dans une boite avec le carré supérieur droit qui explose. Cliquez sur le bouton vert Install pour installer le plugin Remote-SSH.

• Étape 2 : la configuration du plugin et la connexion au serveur distant

Une fois le plugin installé, il est temps de passer à la connexion au serveur. Vous avez besoin :
• d’un IP (le nom d’hôte du serveur) ;
• d’un nom d’utilisateur avec lequel vous allez vous connecter ;
• d’une clé privée pour l’authentification de l’utilisateur.

Utilisez Visual Studio Code pour configurer le plugin Remote-SSH. Pour ce faire, cliquez sur le bouton Open a remote window pour faire apparaître une boite de dialogue en haut et au centre. Sélectionnez Remote-SSH : Open Configuration File…
L’invite de commande affichera deux types d’emplacement du fichier de configuration : un répertoire utilisateur personnel et un autre dédié à l’installation pour SSH. Vous devez sélectionner le fichier dans votre répertoire personnel et une section config apparaîtra. Entrez ensuite le code suivant :

Host my_remote_server  
HostName your_server_ip_or_hostname User sammy
IdentityFile/location/of/your/private/key

Ajoutez les valeurs appropriées dans votre fichier et enregistrez celui-ci. VS Code est maintenant configuré. Cliquez sur le bouton Open a remote window, puis sélectionnez Remote-SSH : Connect to Host…
Lorsque tout cela est terminé, tous les serveurs disponibles vont s’afficher dans le menu déroulant. Choisissez celui auquel vous souhaitez vous connecter. Une fois la connexion avec le serveur établie, Visual Studio Code fait apparaître une fenêtre mentionnant SSH.

• Étape 3 : l’exécution du code sur le serveur distant

Ouvrez une fenêtre de terminal en cliquant sur l’onglet New Terminal de la barre de navigation en haut de la fenêtre Visual Studio. Le terminal qui s’ouvre est sur le serveur distant et non sur votre machine locale.
Lancez la commande suivante pour faire apparaître l’adresse IP du serveur distant : ip addr
La sortie ci-après va s’afficher :

Output 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000 
  link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00     
inet 127.0.0.1/8 scope host lo  valid_lft forever preferred_lft forever  inet6 ::1/128 scope host 
valid_lft forever preferred_lft forever

2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000 link/ether 16:cb:05:5b:30:f1 brd ff:ff:ff:ff:ff:ff 
inet your_server_ip brd your_broadcast_address scope global eth0 
valid_lft forever preferred_lft forever


Le code distant peut désormais être exécuté. Vous pouvez effectuer un test de la capacité d’exécution de ce code, 
en créant un nouveau fichier dans votre éditeur. Tous les fichiers créés par Visual Studio Code sont enregistrés 
sur le serveur distant quand vous vous connectez à celui-ci.