Ouvrir un devcontainer existant

Ce que vous allez faire

Ce module est entièrement pratique. Vous allez créer un mini-projet avec un Dev Container minimal, l'ouvrir dans VS Code, et prouver — avec une commande, pas juste en le croyant — que vous tournez bien à l'intérieur du conteneur. La démarche suit la documentation officielle de VS Code sur les Dev Containers.

Prérequis : le module 1 doit être entièrement vert (Docker lancé, extension Dev Containers installée).

Étape 1 — créer le projet

Créez un nouveau dossier et ouvrez-le dans VS Code :

mkdir mon-premier-devcontainer
cd mon-premier-devcontainer
code .

Étape 2 — créer le fichier devcontainer.json

À l'intérieur de ce dossier, créez un sous-dossier .devcontainer, et dedans un fichier devcontainer.json avec exactement ce contenu :

{
  "name": "Mon premier Dev Container",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:20",
  "forwardPorts": [3000]
}

Ce fichier dit à VS Code : construis un conteneur à partir de l'image officielle javascript-node:20 (Node.js 20 préinstallé sur une base Debian), donne-lui le nom affiché « Mon premier Dev Container », et prépare le port 3000 pour qu'il soit accessible depuis l'hôte si jamais une app tourne dessus. On décortique chaque champ en détail au module suivant.

(Une forme alternative existe — un fichier .devcontainer.json directement à la racine du projet, sans dossier — mais elle reste rare en pratique ; le dossier .devcontainer/ est la convention que vous croiserez presque partout.)

Étape 3 — rouvrir dans le conteneur

Dans VS Code :

1. Ouvrez la palette de commandes : Ctrl+Shift+P (Windows/Linux) ou Cmd+Shift+P (macOS)
2. Tapez Dev Containers: Reopen in Container et sélectionnez cette entrée
3. VS Code va télécharger l'image (première fois seulement — ça peut prendre plusieurs minutes selon votre connexion), construire le conteneur, puis relancer la fenêtre à l'intérieur

Vous saurez que c'est en cours grâce à une notification en bas à droite indiquant la progression. Une fois terminé, la barre verte en bas à gauche de la fenêtre affiche le nom du Dev Container.

Étape 4 — la preuve que vous êtes dedans

Ouvrez un terminal dans VS Code (Ctrl+`). Ce terminal s'exécute maintenant à l'intérieur du conteneur, pas sur votre machine. Vérifiez-le :

node --version

Sortie attendue : une version de Node dans la branche 20, par exemple v20.18.1 — même si vous n'avez pas Node installé sur votre machine hôte, ou si vous avez une version différente. C'est la preuve : cette version vient de l'image du conteneur, pas de votre système.

Deuxième vérification, encore plus parlante si vous êtes sur Windows ou macOS :

cat /etc/os-release

Sortie attendue : des lignes commençant par PRETTY_NAME="Debian GNU/Linux ..." (ou une variante Debian/Ubuntu selon l'image). Si votre machine hôte tourne sous Windows ou macOS, cette commande à elle seule prouve que vous êtes dans un environnement Linux distinct — le conteneur.

Ce que vous venez de faire

Vous avez décrit un environnement dans un fichier versionnable (devcontainer.json), demandé à VS Code de le construire, et vérifié par la preuve — pas par la confiance — que votre terminal tourne bien dedans. C'est exactement le mécanisme qui résout le problème « ça marche chez moi » du module précédent : n'importe qui d'autre ouvrant ce même dossier obtient le même conteneur, avec la même version de Node.

Au module suivant, vous reprenez ce même fichier JSON et vous apprenez à en lire chaque champ.