Guide Complet du Vibe Coding : Configuration, Astuces et Techniques Avancées

Voici tout ce que vous devez savoir sur le vibe coding, une approche moderne de la programmation assistée par l’IA.

Choisir le Bon Outil pour le Vibe Coding

Plusieurs options s’offrent à vous pour commencer avec le vibe coding :

Éditeurs de Code Spécialisés

Windsurf : C’est mon outil principal actuellement. Windsurf est un éditeur de code qui est en fait un fork de VS Code, l’éditeur de code le plus populaire au monde. Si vous utilisez déjà VS Code, Windsurf sera une extension naturelle de votre environnement actuel.
Cursor : Un autre excellent outil pour le vibe coding que j’utilise fréquemment.

Klein : Si vous préférez rester sur VS Code, vous pouvez utiliser cette extension. J’en ai entendu beaucoup de bien, même si je ne l’ai pas testée en profondeur.

Solutions en Ligne

Replit : Un éditeur de code entièrement en ligne. L’avantage de Replit est que vous pouvez déployer vos applications très facilement puisque tout est déjà dans le cloud.

Fonctionnalités Canvas des IA

La méthode la plus simple pour débuter est d’utiliser la fonctionnalité Canvas de votre IA préférée :

Claude : Vous pouvez simplement taper ce que vous voulez, par exemple : « Écris du code 3JS pour la forme 3D rotative la plus impressionnante que tu puisses créer ». Une fois terminé, vous pouvez l’ouvrir dans Canvas et l’exécuter directement depuis votre navigateur.

ChatGPT et Google proposent également des fonctionnalités Canvas similaires.

Ces solutions ont des limitations – vous ne pouvez généralement exécuter que du HTML et du JavaScript – mais comme JavaScript est le langage de programmation le plus populaire au monde, vous pouvez accomplir beaucoup de choses directement dans votre navigateur.

Pour des projets plus complexes, je recommande toujours l’un des outils mentionnés précédemment (Windsurf, Cursor, etc.). Ces outils sont des agents qui peuvent itérer sur le code, contrairement aux simples assistants comme Claude ou ChatGPT.

Focus sur Windsurf

Windsurf (sponsor de cette vidéo) offre plusieurs fonctionnalités intéressantes :

Possibilité de basculer entre les modes chat, écriture et legacy

Plusieurs options de modèles (Claude 3.7, Claude 3.7 Thinking, Claude 3.5, modèles OpenAI)
Fonctionnalités de complétion avec Tab (Tab to jump, Tab to import)
Aperçu du navigateur intégré

Possibilité d’intégrer des URLs vers des documentations de bibliothèques ou d’API

Vous pouvez télécharger Windsurf sur wind.surf/matthew pour commencer immédiatement.

Choisir le Langage de Programmation

Quel langage de programmation choisir, surtout si vous n’avez aucune expérience ? Une règle simple : choisissez le langage le plus populaire. Pourquoi ? Parce que l’IA a été entraînée sur davantage d’exemples de code dans ces langages et peut donc écrire de meilleur code.

JavaScript : Le langage de programmation le plus populaire au monde. Excellent choix pour le vibe coding.
Python : Le langage de facto de l’intelligence artificielle. Très bon choix également.

Personnellement, j’utilise généralement Python pour le backend et HTML/JavaScript pour le frontend. Vous pouvez aussi utiliser JavaScript pour le backend avec NodeJS.

Vous pouvez consulter le graphique GitHut 2.0 (lien dans la description) qui montre les langages de programmation les plus populaires : Python, Java, JavaScript, C++, TypeScript, etc.

Élaborer un Plan Détaillé

Avant de commencer à coder, il est crucial de développer un plan détaillé. Investissez du temps dans cette étape ! Vous voulez un plan complet que vous pourrez transmettre à l’IA pour qu’elle sache exactement ce que vous souhaitez construire.

L’IA peut vous aider à élaborer ce plan. Voici un exemple d’approche avec Grok :

Demandez à Grok d’écrire un plan détaillé pour votre application
Répondez aux questions qu’il pose pour affiner le plan
Demandez-lui de formater le plan sous forme de PRD (Product Requirements Document) en format Markdown

Demandez-lui de créer une liste de tâches étape par étape

Je ne peux pas assez insister sur l’importance de cette étape. Pensez à toutes les fonctionnalités possibles, à tous les cas limites, à toutes les permutations que vous pouvez imaginer. Les détails que vous omettez maintenant deviendront des problèmes plus tard, et il est toujours plus difficile d’apporter des modifications ultérieurement.

L’avantage d’avoir un plan et une liste de tâches est que vous pouvez toujours demander à l’IA de s’y référer pour rester sur la bonne voie. Au fur et à mesure que vous avancez dans votre projet, vous pouvez revenir en arrière et mettre à jour votre plan si nécessaire.

Contrôle de Version avec Git

Le contrôle de version est absolument crucial pour le vibe coding. Il vous permettra de sauvegarder votre code à différentes étapes de développement et de revenir à des versions précédentes si nécessaire.

Git est le logiciel de contrôle de version standard que pratiquement tout le monde utilise. Il vous permet de sauvegarder votre code à différents moments et offre de nombreuses fonctionnalités avancées.

Bien que Git puisse sembler complexe, votre assistant IA peut vous aider à écrire les commandes Git nécessaires. Vous n’avez pas besoin de comprendre parfaitement son fonctionnement. Apprenez simplement la terminologie de base comme commit, revert, logs, etc.

Voici comment installer Git avec l’aide de votre agent IA :

Demandez simplement « Installe Git »
L’IA vérifiera s’il est déjà installé

Puis demandez « Ajoute Git à ce projet »
L’IA exécutera git init et créera un fichier .gitignore

Git stocke tout sur votre machine locale, mais pour plus de sécurité, utilisez GitHub pour stocker votre code dans le cloud. C’est gratuit, inscrivez-vous sur GitHub et demandez à l’IA de vous aider à configurer le tout.

Définir des Règles pour l’IA

Les outils de vibe coding comme Cursor, Windsurf et Klein prennent en charge des « règles » qui permettent à votre agent IA de coder selon vos préférences. C’est comme écrire un prompt système pour votre LLM – ces règles seront incluses dans chaque prompt envoyé à l’IA.

Dans Windsurf, vous trouverez les règles dans Paramètres > Memories and Rules > Manage. Vous pouvez définir des règles globales (pour tous les projets) et des règles d’espace de travail (spécifiques à un projet).

Voici quelques exemples de mes règles globales :

Après avoir effectué des modifications, toujours démarrer un nouveau serveur pour que je puisse tester
Toujours examiner le code existant et voir s’il peut être modifié avant d’écrire du nouveau code
Ne pas changer radicalement les modèles avant d’essayer d’itérer sur les modèles existants

Toujours préférer des solutions simples
Éviter la duplication de code
Écrire du code qui prend en compte les différents environnements (dev, test, prod)

Éviter d’écrire des scripts dans des fichiers si possible
Garder les fichiers courts (200-300 lignes de code maximum)

Vous pouvez trouver d’autres règles utiles dans le dépôt GitHub « awesome-cursor-rules », qui contient des règles spécifiques à différents langages de programmation et frameworks.

Workflow du Vibe Coding

Voici le workflow général que je recommande pour le vibe coding :

Sauvegardez votre plan de projet et votre liste de tâches (par exemple, dans des fichiers prd.md et todo.md)
Demandez à votre assistant IA de lire votre plan et votre liste de tâches

Développez une fonctionnalité à la fois
Écrivez des tests pour chaque nouvelle fonctionnalité
Exécutez ces tests pour vérifier que la fonctionnalité fonctionne comme prévu

Exécutez tous les tests pour vous assurer que tout le code fonctionne
Si des tests échouent, corrigez le code ou mettez à jour les tests selon le cas
Commitez votre code avec Git

Répétez ce processus pour chaque fonctionnalité

Si votre code atteint un état irrécupérable (ce qui arrive parfois avec l’IA), revenez à un commit précédent pour retrouver un état stable.

Astuces Supplémentaires

Mode Chat vs Mode Écriture

En mode écriture, l’IA écrira du code pour vous. En mode chat, vous pouvez simplement poser des questions tout en donnant à l’IA le contexte de votre base de code.

J’ai trouvé que Claude est le meilleur codeur. Beaucoup disent que Claude 3.5 est encore le meilleur, mais j’aime vraiment Claude 3.7 Thinking.

Interfaces Utilisateur Attrayantes

L’IA n’est pas encore très douée pour coder des interfaces utilisateur magnifiques. La meilleure approche est de trouver un template gratuit en ligne avec tous les designs déjà créés, de le télécharger dans votre dossier, d’en informer l’IA et de lui demander d’utiliser les composants de cette bibliothèque.

Spécifier des Parties du Code

Vous pouvez donner à votre agent des parties spécifiques du code que vous souhaitez mettre à jour ou corriger en utilisant @ pour ajouter des fichiers, répertoires, documents, contexte et liens web.

Bibliothèques pour les Jeux

Pour le vibe coding de jeux, beaucoup utilisent la bibliothèque Three.js, une bibliothèque JavaScript 3D. La plupart des IA savent déjà comment l’utiliser. Demandez simplement « Construis-moi un jeu X en utilisant Three.js ».

Sécurité et Maintenabilité

Les programmeurs traditionnels critiquent souvent le vibe coding, affirmant que le code n’est pas maintenable et qu’il est vulnérable aux problèmes de sécurité. Voici comment améliorer ces aspects :

Sécurité

Limitez le taux de toutes les API endpoints

Utilisez la sécurité au niveau des lignes
Utilisez des captchas sur toutes les routes d’authentification et pages d’inscription
Ne partagez jamais vos clés API publiquement

N’enregistrez jamais vos clés dans Git (utilisez .gitignore)
N’implémentez pas votre propre authentification (utilisez des services comme Clerk)
Configurez des limitations de taux basées sur IP et utilisateur

Mettez en place une protection contre les attaques DoS
Utilisez des pare-feu, de la surveillance et des analyses

Maintenabilité

Oui, le code généré par l’IA n’est pas toujours élégant, mais c’est le pire qu’il sera jamais – il ne peut que s’améliorer. Vous pouvez demander à l’IA de refactoriser votre code pour le rendre plus concis, plus modulaire et suivre les meilleures pratiques.

Vous pouvez également demander à l’IA d’effectuer un audit de sécurité en examinant tout votre code et en identifiant les vulnérabilités potentielles.

Serveurs MCP

Les serveurs MCP (Multi-agent Collaboration Protocol) sont un moyen de donner à vos agents des outils supplémentaires. Vous pouvez configurer un serveur MCP dans Windsurf pour ajouter des fonctionnalités intéressantes.

Par exemple :

Unity MCP : Permet à votre agent IA d’accéder directement à Unity pour le vibe coding dans cet environnement
Firecrawl MCP : Permet à votre agent d’effectuer des recherches approfondies sur le web

Les outils MCP sont une fonctionnalité plus avancée, mais ils valent la peine d’être explorés une fois que vous êtes à l’aise avec le vibe coding.

Conclusion

J’espère que vous avez beaucoup appris sur le vibe coding. Je vous encourage à l’essayer, que vous soyez un programmeur expérimenté à la recherche d’une approche amusante et relaxante, ou un débutant qui cherche à s’initier à la programmation. C’est un excellent moyen de s’exposer à tous ces concepts et de commencer votre parcours d’apprentissage.

Si vous avez apprécié ce guide, n’hésitez pas à laisser un like et à vous abonner pour plus de contenu similaire.