Niveau Niveau expert

Vibe Coder sur Visual Studio Code avec Copilot

Tutorieldéveloppement

Publié par (membre de la communauté)
le , mis à jour le (9110 lectures)

code vscode copilot vibe skill agent

Il est loin le temps où Visual Studio Code courait derrière Cursor ou Claude Code. Aujourd'hui, l'éditeur open source de Microsoft est l'un des environnements de développement qui intègre le mieux l'intelligence artificielle.

Le « vibe coding » est une expression inventée par Andrej Karpathy au début de l'année 2025. Il désigne une nouvelle façon de programmer, en déléguant entièrement l'écriture du code à l'intelligence artificielle d'un agent. Le terme est controversé et sa définition est floue. Dans ce tutoriel, nous montrons comment utiliser l'agent IA comme un outil afin de générer du code de manière solide et maîtrisée.

À qui s'adresse ce tutoriel ? Aux développeurs sous Visual Studio Code, avec un abonnement GitHub Copilot payant.

Le plan gratuit ne suffit pas car nous aurons besoin des derniers modèles d'Anthropic ou d'OpenAI. En outre, mieux vaut avoir un système de gestion de versions (comme Git).

Sommaire

  • Configurer Visual Studio Code
  • Les modes de l'agent
  • Gérer le contexte de l'agent
  • Surveiller les requêtes premium
  • Discuter d'abord, générer le code ensuite
  • Sécurité et conclusion

Configurer Visual Studio Code

Si ce n'est pas déjà fait, ouvrez la barre latérale du chat en cliquant sur son icône en haut à droite du champ de recherche. En bas de cette barre latérale, passez en mode Agent et sélectionnez un modèle — les derniers modèles d'Anthropic ou d'OpenAI feront l'affaire.

Même si cela n'est pas obligatoire, je recommande au développeur qui connaît bien son travail d'essayer le mode « auto-approve ». Voici la configuration :

  "chat.agent.maxRequests": 1000,
  "chat.tools.global.autoApprove": true,

Attention : cela fait passer l'agent IA de VS Code dans un mode « auto-approve » efficace, mais aussi risqué. Vous devrez désormais le surveiller durant son travail et systématiquement utiliser votre système de gestion de versions afin de pouvoir revenir à une version antérieure en cas de problème.

Petit point de vocabulaire pour distinguer modèles de langage et agents. On peut voir un modèle de langage (ou « LLM », pour Large Language Model) comme une capacité de raisonnement sur étagère. Des exemples de LLM : Claude Sonnet, GPT, Gemini pro. Ils n'ont pas les mêmes points forts. Un agent de programmation IA est un programme doté d'un chat qui utilise un ou plusieurs modèles pour accomplir des tâches de programmation. Des exemples d'agents : Claude Code, l'agent de GitHub Copilot, celui de Cursor, Gemini CLI, OpenAI Codex. Ces solutions ne se valent pas, les coûts diffèrent aussi. Il ne faut pas hésiter à les essayer et à les réessayer régulièrement car le paysage évolue rapidement.

Les modes de l'agent

VS Code propose plusieurs modes accessibles depuis le sélecteur en bas de la barre latérale du chat :

  • Agent : planifie et implémente, exécute des commandes, utilise des outils. C'est le mode par défaut.
  • Plan : crée un plan structuré avant de coder.
  • Ask : répond aux questions sans modifier de fichiers.

Gérer le contexte de l'agent

Un agent de programmation IA doit être traité comme un perpétuel nouveau venu. À chaque session de travail, il redécouvre le projet depuis zéro. En pratique, une session ne dure que quelques minutes ou dizaines de minutes.

Démarrez toujours une nouvelle session du chat (« + ») pour chaque nouvelle tâche. Cela évite de polluer le contexte avec des informations issues d'une tâche précédente.

La fenêtre de contexte représente la quantité maximale de texte que l'agent peut traiter simultanément. Elle contient tout : les instructions, la discussion, le code lu, écrit, corrigé, relu etc. Sa taille est limitée. Lorsqu'elle est remplie, il faut redémarrer avec un agent tout neuf. C'est pourquoi il est important de ne pas la surcharger et de commencer une session propre pour chaque tâche.

Surveiller les requêtes premium

Nous utilisons les derniers modèles premium. Il y a une limite mensuelle de requêtes premium, il faut donc surveiller la consommation. Cliquez sur l'icône du chat en bas de la barre latérale. Repérez le pourcentage de requêtes premium restantes pour le mois en cours.

Surveiller la consommation des requêtes premium

Discuter d'abord, générer le code ensuite

Implémenter une fonctionnalité, cela commence par la rédaction de spécifications. Lorsque cela est fait, n'oublions pas qu'un agent de programmation IA est, à chaque nouvelle session, un nouveau venu. Même après qu'il ait lu la documentation, on ne lâche pas un nouveau venu sur une base de code existante en lui disant de faire comme il le sent. On lui demande comment il envisage de traiter le problème (c'est le plan d'implémentation), on en discute avec lui. Ensuite on le laisse travailler. À la fin, on vérifie le travail.

  1. Décrire ce dont on a besoin ;
  2. Concevoir un plan avec l'agent ;
  3. Relire et corriger le plan ;
  4. Faire implémenter ;
  5. Revue de code et corrections.

Ce processus est adapté aux tickets complexes. Il n'y a aucune raison d'être rigide sur quoi que ce soit. Mais dans le cadre de ce tutoriel, suivons toutes les étapes.

1. Décrire le besoin

Quelques lignes ou phrases suffisent pour décrire ce que l'on veut obtenir. Expliquer ce que l'on a au départ et ce que l'on souhaite obtenir. Si l'on sait quels fichiers sources sont concernés, on peut le mentionner. Mais à cette étape, le prompt n'a pas besoin d'être très solide. Il sera complété à l'étape suivante.

Pour ma part, je rédige ce genre de prompts dans un éditeur de texte à part. C'est plus confortable.

2. Concevoir un plan avec l'agent

Passez en mode Plan dans le sélecteur en bas de la barre latérale du chat. Ce mode est conçu pour que l'agent explore le code et propose un plan structuré avant de toucher à quoi que ce soit.

Donnez-lui un prompt qui l'invite à investiguer, poser des questions, proposer des approches et leurs compromis. C'est une collaboration : le développeur corrige, clarifie, tranche. N'hésitez pas à challenger l'agent. Vous pouvez glisser-déposer des fichiers pertinents dans le chat pour lui fournir du contexte supplémentaire.

Voici un exemple de prompt :

[ICI_VOTRE_BESOIN]

Investigate the codebase to understand how it currently works. Then discuss with me: present your findings, what needs to change, possible approaches and their trade-offs. Ask clarifying questions. Once we agree on an approach, write a step-by-step implementation plan with file paths and function names. Do not start coding.

Le principe ici est d'inciter l'agent à poser des questions afin de passer dans un mode collaboratif. L'idée est d'éviter que l'agent ne se précipite vers une solution. Et réfléchir avec lui sur les différents choix de conception dans un premier temps.

Lors de cette étape de conception, on peut demander à l'agent de faire des recherches sur le web. En ce qui concerne les bibliothèques de programmation, le MCP Context7 vous sera d'une grande utilité, il contient de la documentation prête à emploi pour les agents. Une fois Context7 installé, c'est une bonne idée de demander à l'agent de l'utiliser avant d'écrire le plan. Bien entendu, Context7 est une source externe et donc un risque d'injection de prompts. C'est pourquoi le meilleur moment pour s'en servir est lors de la conception du plan, alors que nous (humains) sommes présents et interagissons avec l'agent.

J'écris mes prompts en anglais, mais le français marchera très bien.

3. Relire et corriger le plan

Le mode Plan de Visual Studio Code produit un plan structuré. Le relire attentivement. Demander des ajustements si nécessaire. Ne pas hésiter à itérer.

Mettez une attention particulière sur les structures de données. N'espérez jamais qu'un problème complexe puisse se résoudre correctement comme par magie sans que vous n'ayez à comprendre comment !

Obtenir de bonnes spécifications est certainement au cœur de la programmation avec IA. Ce savoir-faire devient essentiel à notre métier, et je ne doute pas qu'il fera l'objet d'une attention croissante des acteurs du développement logiciel dans les prochains mois et années. Sur ce sujet, une vidéo d'un chercheur de OpenAI :

4. Faire implémenter

Depuis le mode Plan, l'agent propose d'implémenter. On peut aussi copier le plan et ouvrir un nouveau chat en mode Agent.

Pensez à faire une sauvegarde du projet (git commit) avant de lancer l'implémentation. Cela permet de revenir en arrière en cas de problème et de comparer le code avant et après.

nothing to commit, working tree clean user@computer: ~/project $

Gardez un œil sur l'agent pendant qu'il travaille. Le cas échéant, interrompez-le dès que vous vous apercevez qu'il va dans une mauvaise direction. Expliquez-lui ce qui ne va pas, il continuera sa session en prenant en compte votre message.

Relancez de préférence une nouvelle session de l'agent avant d'exécuter un plan. D'abord pour éviter la contamination des informations entre tâches. Ensuite parce que l'agent IA devient parfois moins fiable lorsque sa fenêtre de contexte se remplit.

Astuce : pendant que l'agent travaille, mettez ce temps à profit pour discuter du plan suivant dans une autre session en parallèle. Toutefois, gardez un œil sur ce que fait votre agent.

5. Revue de code et corrections

Parfois ça fonctionne du premier coup — et c'est fun ! Mais il est impératif de vérifier la qualité du code produit. Les agents sont têtus sur certains choix. Ils ont tendance à dupliquer paresseusement et à complexifier le code plutôt qu'à refactoriser, quand bien même ils en seraient parfaitement capables.

Passez en revue le code généré. Ne laissez rien passer. N'acceptez pas un code qui serait moins bon que ce que vous auriez écrit vous-même.

Si vous ne comprenez pas le code généré : si vous vous êtes aventuré loin de votre zone de confort, c'est peut-être le moment d'apprendre ? La responsabilité du développeur reste entière : de même que le conducteur d'un véhicule est toujours responsable — en cas d'accident, le comportement de la voiture n'est pas une bonne excuse.

Lorsque vous modifiez à la main le résultat du travail de l'agent sans prendre la peine de lui expliquer pourquoi, considérez que la session de l'agent devient inutilisable et démarrez-en une neuve. Autrement il restera sur ses idées initiales.

Sécurité et conclusion

Rappelez-vous que nous avons désactivé des protections à l'étape de configuration : l'agent peut exécuter des commandes potentiellement dangereuses dans le terminal.

Le système de gestion de versions est un filet de sécurité, mais gardez à l'esprit que l'agent sait aussi l'utiliser.

Méfiez-vous des prompts malintentionnés. Ne lancez jamais votre agent sur un projet inconnu. Et soyez vigilant à chaque fois que vous lui demandez de rechercher des informations sur Internet.

Les principes vus dans ce tutoriel : discuter avant de produire, découpler la conception d'un plan de son implémentation, sont généraux. Vous trouverez qu'ils s'appliquent aussi en dehors de la programmation.

Pour ceux qui seraient intéressés, j'ai créé AlignFirst sous la forme d'un skill open source (github.com/paleo/alignfirst). Le but est de faire écrire le code tel que nous l'aurions écrit. Sans magie ni fioritures, juste l'essentiel. Ce qui est particulièrement adapté aux développeurs qui aiment le code bien écrit.

Il existe un autre axe qui augmente considérablement la qualité du travail de l'agent, c'est la documentation interne du projet. Cela devra faire l'objet d'un prochain tutoriel.

Happy Vibe Coding !

Mise à jour du 14 août 2025 — Ajout de GPT-5. La section sur les spécifications techniques a été enrichie. La partie « Documenter le projet » a été complètement réécrite.

Mise à jour du 20 septembre — Mise à jour des prompts.

Mise à jour du 30 septembre — Suppression du prompt de refactoring automatique.

Mise à jour du 8 décembre — Modification des étapes, pour mettre l'accent sur les spécifications plus que le(s) plan(s).

Mise à jour du 18 février 2026 — Réécriture complète du tutoriel. La documentation technique est sortie du tutoriel car elle est un sujet à part entière. Le tutoriel est recentré sur la production de code.

Mise à jour du 7 mars — AlignFirst v3 utilise npx skills. Les lecteurs qui auraient appliqué une ancienne version du tutoriel sont invités à suivre la procédure décrite ici.

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Connectez-vous (déjà inscrit)

Oubli de mot de passe ? Pas de panique, on va le retrouver

Pas encore inscrit ? C'est très simple et gratuit.