Mettre VS Code dans une boîte : j'ai testé pour vous !

En plein réinstallation de mon PC de dev, on me demande d’aider lors d’un workshop avec une stack que je n’ai pas encore installée (NodeJS + Azure Functions + Services cognitifs + TypeScript), j’ai quelques minutes pour tout préparer: Comment faire ? C’était l’occasion (ou l’excuse) parfaite pour tester Visual Studio Code Remote extensions !

Mais c’est quoi Remote Extensions ?

C’est une suite d’extensions à Visual Studio Code qui vous permet de faire comme si votre Visual Studio Code installé localement était en réalité en train de s’exécuter sur une machine “distante”. Vous bénéficiez alors :

• Du système de fichiers du système distant,
• Des outils / SDK / CLI installés de manière distante,
• Et donc d’accéder au bash distant, ou au serveur web distant en localhost,
• D’utiliser des extensions VS Code installées sur le serveur distant
• Tout en travaillant sur un repository de code installé localement !

Avant de continuer plus loin, il faut tout de même préciser ce que l’on appelle “serveur distant”. Pour l’instant, les Remote Extensions sont capables de se connecter à un serveur en SSH (donc hébergé sur un serveur, Azure ou autre), mais également dans une image Docker executée localement ou bien dans Windows Subsystem for Linux. Et c’est là que cela devient très intéressant : cela vous permet de containeriser l’ensemble de vos outils de dev, et de simplement avoir Docker et VS Code d’installé localement. Le schéma suivant résume bien le fonctionnement de l’extension.

Ce mode de développement n’est probablement pas adapté à tout le monde, mai il est utile dans de très nombreuses situations :

• Les développeurs polyglottes (ou freelances) qui travaillent avec différentes stacks,
• Les contributeurs à des projets open-source, leur permettant plus facilement d’avoir un environnement prêt à la contribution,
• Les développeurs qui travaillent avec des stacks en previews, ou qui doivent maintenir des applications avec des stacks “anciennes”,
• Les professeurs qui enseignent le développement et doivent fournir un environnement de travail prêt à l’emploi,
• etc…

En le testant pour la première fois cette semaine, j’avais un peu l’impression d’être dans le dev du futur :). Alors voyons ensemble comment faire cela !

Comment utiliser les Remote Extensions aujourd’hui ?

Tout d’abord, il faut savoir que cette fonctionnalité est en preview, et qu’elle nécessite quelques pré-requis :

• Visual Studio Code (plus besoin de la version Insider depuis la semaine dernière !),
• Docker si vous souhaitez travailler dans un conteneur,
• WSL et une distribution installée si vous souhaitez travailler dans WSL.

Pour ce qui est de Docker, il faudra penser à activer le Volume Sharing afin de pouvoir mapper des dossiers locaux à l’intérieur de vos conteneurs.

Il vous faudra ensuite installer l’extension correspondante au mode de fonctionnement (Docker, WSL ou SSH), mais le plus simple reste d’installer Remote Desktop Extension Pack, comprenant l’ensemble des 3 différentes extensions.

Utiliser Remote Extension sur un nouveau projet

Une fois l’extension installée, vous observerez un nouvel icône à gauche dans la barre de status (en forme de chevrons). C’est ici que vous pourrez notamment lancer les outils ou configurer votre projet.

En choisissant l’option Create Container Configuration File, vous pourrez choisir parmi une liste déjà importante de langages ou de stacks : Java, Node, Python, Ruby, .Net, PHP, GO, mais aussi Ansible, ou même PlantUML. Votre stack préférée n’est pas dans la liste ? L’ensemble des définitions est sur GitHub, il vous suffit donc de faire une Pull Request :).

Visual Studio Code vous proposera alors de recharger la fenêtre courante, et en quelques minutes, vous pouvez commencer à développer. Magique !

Et cela permet vraiment de tout faire en développement ?

Constatez par vous-même ! Dans la session suivante, je suis en train de débugger un code NodeJS qui s’exécute dans le conteneur docker, avec le bash ouvert également dans le conteneur.

Bonus : simplifier l’utilisation pour toute l’équipe

La configuration de cet environnement distant peut être partagée par les membres de votre équipe via un dossier .devcontainer. Celui-ci contient un fichier devcontainer.json indique à Visual Studio Code votre configuration. A côté de cela, vous pouvez avoir un Dockerfile, ou un fichier docker-compose si vous avez une configuration plus complexe. Ces fichiers peuvent être placés dans le repository Git et ainsi être partagés avec toute l’équipe de développement.