Comment utiliser le mode Agent de VS Code pour les débutants

Vous avez entendu parler du Mode Agent de VS Code ?

Si vous utilisez Visual Studio Code (VS Code), cette fonctionnalité est sur le point de devenir votre nouveau meilleur ami. Imaginez avoir un acolyte IA qui ne se contente pas de suggérer du code, mais qui effectue réellement le gros du travail : modifier des fichiers, exécuter des commandes et corriger les erreurs, tout en sirotant votre café et en acquiesçant d'un signe de tête.

C'est ça, le Mode Agent en un mot, et aujourd'hui, je vous explique comment l'utiliser, étape par étape, avec une ambiance amusante et conviviale pour les débutants. Plongeons dans le monde du Mode Agent de VS Code et voyons comment il peut booster votre jeu de codage !

Qu'est-ce que le Mode Agent de VS Code ? Une introduction rapide

Alors, de quoi s'agit-il avec ce Mode Agent de VS Code ? Imaginez GitHub Copilot, l'assistant basé sur l'IA de VS Code, passant de "suggerer utile" à "codeur autonome". En Mode Agent, Copilot ne se contente pas de rester là à attendre que vous tapiez ; il prend les choses en main. Vous lui donnez une tâche de haut niveau, comme "Créez-moi une application de tâches", et il détermine les fichiers à modifier, écrit le code, exécute les commandes et corrige même les erreurs, tout seul. C'est comme programmer en binôme avec un robot qui ne dort jamais !

À partir du 10 avril 2025, le Mode Agent est activement développé et déployé, avec des fonctionnalités telles que la prise en charge du Model Context Protocol (MCP), ce qui signifie qu'il peut exploiter des outils et des données externes. Que vous soyez un débutant ou un professionnel, cela change la donne. Prêt à l'essayer ? Mettons-le en place !

Pourquoi vous allez adorer utiliser le Mode Agent de VS Code

Avant de passer à la pratique, parlons des raisons pour lesquelles le Mode Agent de VS Code est génial :

• Codage mains libres : Dites-lui ce que vous voulez, et il fait le travail, parfait pour les tâches en plusieurs étapes.
• Corrections intelligentes : Il détecte les erreurs (comme les erreurs de syntaxe ou les tests échoués) et boucle pour les corriger.
• Puissance des outils : Il utilise des outils intégrés, des serveurs MCP et des extensions pour aller au-delà des modifications de base.
• Vous avez le contrôle : Vous approuvez chaque modification, donc pas de catastrophes d'IA incontrôlées.

Considérez-le comme votre assistant de codage personnel qui a toujours une longueur d'avance. Maintenant, mettons-le en marche !

Comment configurer le Mode Agent de VS Code : Étape par étape

Commencer avec le Mode Agent de VS Code est un jeu d'enfant. Voici comment activer la fonction et libérer la magie :

Étape 1 : Mettre à jour VS Code

Tout d'abord, assurez-vous d'utiliser une version récente de VS Code qui prend en charge le Mode Agent. Rendez-vous sur code.visualstudio.com, téléchargez la version Stable ou utilisez Insiders pour les fonctionnalités de pointe.

Étape 2 : Activer le Mode Agent

Le Mode Agent peut ne pas être activé par défaut en fonction de votre version et de l'état du déploiement. Voici comment potentiellement l'activer :

Ouvrez VS Code.

Appuyez sur Ctrl + , (ou Cmd + , sur Mac) pour ouvrir les Paramètres.

Recherchez chat.agent.enabled et assurez-vous qu'il est coché.

Si vous ne le voyez pas, rechargez VS Code après la mise à jour, il pourrait apparaître s'il est disponible dans votre version. Recherchez les mises à jour via Help > Check for Updates.

Conseil de pro : Cette étape peut devenir inutile au fur et à mesure du déploiement du Mode Agent. Pour l'instant, ce basculement (s'il est présent) vous permet d'y accéder en premier !

Étape 3 : Connectez-vous à GitHub

Le Mode Agent de VS Code fonctionne avec GitHub Copilot, vous aurez donc besoin d'un abonnement actif.

Dans VS Code, cliquez sur l'icône Copilot dans la barre latérale (ou utilisez le raccourci pertinent, par exemple, Ctrl+Shift+I / Cmd+Shift+I pour le volet Copilot).

Connectez-vous avec vos identifiants GitHub. Si vous n'avez pas d'abonnement Copilot, vous devrez peut-être vous inscrire via GitHub.

Étape 4 : Ouvrez la vue Chat et sélectionnez le Mode Agent

Maintenant, passons à la partie amusante :

Ouvrez la vue Copilot Chat (Ctrl+Shift+I / Cmd+Shift+I).

Recherchez le menu déroulant du mode en bas de la zone de saisie du Chat, il peut indiquer "Ask", "Edit" ou "Agent".

Sélectionnez Agent. Boom, vous êtes en Mode Agent de VS Code !

Comment utiliser le Mode Agent de VS Code : Construisons quelque chose !

Très bien, la configuration est terminée, il est temps de voir le Mode Agent en action ! Construisons ensemble une simple application de tâches React. Prenez un espace de travail VS Code vide et suivez le guide.

Étape 1 : Donnez-lui une tâche

Dans la vue Chat (avec le Mode Agent sélectionné), tapez une tâche claire et de haut niveau. Par exemple :

>> Créez une simple application de tâches React. Elle doit avoir un champ de saisie pour ajouter des tâches et afficher la liste des tâches.

Appuyez sur Entrée. Vous n'avez pas besoin de spécifier les fichiers, le Mode Agent s'en charge !

Étape 2 : Observez le plan se dérouler

Copilot commencera à répondre, en diffusant son processus de réflexion. Il pourrait dire :

"D'accord, je peux vous aider avec ça. Voici le plan :

1. Mettre en place une structure de projet React de base (si nécessaire).
2. Créer le composant principal App.js pour gérer l'état.
3. Créer un composant TodoForm.js pour le champ de saisie.
4. Créer un composant TodoList.js pour afficher les tâches. Je vais commencer par créer les fichiers nécessaires..."

C'est comme regarder un ami coder en direct ! Il proposera également des commandes de terminal, comme npm init react-app si votre projet est nouveau.

Étape 3 : Approuvez les outils

Le Mode Agent pourrait avoir besoin d'utiliser des outils, comme l'exécution de npm install ou l'utilisation d'opérations de fichiers intégrées. Vous verrez des invites comme :

"Exécuter

npm install react react-dom

#terminal

#filesystem

src/App.js

Cliquez sur "Continuer" pour approuver (ou ajuster d'abord la commande). Vous pourrez peut-être approuver automatiquement les outils pour la session via un menu déroulant, pratique mais utilisez-le avec sagesse !

Étape 4 : Examinez les modifications

Au fur et à mesure que le Mode Agent fonctionne, le code est diffusé dans votre éditeur avec des superpositions affichant les modifications (vues de différence). Pour notre application de tâches, vous pourriez voir :

App.js mis à jour avec la gestion de l'état (useState) pour les tâches.

Un nouveau fichier src/TodoForm.js avec un formulaire et un élément d'entrée.

Un nouveau fichier src/TodoList.js affichant les éléments de la liste.

Naviguez dans les modifications avec les flèches Haut/Bas dans la superposition ou la visionneuse de différences, puis appuyez sur "Accepter" (ou un bouton similaire) pour conserver les modifications ou "Rejeter" pour les rejeter. La vue Chat liste généralement les fichiers modifiés, ce qui facilite le suivi.

Étape 5 : Itérer et affiner

Pas parfait ? Dites au Mode Agent ce qu'il faut corriger ou ajouter ensuite :

>> Maintenant, ajoutez une fonctionnalité pour marquer les tâches comme terminées lorsqu'on clique dessus et changez la couleur de la police en noir pour les tâches ajoutées à la liste de tâches.

Le Mode Agent reviendra en arrière, analysera la demande, proposera des modifications, exécutera des tests (s'ils sont configurés dans tasks.json) et mettra à jour le code. Il continuera jusqu'à ce qu'il réussisse, ou que vous le mettiez en pause.

Maîtriser le Mode Agent de VS Code : Trucs et astuces

Maintenant que vous avez les bases, améliorons vos compétences en Mode Agent de VS Code !

• Utilisez des invites spécifiques : Les tâches vagues comme "Faire une application" peuvent être moins efficaces. Essayez des objectifs ciblés : "Ajoutez un bouton bascule en mode sombre à mon application React en utilisant l'API Context." ou "Refactorisez ce script Python utils.py pour utiliser des classes pour une meilleure organisation." Des objectifs clairs = de meilleurs résultats !
• Tirez parti des outils avec # (ou une autre syntaxe) : Vous voulez que le Mode Agent utilise une capacité spécifique ? Utilisez la syntaxe désignée (par exemple, #).
• #terminal pour exécuter des commandes.
• #codebase pour rechercher dans votre projet le contexte pertinent.
• #fetch pour extraire des données d'une URL. Vérifiez les outils disponibles (souvent indiqués par une icône ou une commande) dans la zone de saisie du Chat.

• Mettez en pause ou annulez si nécessaire : Si le Mode Agent déraille (par exemple, en modifiant le mauvais fichier ou en étant bloqué), appuyez sur "Pause" pour affiner votre invite ou "Annuler" pour arrêter l'opération en cours. Vous pouvez souvent toujours accepter les modifications utiles apportées jusqu'à présent.
• Annulez comme un pro : Vous avez fait une erreur en acceptant les modifications ? Utilisez "Annuler la dernière modification" (ou une commande similaire, souvent située près de la zone de saisie/de titre du chat) pour revenir en arrière. Vous avez changé d'avis ? "Rétablir la dernière modification" pourrait le ramener. C'est comme Ctrl+Z/Cmd+Z pour l'IA !

• Ajustez les paramètres (si disponibles) : Accédez aux paramètres (Ctrl + ,) et recherchez les paramètres pertinents du Mode Agent ou du Copilot Chat. Vous pourriez trouver des options comme :
• chat.agent.maxRequests : Limitez le nombre d'étapes/d'itérations qu'il faut.
• github.copilot.chat.agent.runTasks : Activez/désactivez l'exécution automatique des tâches de l'espace de travail (comme les builds/tests définis dans tasks.json).

Mode Agent vs. Mode Édition : Quand utiliser quoi ?

Vous êtes confus au sujet du Mode Agent par rapport au Mode Édition dans Copilot Chat ? Voici les informations :

• Mode Agent : Idéal pour les tâches importantes en plusieurs étapes où vous souhaitez que l'IA détermine le plan, gère les fichiers et se corrige potentiellement elle-même (par exemple, "Créer une fonctionnalité", "Refactoriser ce module"). C'est plus autonome.
• Mode Édition (ou Chat en ligne) : Parfait pour les modifications rapides et ciblées dans le fichier ou la sélection actuelle (par exemple, "Corriger cette fonction", "Renommer cette variable", "Ajouter la gestion des erreurs ici"). Vous avez plus de contrôle direct sur la portée.

Si vous n'êtes pas sûr des fichiers qui doivent être modifiés ou de la manière d'aborder une tâche plus importante, laissez le Mode Agent prendre les devants. Besoin de modifications précises à un endroit spécifique ? Édition est souvent plus rapide.

Conclusion : Votre programmeur en binôme IA est arrivé

Le Mode Agent de VS Code représente une étape importante vers le développement assisté par l'IA. En déléguant des tâches de codage complexes et en plusieurs étapes à GitHub Copilot, vous pouvez vous concentrer davantage sur la conception de haut niveau, la résolution de problèmes et l'examen du code généré. Vous avez vu comment le configurer, le guider pour créer une application simple et affiner les résultats. Bien qu'il nécessite des instructions claires et un examen attentif, le Mode Agent a le potentiel d'accélérer considérablement les flux de travail de développement et de relever les défis de codage plus efficacement.

Prêt à essayer votre nouveau programmeur en binôme IA ? Lancez VS Code, assurez-vous que Copilot est configuré, passez en Mode Agent et donnez-lui une tâche réelle de votre projet actuel. Qu'allez-vous construire ou refactoriser en premier ?