VS Code

À quoi ça sert

En DevIA, on jongle entre une dizaine d'outils : Python, Docker, Git, FastAPI, Jupyter, des bases de données, du YAML pour la CI… VS Code est l'endroit où on les pilote tous depuis un seul endroit.

• Édition avec coloration, complétion intelligente et refactoring
• Terminal intégré pour lancer uv, git, docker… sans changer de fenêtre
• Débogueur pas à pas pour Python (et bien d'autres langages)
• Source control Git visuel (diff, stage, commit, branches)
• Extensions pour à peu près tout ce qui existe : Docker, Jupyter, SQL, Markdown, YAML…
• Remote : éditer du code sur une machine SSH ou dans un conteneur comme s'il était local

Un exemple d'usage

Tu clones un projet FastAPI géré avec UV. Sans quitter VS Code, tu peux :

1. Ouvrir le dossier (Ctrl+K Ctrl+O)
2. Lancer un terminal intégré (Ctrl+ù sur clavier FR, Ctrl+` sur clavier US) et faire uv sync
3. Sélectionner l'interpréteur Python dans .venv (palette → Python: Select Interpreter)
4. Poser un breakpoint sur une route, appuyer sur F5 et déboguer pas à pas
5. Voir tes modifications dans l'onglet Source Control, écrire le message de commit, et pousser — sans aucune commande Git tapée

Tout ça depuis la même fenêtre, avec la même interface. C'est ce qui en fait l'outil central : il sert de chef d'orchestre aux autres.

How-to : installer et configurer VS Code

1. Installer VS Code

   Télécharge l'installeur depuis le site officiel : code.visualstudio.com.

   Sur Linux (Debian/Ubuntu), tu peux aussi passer par le paquet officiel :

   bash Copier

   sudo apt install code

   Sur macOS avec Homebrew :

   bash Copier

   brew install --cask visual-studio-code

   Vérifie depuis un terminal que la commande code est dispo :

   bash Copier

   code --version

   Cette commande te permettra plus tard d'ouvrir un projet en tapant code . dans n'importe quel dossier.

2. Activer la synchronisation des paramètres

   Connecte VS Code à ton compte GitHub (ou Microsoft) pour activer Settings Sync : extensions, raccourcis, thème et réglages te suivent sur toutes tes machines. Très pratique entre PC perso et PC de la formation.

   1. Clique sur l'icône compte en bas à gauche
   2. Choisis Turn on Settings Sync…
   3. Connecte-toi avec GitHub

3. Installer les extensions essentielles pour DevIA

   Ouvre la palette (Ctrl+Shift+P) → Extensions: Install Extensions, ou clique sur l'icône en briques dans la barre latérale, et installe :

   • Python (Microsoft) — support Python complet (avec Pylance inclus)
   • Jupyter (Microsoft) — ouvrir et exécuter des notebooks .ipynb
   • Docker (Microsoft) — gérer images, conteneurs et docker-compose
   • GitLens — voir l'auteur de chaque ligne, l'historique, les blame
   • Even Better TOML — coloration et validation pour pyproject.toml
   • Ruff — linter et formateur Python ultra-rapide
   • YAML (Red Hat) — utile pour les workflows GitHub Actions

   Tu peux aussi tout installer en une commande :

   bash Copier

   code --install-extension ms-python.python
   code --install-extension ms-toolsai.jupyter
   code --install-extension ms-azuretools.vscode-docker
   code --install-extension eamodio.gitlens
   code --install-extension tamasfe.even-better-toml
   code --install-extension charliermarsh.ruff
   code --install-extension redhat.vscode-yaml

4. Apprivoiser la palette de commandes

   La palette (Ctrl+Shift+P / Cmd+Shift+P) est le raccourci le plus important de VS Code. Tout ce que l'éditeur sait faire est accessible depuis là, juste en tapant ce que tu cherches.

   Quelques commandes à connaître par cœur :

   • Python: Select Interpreter — choisir le venv du projet
   • Format Document — reformater le fichier courant
   • Git: Clone — cloner un repo via l'UI
   • Preferences: Open Settings (UI / JSON) — accéder aux réglages
   • Toggle Terminal — ouvrir le terminal intégré

5. Régler les paramètres utiles

   Ouvre les réglages avec Ctrl+, et active ces options (l'interface te laisse les rechercher par nom) :

   • Format On Save — formate à chaque sauvegarde
   • Files: Auto Save → onFocusChange — sauvegarde dès que tu changes d'onglet
   • Editor: Bracket Pair Colorization — parenthèses colorées par paire
   • Editor: Sticky Scroll — affiche le contexte (fonction, classe) en haut quand tu scrolles
   • Editor: Tab Size = 4 (Python) — utile par défaut

   Tu peux aussi exclure les dossiers bruyants de la recherche et de l'explorateur via Files: Exclude : **/__pycache__, **/.venv, **/.pytest_cache, **/node_modules.

6. Partager les réglages dans le projet

   Pour qu'un projet utilise toujours le même interpréteur et les mêmes règles, crée un fichier .vscode/settings.json à la racine du repo :

   json Copier

   {
     "python.defaultInterpreterPath": ".venv/bin/python",
     "editor.formatOnSave": true,
     "[python]": {
       "editor.defaultFormatter": "charliermarsh.ruff",
       "editor.codeActionsOnSave": {
         "source.organizeImports": "explicit"
       }
     },
     "files.exclude": {
       "**/__pycache__": true,
       "**/.pytest_cache": true
     }
   }

   Ce fichier est commité avec le projet : tous ceux qui l'ouvrent (toi sur une autre machine, ou un camarade de promo) auront la même config sans rien régler.

7. Utiliser le terminal intégré

   Ouvre-le avec Ctrl+ù (FR) ou Ctrl+` (US). Il s'ouvre directement dans le dossier du projet. Tu peux en avoir plusieurs en parallèle (un pour uv run, un pour git, un pour docker logs…) via le bouton + ou Split.

   Astuce : si tu utilises UV, lance ton serveur dans un terminal intégré. VS Code détectera automatiquement les liens http://localhost:8000 dans la sortie : Ctrl+clic pour ouvrir dans le navigateur.

8. Déboguer un script Python

   Pose un breakpoint en cliquant à gauche d'un numéro de ligne (un point rouge apparaît), puis appuie sur F5. VS Code te demande quel type de configuration utiliser — choisis Python File pour un script simple, ou FastAPI / Flask pour un serveur.

   Une fois en pause sur un breakpoint :

   • F10 — passer à la ligne suivante
   • F11 — entrer dans la fonction
   • Shift+F11 — sortir de la fonction
   • F5 — continuer jusqu'au prochain breakpoint

Trucs et astuces du quotidien

• Ouvrir un fichier rapidement avec Ctrl+P : tape quelques lettres du nom et Entrée. Plus rapide que naviguer dans l'arbre.
• Recherche globale avec Ctrl+Shift+F : cherche une chaîne dans tout le projet, regex possible, remplacement en bloc.
• Multi-cursor : Alt+clic ajoute un curseur, Ctrl+D sélectionne l'occurrence suivante du mot, Ctrl+Shift+L sélectionne toutes les occurrences. Indispensable pour renommer plein de fois la même chose.
• Déplacer une ligne avec Alt+↑/↓, la dupliquer avec Shift+Alt+↑/↓.
• Renommer un symbole partout dans le projet avec F2 sur une variable / fonction. Plus sûr qu'un rechercher-remplacer.
• Aller à la définition avec F12, revenir avec Alt+←. Shift+F12 liste tous les usages.
• Source Control (icône Git) pour stager, écrire un message, commit et push sans terminal. GitLens ajoute le blame ligne par ligne.
• Zen mode (Ctrl+K Z) pour cacher tous les panneaux et coder en plein écran. Échap Échap pour sortir.
• Markdown preview (Ctrl+Shift+V) pour prévisualiser un README.md côte à côte.
• Remote-SSH (extension Microsoft) pour ouvrir un dossier sur une machine distante. Tu codes en local mais tout s'exécute là-bas. Magique pour les VMs cloud.
• Dev Containers : ouvrir le projet dans un conteneur Docker avec sa stack toute prête. Idéal quand l'équipe partage un environnement complexe.

Aide-mémoire des raccourcis

Linux / Windows (sur macOS, remplace Ctrl par Cmd) :

# Navigation
Ctrl+P              # ouvrir un fichier par son nom
Ctrl+Shift+P        # palette de commandes
Ctrl+,              # réglages
Ctrl+B              # afficher/masquer la barre latérale
Ctrl+ù  /  Ctrl+`   # ouvrir le terminal intégré

# Édition
Ctrl+D              # sélectionner l'occurrence suivante
Ctrl+Shift+L        # sélectionner toutes les occurrences
Alt+clic            # ajouter un curseur
Alt+↑ / Alt+↓       # déplacer la ligne
Shift+Alt+↑/↓       # dupliquer la ligne
Ctrl+/              # commenter / décommenter
F2                  # renommer un symbole partout

# Recherche
Ctrl+F              # recherche dans le fichier
Ctrl+Shift+F        # recherche dans tout le projet
Ctrl+H              # rechercher / remplacer

# Navigation code
F12                 # aller à la définition
Shift+F12           # trouver les usages
Alt+← / Alt+→       # reculer / avancer dans l'historique

# Debug
F5                  # lancer / continuer
F9                  # breakpoint sur la ligne courante
F10 / F11           # step over / step into

Pour aller plus loin

• Documentation officielle : code.visualstudio.com/docs
• Tips & tricks : github.com/microsoft/vscode-tips-and-tricks
• Marketplace des extensions : marketplace.visualstudio.com