Tutoriel : comment coder comme un pro grâce à l'IA dans VS Code

Et comment appréhender les outils d'IA pour améliorer votre productivité. Cliquez sur le titre des sections pour naviguer

Introduction

Dans ce tutoriel, nous allons explorer comment utiliser l'intelligence artificielle, en particulier GitHub Copilot (ici abrégé en GH.C), dans Visual Studio Code pour améliorer votre flux de travail de développement.

Ce que permet GitHub Copilot

GH.C vous permet d'automatiser les changements dynamiques des balises HTML. En effet, il n'est pas rare de modifier une liste UL en liste OL tout en oubliant de modifier la balise de fermeture.GHC s'en occupe pour vous. De même, il peut carrément vous écrire du texte à l'intérieur des balises et également corriger vos fautes d'orthographes. Également, il va scanner l'intégralité de votre code HTML et remplacer le mot "GH.C" par "GHC" si j'enlève le point.

Installation de l'extension d'IA

Pour commencer, vous devez installer une extension d'IA compatible avec VS Code. Voici les étapes à suivre :

  • Ouvrez Visual Studio Code.
  • Naviguer en bas à droite pour ouvrir GH.C (le logo du bonhomme avec un casque)
  • Suivez les instructions pour vous connecter à votre compte GitHub et activer l'extension.
  • Une fois cela fait, revenez dans Visual Studio Code.

Utilisation de l'IA pour coder

Une fois l'extension d'IA installée, vous pouvez commencer à l'utiliser pour générer du code. Voici comment :

  • Créer un fichier index.html dans Visual Studio Code.
  • Utiliser la commande CTRL + I pour ouvrir le menu de GitHub Copilot.
  • Décrivez en détail ce que vous voulez obtenir comme page web.
  • Ne pas hésiter à décrire cela en utilisant des points par exemple :
  1. Un en-tête avec le titre de la page, par exemple "Boulangerie du Métro".
  2. Un menu de navigation (si besoin).
  3. Un carrousel de photo ou des visuels d'articles.
  4. Une section de présentation de la boulangerie.
  5. Un footer.

Des exemples

Voici un exemple de suggestion de texte fait par GH.C.

Exemple de suggestion

Les suggestions apparaissent en vert dans VS Code.

Exemple de suggestion

Je lui ai demandé de changer la border-radius de 15px à 10px et il m'a refait un bloc au lieu de changer dans celui qui existe déjà.

Apport externe de la classe

En discutant avec plusieurs camarades ayant également utilisé GH.C, nous avons constaté que GH.C est assez limité dès qu'il s'agit de faire des choses qui sortent du cadre basique.

Conclusion

En utilisant l'IA dans VS Code, vous pouvez considérablement améliorer votre productivité et la qualité de votre code. N'hésitez pas à explorer d'autres fonctionnalités offertes par les extensions d'IA pour optimiser encore davantage votre flux de travail.

La fonctionnalité qui me plaît le plus est la correction des fautes d'orthographes ainsi que le changement automatique de la balise de fermeture lorsque je change la balise d'ouverture.