YOAT Academy
Cabinet Pedetti — Formation
Module 1 · Section 4
Développement Web · 13 leçons · 1 h 27
Section 4 — Développement Web

Setup Visual Studio Code

Capsule 13 min Type pratique Modalité e-learning Niveau intermédiaire
Objectif opérationnel

À l'issue de cette leçon, le stagiaire configure Visual Studio Code avec les extensions essentielles et l'intégration Claude, prêt pour le développement assisté.

§ 01

Pourquoi VS Code

Visual Studio Code est l'éditeur de code le plus largement adopté en 2026, tous langages confondus. Trois raisons : il est gratuit, multi-plateforme (Mac, Windows, Linux), et 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.

Vous pouvez utiliser un autre éditeur (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 soignée.

§ 02

Installation

VS Code se télécharge sur le site officiel. L'installation est standard, sans piège particulier. Au premier lancement, l'éditeur propose un thème, une langue, et quelques extensions populaires. Acceptez les choix par défaut pour cette première fois ; vous personnaliserez plus tard.

§ 03

Extensions essentielles

Une dizaine d'extensions transforment VS Code d'éditeur correct en environnement productif :

Claude Code (officielle Anthropic) : intègre Claude dans un panneau de l'éditeur, à côté du code. Vous gardez la conversation et le code dans la même fenêtre.

ESLint et Prettier : signalent et corrigent automatiquement les erreurs de style et de syntaxe pour le code JavaScript/TypeScript.

GitLens : enrichit l'intégration Git de l'éditeur. Voir l'historique d'une ligne, l'auteur d'un commit, comparer des branches sans quitter VS Code.

Path Intellisense : autocomplétion des chemins de fichiers.

EditorConfig : respect automatique des conventions de formatage définies par projet.

Selon votre stack : extensions spécifiques au langage (Python, Go, Rust, etc.) et au framework (React, Vue, Tailwind).

§ 04

Configuration de base

Quelques réglages améliorent radicalement l'expérience :

Format on save. Réglage Editor: Format On Save dans les paramètres. Le code est mis en forme automatiquement à chaque sauvegarde.

Auto-save. Réglage Files: Auto Save. Évite les pertes de modifications.

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

Thème adapté. Sombre ou clair, selon votre fatigue oculaire. Tokyo Night, One Dark Pro et Solarized sont des classiques.

§ 05

Configuration complète

Comptez quarante-cinq minutes pour aller au bout. C'est un investissement qui rapporte sur des centaines d'heures de code à venir.

  1. Télécharger VS Code sur code.visualstudio.com.

    macOS Fichier .zip. Décompresser, glisser l'application dans Applications. Installer la commande code dans le shell : ouvrir VS Code, palette de commandes (Cmd + Shift + P) → Shell Command: Install 'code' command in PATH.
    Windows Installeur .exe. Cocher Add to PATH et Open with Code dans les options. La commande code est disponible dans PowerShell après installation.

  2. Ouvrir VS Code. Au premier lancement, choisir un thème.

  3. Installer l'extension Claude Code : palette → Extensions: Install Extensions → chercher Claude Code → installer l'officielle (éditeur Anthropic). S'authentifier quand l'extension le demande.

  4. Installer les autres extensions essentielles citées plus haut, une par une.

  5. Ouvrir les paramètres (Cmd/Ctrl + ,) et activer : Format On Save, Auto Save (after delay).

  6. Tester : ouvrir un dossier de projet, ouvrir un fichier, modifier, sauvegarder. Le formatage doit s'appliquer. Le panneau Claude doit être accessible depuis la barre latérale.

Exercice — manipulation

Premier code assisté

Ouvrir le projet créé en leçon 26 dans VS Code. Demander à Claude depuis le panneau de l'éditeur : « 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 est correctement formaté à la sauvegarde.

Sources officielles consultées

VS Code est configuré et l'intégration Claude fonctionne ?