05 · Module 1 — Environnement

Setup Visual Studio Code

L'éditeur le plus utilisé au monde.
Et un terrain de jeu privilégié pour Claude.

13 minutesExtensions essentiellesConfiguration de base

§01 · Pourquoi VS Code

L'éditeur par défaut en 2026

Visual Studio Code est devenu l'éditeur de référence pour le développement moderne. Gratuit, multi-plateforme, performant, et soutenu par un écosystème d'extensions massif. Pour Claude Code, c'est l'environnement le mieux supporté et le plus naturel.

Adoption

76% des développeurs

Selon Stack Overflow 2024-2025. Aucun éditeur n'approche ce niveau d'adoption.

Tarif

Gratuit, open source

Sous licence MIT. Pas de version payante, pas d'abonnement, pas de limitation utilisateur.

Intégration Claude

Native

L'add-in Claude Code apporte un panneau intégré et des raccourcis qui rendent l'usage continu fluide.

§02 · Installation

Téléchargement en deux clics

1.

Aller sur code.visualstudio.com. Le site détecte automatiquement votre système d'exploitation et propose le téléchargement adapté. Cliquer sur le bouton bleu.

2.

Installer l'application. Sur macOS, glisser dans le dossier Applications. Sur Windows, exécuter l'installeur (bien cocher « Add to PATH » et « Open with Code » dans le menu contextuel). Sur Linux, suivre la procédure de votre distribution.

3.

Au premier lancement, VS Code propose une visite guidée. La passer ou la suivre selon votre humeur. L'interface s'ouvre avec un écran d'accueil et une barre d'activité à gauche.

§03 · Six extensions à installer

Les indispensables

VS Code seul est suffisant pour ouvrir des fichiers. Pour en faire un outil de développement avec Claude, six extensions composent la base. Toutes sont gratuites.

1 · Critique

Claude Code

L'extension officielle Anthropic. Panneau Claude intégré, raccourcis, sélection de contexte. La leçon 6 y revient en détail.

2

ESLint

Analyseur de code JavaScript et TypeScript. Détecte les erreurs et incohérences en temps réel. Indispensable pour tout projet web.

3

Prettier

Formateur automatique de code. Vous écrivez n'importe comment, il met tout au propre à la sauvegarde. Reformate aussi le HTML, CSS, JSON, Markdown.

4

GitLens

Surcouche Git. Affiche qui a modifié quelle ligne et quand. Très utile en équipe ou pour comprendre un code hérité.

5

Error Lens

Affiche les erreurs ESLint directement dans le code, sans avoir à ouvrir un panneau séparé. Gain de temps massif.

6

Tailwind CSS IntelliSense

Autocomplétion et aperçu des classes Tailwind. Essentiel si votre stack utilise Tailwind (qui est dominant en 2026).

§04 · Installation des extensions

Trois clics par extension

1.

Ouvrir le panneau Extensions. Cliquer sur l'icône en forme de carrés à gauche dans la barre d'activité. Ou raccourci : Cmd+Shift+X (Mac) / Ctrl+Shift+X (Windows/Linux).

2.

Rechercher l'extension par son nom dans la barre de recherche en haut du panneau. Pour Claude Code, taper exactement « Claude Code » et vérifier que l'éditeur est Anthropic.

3.

Cliquer Installer. L'extension s'installe en quelques secondes. Certaines (Claude Code, ESLint) demandent un redémarrage de VS Code. Acceptez. Refaire la procédure pour les 5 autres extensions.

§05 · Configuration utilisateur

Quatre réglages à appliquer tout de suite

VS Code se configure via un fichier settings.json ou via l'interface graphique. Quatre réglages améliorent immédiatement le confort de travail avec Claude Code.

Police

JetBrains Mono ou Fira Code

Polices monospace de qualité avec ligatures programmatiques. Le code se lit dix fois mieux qu'avec la police par défaut.

Taille

14 ou 15 pour le code

Selon votre vue. Par défaut, VS Code est à 12, c'est petit. Augmenter à 14-15 réduit la fatigue sur les longues sessions.

Format on save

Activer le formatage à la sauvegarde

Settings → editor.formatOnSave : true. Prettier reformate le code à chaque Cmd+S. Plus aucun code mal indenté.

Auto save

Activer la sauvegarde automatique

Settings → files.autoSave : afterDelay. VS Code sauvegarde après 1 seconde d'inactivité. Plus jamais de Cmd+S oublié.

§06 · Ouvrir le projet

Trois façons d'ouvrir votre projet

1.

Depuis VS Code lui-même. Fichier → Ouvrir le dossier. Naviguer vers ~/Projects/votre-projet/. C'est la voie classique mais la plus lente.

2.

Depuis le terminal. Si l'option « Open with Code » a été cochée à l'installation, vous pouvez taper code . depuis n'importe quel dossier. C'est la voie privilégiée des développeurs aguerris.

3.

Depuis le Finder ou l'Explorateur. Clic droit sur le dossier projet → Ouvrir avec → Visual Studio Code. Utile pour les rares projets que vous touchez occasionnellement.

Astuce méconnue

VS Code se souvient des derniers projets ouverts. Cmd+R (Mac) / Ctrl+R (Windows) affiche la liste. Quelques caractères pour filtrer, Entrée pour ouvrir. Plus rapide que toute autre méthode.

§07 · Workflow type

Une session de travail standard

Une fois VS Code installé et configuré, voici à quoi ressemble une session de travail typique sur un projet.

1.

Ouvrir le projet avec code . depuis le terminal. VS Code charge le dossier, les onglets précédemment ouverts se rétablissent.

2.

Ouvrir le panneau Claude Code avec Cmd+L (Mac) ou Ctrl+L (Windows/Linux). Le panneau Claude s'ouvre à droite, prêt à recevoir vos demandes.

3.

Sélectionner du code dans l'éditeur si vous voulez le contexte ciblé. Sinon, Claude lit le projet entier via le CLAUDE.md.

4.

Poser votre demande en langage naturel dans le panneau Claude. Activer le mode plan (Shift+Tab) si la tâche modifie plusieurs fichiers.

Fin · Leçon 05 acquise

Cap sur la leçon 06

Vous avez VS Code installé, six extensions essentielles, une configuration confortable. La leçon suivante zoome sur l'intégration Claude Code dans VS Code et les trois raccourcis qui changent tout au quotidien.

Exercice — appropriation

Installez VS Code et les six extensions listées. Appliquez les quatre réglages de configuration. Ouvrez votre projet de référence (créé en L04) avec code . et vérifiez que tout fonctionne : ESLint signale des erreurs, Prettier reformate à la sauvegarde, le panneau Claude Code est accessible. Notez le temps total d'installation et de configuration.

Quiz · Validation des acquis

Quiz · Setup Visual Studio Code

8 questions · une seule bonne réponse par question · vous pouvez recommencer autant de fois que nécessaire.

1 / 8

Question à choix multiple