Mieux utiliser les IA dans VS Code avec les fichiers d'invite

Pourquoi les fichiers d'invite sont importants

À 0:00, Tim déclare : "L'utilisation d'un fichier d'invite avec une IA peut faire passer l'expérience de juste correcte à excellente." Un fichier d'invite indique au modèle d'IA comment penser, comment procéder et comment répondre à une invite de l'utilisateur. Tim fait le lien avec le fichier "Beast Mode" de Burke Holland de Microsoft, une grande invite système qui agit comme un modèle. Grâce à cette traduction, les développeurs peuvent réduire le nombre d'instructions répétitives et d'erreurs, et obtenir un code généré plus prévisible dans VS Code.

Tim considère qu'il s'agit d'une sorte d'ingénierie de l'invite : vous construisez un ensemble d'instructions réutilisables de sorte que lorsque vous tapez plus tard une invite rapide dans la vue de chat ou l'icône AI Toolkit dans la barre d'activité, l'IA connaît déjà votre style de codage et la structure de projet que vous préférez.

Ressources de Tim pour les développeurs

Avant de présenter l'outil, Tim (0:27) récapitule les ressources gratuites et payantes qu'il propose - neuf cours complets, un dixième sur iamtimcorey.com, ainsi qu'un podcast répondant aux questions des développeurs. Il souligne que ces outils sont destinés à aider les développeurs à affiner leurs compétences et à créer de meilleurs flux de travail. Cela explique pourquoi un fichier d'invite VS Code AI est important : il fait partie des pratiques modernes permettant d'améliorer les tâches de codage quotidiennes.

Mise en place du Beast Mode dans VS Code

À 1:22, Tim passe à la section des outils de VS Code. Il a déjà installé le Beast Mode et l'a sélectionné sous "configure modes" Il explique que vous pouvez ouvrir la vue AI Toolkit, parcourir les modèles du catalogue de modèles et créer un nouveau mode personnalisé. Dans cet exemple, vous pourriez cliquer sur Sélectionner une invite, lui donner un nom comme "GitHub Chat Modes", et coller le contenu du fichier (1:34). Il stocke votre invite système personnalisée afin qu'elle soit toujours prête dans votre espace de travail.

L'installation de Tim montre comment les modèles locaux ou les modèles en nuage peuvent être combinés avec vos propres instructions de construction de prompteurs. Le tout est soigneusement rangé dans le dossier racine de votre VS Code ou dans un autre dossier stocké, ce qui permet de le répéter facilement par la suite.

Utilisation de l'IA dans un projet réel

À partir de 2:03, Tim fait une démonstration de l'IA sur son projet de site web hébergé dans son espace de travail VS Code. Il ouvre le code de la section "Learning Paths" - essentiellement un site soutenu par Python/React - et montre le menu de navigation de l'application. Il souhaite modifier l'icône de la flèche pour ajouter une petite animation au survol (3:21).

Il s'agit d'un scénario de développeur typique : vous avez du code frontal, vous aimeriez qu'un agent d'intelligence artificielle génère le CSS pour vous, et vous ne voulez pas écrire chaque détail à la main. Avec un fichier d'invite déjà chargé, l'invite de l'utilisateur peut être courte et l'IA se chargera du contexte.

Préparation de l'invite AI

À 3:38, Tim utilise l'outil de découpe de Windows (Windows+Shift+S) pour effectuer une capture d'écran montrant la flèche (3:45). Ce contexte visuel aide l'IA. Il tape ensuite une invite naturelle à 4:43 :

Dans mon menu de navigation, sous la section parcours d'apprentissage, faites pivoter la flèche de 30° à l'horizontale lorsque vous passez la souris dessus, puis revenez à l'horizontale lorsque vous passez la souris. Voici une capture d'écran de ce à quoi cela ressemble actuellement"

Tim note qu'il pourrait ultérieurement préciser l'endroit exact où placer le CSS, mais il commence par l'invite suivante pour tester la fonctionnalité de Beast Mode.

Le plan de Beast Mode

À 6:00, Tim explique que Beast Mode décrit un flux de travail : identifier le bon sélecteur, ajouter une classe CSS, ajouter un effet de survol, puis tester et vérifier. Elle place même le CSS dans le bon fichier site.css au-dessus de la racine (6:42). Cet exemple montre comment un schéma prédéfini dans votre fichier d'invite - vos "règles" concernant l'emplacement des styles - guide la réponse de l'IA.

Selon Tim, c'est là l'avantage principal de l'utilisation d'un fichier d'invite : il ajoute un contexte, permettant à l'IA de fonctionner comme si elle connaissait la structure de votre projet sans que vous ayez à répéter la description complète à chaque fois.

Itérer et affiner

Lorsque Tim vérifie le site à 6:54, le code généré n'affecte qu'une seule flèche et dans la mauvaise direction. Il affine ensuite l'invite à 7:29 pour inverser l'effet de survol et l'appliquer à toutes les flèches.

À 8:49, il remarque que toutes les flèches tournent maintenant en même temps. Il envoie donc une autre invite à l'utilisateur à 9:06 pour demander à l'IA de n'appliquer l'effet qu'à l'élément survolé. Tim fait remarquer à 9:38 : "Vous devez modifier une IA. Il ne fait pas toujours ce qu'il faut"

Il s'agit là d'un excellent exemple d'ingénierie rapide dans le cadre d'un chat. Vous modifiez, répétez et enregistrez vos invites jusqu'à ce que l'IA produise le résultat structuré que vous souhaitez. Étant donné que le fichier d'invite fournit déjà l'invite du système, chaque nouvelle instruction n'est qu'une petite amélioration.

Résultat final

À 9:52, Tim confirme que l'animation fonctionne désormais par flèche : rotation au survol, réinitialisation à la fermeture de la souris. Il note que vous pouvez passer au thème clair ou au thème foncé, changer les couleurs, ralentir la transition, tout ce que vous voulez (10:02). L'essentiel est que l'IA a compris la transformation SVG et a écrit le CSS pour lui (10:11).

Tim explique à 10:30-11:20 que vous pouvez étendre Beast Mode ou créer votre propre fichier de construction d'invite pour définir comment vous disposez les fichiers, comment vous voulez que le formatage du code soit géré, ou comment appeler une fonction Python. Ainsi, vos questions quotidiennes peuvent être beaucoup plus courtes et donner lieu à des réponses cohérentes.

Examen des résultats de l'IA

À 11:50, Tim conseille de toujours revoir les modifications apportées par l'IA. Même avec un fichier d'invite protégé et de bonnes pratiques, il est possible qu'une IA ajoute une classe au mauvais endroit ou brise les dépendances requises. Dans son exemple, l'IA n'a apporté que de petites modifications judicieuses - en ajoutant une classe CSS ici, une ligne de code là - mais les développeurs doivent tout de même vérifier le journal des modifications et l'affiner si nécessaire.

Tim conclut en indiquant qu'une fois que vous avez obtenu un résultat qui vous plaît, vous pouvez l'enregistrer et le réutiliser. C'est l'essence même de l'utilisation de modèles d'IA et de fichiers d'invite dans VS Code : un flux de travail répétable et cohérent qui transforme les invites ad hoc en une expérience fiable de type SDK.

Takeaways from Tim Corey's Demo (en anglais)

En suivant les instructions de Tim Corey dans la vidéo, on voit comment un fichier d'invite bien conçu à l'intérieur de Visual Studio Code peut.. :

• Fournissez un contexte cohérent aux modèles d'IA afin que vos messages-guides soient plus courts.

• Gérer automatiquement le code généré, la sortie structurée et le formatage.

• L'intégration dans votre espace de travail, votre barre d'activité et votre boîte à outils AI vous permet d'ouvrir, de tester et d'affiner facilement les invites.

• Ils vous permettent de parcourir les modèles, de basculer entre les modèles locaux et le nuage, et d'appliquer vos règles d'ingénierie rapide de manière transparente.

En stockant vos règles dans un fichier d'invite, vous donnez à l'IA un script d'agent fiable à suivre, ce qui vous permet de vous concentrer sur des tâches de développement de plus haut niveau au lieu de répéter les mêmes instructions.