💻 Visual Studio Code – Éditeur, Débogage & Écosystème

L'Éditeur de Code Modulaire

Visual Studio Code (VS Code) est un éditeur de code source léger, gratuit et open-source développé par Microsoft. Il tourne sur Electron (applications de bureau avec JS/HTML/CSS).

Sa philosophie n'est pas d'être un "IDE tout-en-un" (comme JetBrains), mais un éditeur de texte rapide avec des outils de base (Git, Debug), qui devient un IDE puissant grâce à son écosystème d'extensions.

L'installation est simple et multi-plateforme.

• Méthode principale : Télécharger l'installeur depuis code.visualstudio.com.
• Windows : Via winget install Microsoft.VisualStudioCode.
• Linux (Ubuntu) : sudo snap install code --classic ou via .deb.
• macOS : Télécharger le .zip (Universal) et glisser l'app dans "Applications".

L'interface est simple et centrée sur la "Activity Bar" (barre d'outils à gauche).

C'est le cerveau de VS Code. Presque toutes les actions de l'IDE peuvent y être lancées.

Modes de la Palette

• Ctrl+Shift+P (ou F1) : Command Palette
  • Exécute des commandes (ex: "Git: Commit", "Format Document", "Install 'code' command").
• Ctrl+P : Go to File
  • Ouvre rapidement un fichier par son nom.
• Ctrl+P puis > :
  • Revient à la Command Palette.
• Ctrl+P puis @ :
  • Go to Symbol (naviguer vers une fonction/classe dans le fichier).

VS Code est configuré via des fichiers settings.json (bien qu'une UI existe).

{
  // Formater au sauvegardage
  "editor.formatOnSave": true,

  // Utiliser Prettier comme formateur par défaut
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // Activer ESLint pour ces langages
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript"
  ]
}

"IntelliSense" est le terme de Microsoft pour l'auto-complétion "intelligente".

• Complétion de code : Basée sur les types (TypeScript), l'analyse statique, et les imports.
• Informations sur les paramètres : Affiche la signature des fonctions/méthodes.
• Complétion de chemins : Complète les chemins de fichiers (ex: import './components/...').
• Complétion de paquets : Suggère les noms de paquets npm dans package.json ou les imports.

Permet de taper à plusieurs endroits en même temps. Extrêmement puissant pour le refactoring manuel.

Ouvre un terminal (PowerShell, bash, zsh...) directement dans l'IDE. Raccourci : Ctrl + ` (Control + Backtick).

• S'ouvre dans le dossier du projet.
• Permet de lancer npm install, git push, python script.py sans quitter l'éditeur.
• Supporte les terminaux multiples (onglets, split view).

VS Code intègre Git (SCM) nativement. Raccourci : Ctrl+Shift+G.

Le débogueur (Ctrl+Shift+D) est puissant mais nécessite une configuration via le fichier .vscode/launch.json.

F5 est le raccourci pour "Démarrer le débogage".

Exemple .vscode/launch.json (Node.js)

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${file}" // Débogue le fichier actuellement ouvert
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}" // (Pour React/Vue)
    }
  ]
}

Une fois lancé, vous pouvez poser des breakpoints (clic dans la marge), stepper (F10, F11) et inspecter les variables.

C'est le cœur de VS Code. Raccourci : Ctrl+Shift+X.

Les extensions transforment l'éditeur de texte en IDE. Elles ajoutent :

• Support de langages (Python, C++).
• Support de frameworks (Volar pour Vue, Angular Language Service).
• Linters & Formatters (ESLint, Prettier).
• Outils (Docker, GitLens).

extensions.json

Vous pouvez recommander des extensions pour le projet dans .vscode/extensions.json. VS Code proposera de les installer aux nouveaux membres de l'équipe.

C'est le domaine d'excellence de VS Code.

• JS/TS Natif : Le support de TypeScript (et donc JavaScript) est intégré (IntelliSense, refactoring basique).
• React : Support JSX natif.
• Frameworks : Le support complet (Angular, Vue, Svelte) est ajouté via des extensions (ex: Volar).
• Outils : Intégration ESLint, Prettier, et débogage Chrome (via launch.json).

Le développement Python est géré par l'extension Python (de Microsoft), qui transforme VS Code en un IDE Python (concurrent de PyCharm).

Fonctionnalités :

• Gestion d'Interpréteur : Permet de choisir (Ctrl+Shift+P > Select Interpreter) un vEnv, Conda, ou système.
• IntelliSense : Complétion, "Go to Definition".
• Linting/Formatting : Intégration Pylint, Flake8, Black, MyPy.
• Jupyter : Excellent support pour l'édition et l'exécution de notebooks .ipynb.

C'est une fonctionnalité majeure. L'extension "Remote Development" (pack) permet de séparer l'interface (locale) du code (distant).

• Remote - SSH : Ouvre un dossier sur un serveur distant (via SSH). L'éditeur tourne localement, mais le terminal, le debug, et l'analyse de code tournent sur le serveur.
• WSL : (Windows Subsystem for Linux) Permet d'ouvrir un projet dans un environnement Linux (WSL2) depuis Windows.

Fait partie du pack "Remote Development". Permet de définir un environnement de développement complet (OS, outils, extensions) dans un conteneur Docker.

Fichier : .devcontainer/devcontainer.json

{
  "name": "Mon Projet Python",
  "image": "mcr.microsoft.com/devcontainers/python:3.11",

  // Extensions VS Code à installer dans le conteneur
  "extensions": [
    "ms-python.python",
    "ms-python.black-formatter"
  ],
  // Commande à lancer après création
  "postCreateCommand": "pip install -r requirements.txt"
}
// VS Code propose "Reopen in Container".
// L'IDE s'exécute localement, mais tout (terminal, code)
// est dans le conteneur Docker.

Par défaut, VS Code ouvre un dossier ("root"). Un "Workspace" (espace de travail) permet d'ouvrir plusieurs dossiers dans la même fenêtre (ex: un dossier "API" et un dossier "Frontend").

File > Save Workspace As... > crée un fichier mon-projet.code-workspace.

Ce fichier JSON liste les dossiers inclus et peut contenir des settings spécifiques au workspace.