Blog

WSL 2, partie 5 : utilisation avec Visual Studio Code

Au travers de l’utilisation d’un plugin, Visual Studio Code facilite le développement dans WSL en permettant de créer et modifier des fichiers sous Linux mais aussi en permettant d’exécuter des commandes en restant dans l’IDE.

L’architecture de Visual Studio Code repose sur une approche client/serveur où beaucoup de choses, à l’exception de l’IHM et du traitement des entrées, sont effectuées dans un processus serveur, tandis que l’interface utilisateur elle-même s’exécute dans un processus client.

L’extension Remote to WSL s’appuie sur cette approche pour exécuter un processus serveur dans WSL, tandis que l’interface utilisateur s’exécute comme un processus Windows.

 

L’installation de l’extension Remote WSL

Il faut installer l’extension Remote – WSL pour Visual Studio code.

Une possibilité est d’utiliser l’URL : Remote – WSL extension

WSL2_5_001

Et de cliquer sur le bouton « Install ».

WSL2_5_002

Cliquer sur « Ouvrir dans Visual Studio Code ».

WSL2_5_003

Cliquer sur le bouton bleu « Installer ».

 

L’utilisation de l’extension Remote WSL

L’extension Remote WSL de Visual Studio Code permet de manipuler et de développer de manière distante sous Linux exécutée sous WSL-2 dans un VS Code exécuté sous Windows.

 

La connexion à un répertoire d’une distribution dans VS Code

Dans VS Code, cliquez sur le bouton vert en bas à gauche puis sélectionnez le répertoire à ouvrir.

WSL2_5_004

A la première exécution, une partie serveur assurant la communication est installée dans la distribution.

WSL2_5_005

La distribution sur laquelle le plugin est connecté est affichée dans la partie en vert en bas à gauche.

 

Les interactions avec les fichiers dans WSL

Il est alors possible de créer un nouveau fichier (Ctrl + N).

WSL2_5_006

Et de l’enregistrer (Ctrl + S).

WSL2_5_007

Par exemple en le nommant bonjour.sh

WSL2_5_008

Le fichier est créé dans la distribution WSL.

C:\Users\jm>wsl
jm@LAPTOP-59U21DN9:/mnt/c/Users/jm$ cd ~
jm@LAPTOP-59U21DN9:~$ ls -al *.sh
-rw-r--r-- 1 jm jm 22 Aug 26 16:58 bonjour.sh
jm@LAPTOP-59U21DN9:~$

 

L’explorateur distant

L’extension fournit un explorateur distant qui permet de se connecter à une autre distribution ou de basculer vers un autre répertoire connecté facilement.

WSL2_5_009

 

Les commandes

L’extension a ajouté plusieurs commandes à VS Code.

Pour en obtenir la liste, il est possible d’utiliser la touche F1 puis de taper remote-wsl.

WSL2_5_010

Ou en cliquant sur le bouton vert en bas à gauche

WSL2_5_011

Et en sélectionnant la commande à exécuter.

WSL2_5_012

 

La commande Remote-WSL: New Window

La commande « Remote-WSL: New Window » ouvre une nouvelle fenêtre qui est connectée à la distribution par défaut.

WSL2_5_013

Le bouton vert en bas à gauche affiche la distribution sur la quelle la connexion est faite.

WSL2_5_014

La commande « Ouvrir un dossier » permet de sélectionner le dossier distant à ouvrir dans VS Code.

WSL2_5_015

Une fois le dossier validé, l’explorateur affiche le contenu du répertoire distant.

WSL2_5_016

Le chemin des fichiers est au format Linux.

WSL2_5_017

 

La commande Remote-WSL: New Window Using Distro…

La commande « WSL: New Window Using Distro… » est similaire à la commande « Remote-WSL: New Window » mais elle permet de sélectionner la distribution cible.

WSL2_5_018

Il suffit de sélectionner la distribution concernée.

 

La fermeture de la connexion

Pour fermer la connexion distante, il faut utiliser l’option « Fermer la connexion à distance » du menu « Fichier » ou invoquer la commande « Remote : Close Remote Connection ».

WSL2_5_019

Cela réouvre une instance de VS Code vide.

 

L’ouverture d’un répertoire dans VS Code en ligne de commande

Dans une distribution WSL-2, il suffit de saisir la commande code.

jm@LAPTOP-59U21DN9:~$ pwd
/home/jm
jm@LAPTOP-59U21DN9:~$ code .
jm@LAPTOP-59U21DN9:~$

Cela ouvre le répertoire courant dans un VS Code exécuté sous Windows.

A la première ouverture, une confirmation est demandée pour des raisons de sécurité.

WSL2_5_020

 

L’utilisation d’un terminal

Il est possible d’ouvrir un terminal qui permet d’exécuter des commandes sur la distribution connectée directement dans VS Code.

 

L’ouverture d’un terminal

Pour ouvrir un terminal, il faut utiliser l’option « Nouveau terminal » du menu Terminal ou d’utiliser le raccourci Ctrl+Maj+ù.

WSL2_5_021

Et de saisir des commandes dans l’onglet « Terminal » qui seront exécutées dans la distribution connectée.

WSL2_5_022

 

Conclusion

L’extension Remote for VSL permet de faciliter le développement dans une distribution Linux sous WSL dans un Visual Studio Code exécuté sous Windows, permettant ainsi de profiter du meilleur des deux systèmes.

Microsoft propose une documentation de l’extension Remote WSL.

 

Jean-Michel Doudoux

Written by

CTO OXiane