YOAT Lab
Cabinet PEDETTI · Formation Claude · Maîtrise
Module 1 · 3 leçons
Environnement de développement
Module 1 — Environnement de développement

Setup Visual Studio Code

Capsule 13 min Type pratique Modalité e-learning Niveau maîtrise
Objectif opérationnel

À l'issue de cette leçon, le stagiaire dispose de Visual Studio Code installé, configuré, avec les extensions essentielles (Claude Code, ESLint, Prettier, GitLens), et l'intégration Claude opérationnelle directement dans l'éditeur.

§ 01

Pourquoi Visual Studio Code

Visual Studio Code est l'éditeur de code le plus largement adopté en 2026, tous langages confondus. Trois raisons à cette position dominante : il est gratuit, il est multi-plateforme (macOS, Windows, Linux), et il bénéficie d'un écosystème d'extensions massif. L'intégration native avec Claude Code en fait le compagnon naturel de l'agent en ligne de commande qu'on a installé en leçon 25.

Vous pouvez utiliser un autre éditeur si vous en avez déjà un — JetBrains, Cursor, Sublime, Vim. Cette formation s'appuie sur VS Code parce qu'il est le plus accessible aux profils non-spécialistes et qu'il offre une intégration Claude particulièrement soignée. Les concepts présentés ici sont transposables aux autres éditeurs : panneau Claude, sélection de contexte, raccourcis clavier.

§ 02

Installation

L'installation prend 5 minutes sur n'importe quel OS. Le téléchargement se fait sur code.visualstudio.com — la page détecte automatiquement votre système et propose la bonne version.

  1. Télécharger l'installeur sur code.visualstudio.com. Le bouton principal de la page propose la version adaptée à votre OS.

    macOSFichier .zip. Le décompresser, glisser l'application dans Applications. Au premier lancement, macOS peut afficher un avertissement de sécurité — valider l'ouverture.
    WindowsInstalleur .exe. Pendant l'assistant, cocher impérativement : « Add to PATH » (rend la commande code disponible dans le terminal) et « Open with Code » (ajoute une entrée dans le menu contextuel des dossiers).

  2. Activer la commande code en ligne de commande pour pouvoir ouvrir un dossier depuis le terminal.

    macOSOuvrir la palette de commandes avec Cmd + Shift + P, taper « Shell Command: Install 'code' command in PATH », valider.
    WindowsAutomatique si vous avez coché « Add to PATH » à l'installation. Vérifier en tapant code . dans n'importe quel dossier PowerShell.

  3. Premier lancement. VS Code s'ouvre sur l'écran de bienvenue. Choisir un thème et la langue (français disponible). Accepter les choix par défaut pour les autres options — vous personnaliserez plus tard. L'objectif maintenant est d'avancer.

§ 03

Installer l'extension Claude Code

L'extension la plus importante en premier : Claude Code, l'extension officielle Anthropic. C'est elle qui ajoute le panneau Claude dans VS Code et permet d'invoquer l'agent depuis l'éditeur.

  1. Ouvrir la palette de commandes avec Cmd + Shift + P (macOS) ou Ctrl + Shift + P (Windows). Taper « Extensions: Install Extensions ». Le panneau Extensions s'ouvre.

  2. Rechercher Claude Code dans la barre de recherche. Vérifier que l'éditeur est bien Anthropic — il existe des extensions tierces avec des noms proches. C'est cette extension-là, pas une autre.

  3. Cliquer Install. Une fois l'installation finie, une nouvelle icône Claude apparaît dans la barre latérale gauche de VS Code.

  4. Premier clic sur l'icône Claude. Le panneau s'ouvre et demande l'authentification. Comme pour Claude Code en ligne de commande (leçon 25), vous vous connectez avec votre compte Anthropic via le navigateur, vous autorisez, et c'est terminé.

§ 04

Cinq extensions essentielles

Au-delà de Claude Code, cinq extensions transforment VS Code en environnement productif. Installez-les une par une via la palette Extensions, en vérifiant l'éditeur officiel pour chacune.

ESLint (Microsoft)

Signale les erreurs et anti-patterns dans le code JavaScript et TypeScript. Indispensable. Configuration via .eslintrc à la racine du projet.

Prettier (Prettier)

Formate automatiquement le code à la sauvegarde. Met fin aux discussions stériles sur les conventions de style. Combiné avec ESLint, c'est le duo de référence.

GitLens (GitKraken)

Enrichit l'intégration Git de l'éditeur : historique d'une ligne, auteur d'un commit, comparaison de branches sans quitter VS Code. Utile dès qu'on travaille à plusieurs.

Path Intellisense (Christian Kohler)

Autocomplétion des chemins de fichiers quand vous tapez un import ou un lien. Petit confort, qu'on regrette quand on ne l'a pas.

EditorConfig (EditorConfig)

Respect automatique des conventions de formatage définies dans un .editorconfig à la racine du projet. Utile pour aligner toute l'équipe sur les mêmes règles.

Selon votre stack, vous ajouterez ensuite des extensions spécifiques au langage (Python, Go, Rust) et au framework (React, Vue, Tailwind CSS IntelliSense). Mais ces cinq-là forment la base commune à tout projet professionnel.

§ 05

Configuration de base — quatre réglages critiques

Quatre réglages améliorent radicalement l'expérience d'utilisation. Ils s'appliquent via Cmd + , (macOS) ou Ctrl + , (Windows) qui ouvre les paramètres.

1. Format On Save

Réglage Editor: Format On Save. Cocher. Le code est mis en forme automatiquement à chaque sauvegarde, par Prettier ou ESLint selon le langage.

2. Auto Save

Réglage Files: Auto Save. Choix afterDelay. VS Code sauvegarde tout seul après une seconde d'inactivité. Plus jamais de modification perdue.

3. Police monospace lisible

JetBrains Mono, Fira Code ou Cascadia Code (livrée avec Windows Terminal). Trois polices conçues pour le code, beaucoup plus lisibles que les défauts système.

4. Thème adapté à votre fatigue

Sombre (Tokyo Night, One Dark Pro) ou clair (Solarized Light) selon vos préférences. Vous changerez plusieurs fois au début, c'est normal. L'important est le confort visuel sur de longues sessions.

§ 06

Test final de bout en bout

Avant de clore la leçon, vérification complète que tout fonctionne ensemble.

Validation

Si ces quatre tests passent, votre environnement de développement est complètement opérationnel. Vous êtes prêt pour la suite de la formation. Sinon, identifiez à quelle étape ça bloque et reprenez la procédure correspondante.

  1. Ouvrir le projet créé en leçon 26. Menu File → Open Folder, naviguer vers ~/Projects/mon-projet, valider. Le projet apparaît dans la barre latérale gauche avec son arborescence.

  2. Tester l'auto-formatage. Ouvrir le CLAUDE.md, ajouter une ligne avec un espace en trop ou un retour à la ligne mal placé, sauvegarder avec Cmd/Ctrl + S. Le formatage doit s'appliquer automatiquement si Format On Save est actif.

  3. Tester le panneau Claude. Cliquer sur l'icône Claude dans la barre latérale. Le panneau de conversation doit s'ouvrir. Si tout est bien configuré, Claude indique qu'il a lu le CLAUDE.md du projet.

  4. Tester l'intégration complète. Demander à Claude depuis le panneau : « Crée un fichier index.html avec une structure de page basique et un titre Mon projet ». Vérifier que le fichier apparaît dans l'arborescence et qu'il est correctement formaté.

Exercice — appropriation

Tour complet de votre nouveau VS Code

Effectuez la procédure complète d'installation et de configuration. Faites ensuite passer les quatre tests de validation finale dans l'ordre. Notez à chaque étape : (1) le temps réel passé, (2) les difficultés rencontrées, (3) les choix de personnalisation que vous avez faits (thème, police, taille). Cette base personnalisée sera votre environnement de travail pour les 15 leçons suivantes.

Cet exercice est à conserver dans votre dossier de stagiaire. Il n'est pas évalué mais il est tracé.

Sources officielles consultées

VS Code est installé, configuré, avec les bonnes extensions, et l'intégration Claude fonctionne sur votre projet de test ?