Vous pouvez devenir le patron de vos tâches et augmenter votre productivité en apprenant à tirer parti des outils d’IA qui sortent quotidiennement des laboratoires de recherche. VS Code intègre l’extension ChatGPT pour vous offrir un environnement de codage compatible avec l’OpenAI.
Vous pouvez exploiter le vaste modèle de codage de ChatGPT pour terminer vos projets plus efficacement et plus rapidement, directement dans l’IDE. Voici comment vous pouvez utiliser ChatGPT avec VS Code.
Comment installer et utiliser l’extension ChatGPT dans VS Code
Lorsque vous recherchez « ChatGPT » ou « Code GPT » dans la place de marché des extensions de VS Code, de nombreuses extensions apparentées apparaissent. Contrairement à GitHub Copilot, ces extensions ne proviennent pas officiellement d’OpenAI.
La plupart des extensions VS Code ChatGPT échantillonnées fonctionnent de la même manière. Mais nous nous en tiendrons à l’extension ChatGPT d’EasyCode pour cet article, car elle est assez décente pour démontrer les cas d’utilisation de ChatGPT dans VS Code. Elle supporte GPT-4 et GPT-3.5, a un niveau gratuit, et ne nécessite pas de clé API.
Pour installer l’extension ChatGPT dans VS Code :
- Ouvrez VS Code et cliquez sur l’icône des paramètres en bas à gauche de la barre latérale.
- Aller à Extensions.
- Vous pouvez également appuyer sur Ctrl + Shift + X (Commande + Maj + X pour Mac) pour ouvrir directement la place de marché des extensions.
- Tapez « ChatGPT – EasyCode » dans la barre de recherche en haut à gauche.
- Cliquez sur l’extension lorsqu’elle apparaît.
- Enfin, cliquez sur Installer.
- Vous verrez l’icône de l’extension dans la barre latérale gauche une fois installée.
- Cliquez sur l’icône de l’extension. Cliquez sur Essayer sans compte. Mais n’hésitez pas à Se connecter si vous avez un compte ou S’inscrire pour un nouveau compte auprès du fournisseur de l’extension.
Comment utiliser l’extension ChatGPT
- Pour utiliser une invite intégrée, mettez le code cible en surbrillance et cliquez dessus avec le bouton droit de la souris. Sélectionnez l’une des invites disponibles.
- Pour écrire une invite personnalisée, cliquez avec le bouton droit de la souris sur le code surligné et sélectionnez Demander à GPT. Tapez votre message dans la boîte de dialogue en haut et appuyez sur Entrer.
Comment utiliser l’extension ChatGPT avec votre base de code
Si vous avez ouvert VS Code à votre répertoire de base de code et que vous voulez que ChatGPT accède aux modules sous-jacents :
- Cliquez sur l’icône de l’extension dans la barre latérale gauche. Cochez ensuite la case Base de données Ask boîte.
- Copiez le code cible et collez-le dans la boîte de dialogue.
- Tapez votre message sous le code (appuyez sur Maj + Entrée) dans la boîte de dialogue.
- Appuyer sur Entrer ou cliquez sur l’icône d’envoi.
Voyons maintenant les différentes façons d’utiliser ChatGPT dans VS Code.
1. Refonte et modification du code
ChatGPT s’est avéré utile pour modifier le code procédural, fonctionnel et orienté objet.
Par exemple, en utilisant cette extension, nous avons demandé à ChatGPT de refactoriser le code défectueux ci-dessous, une fonction Python pour créer un dictionnaire arbitraire et ajouter « Buy » à chaque valeur.
def makeDict(n: str, **kwargs)->dict:
some : dict
for key, value in kwargs.items():
some = n+" "+value
return some
newDict = makeDict("Buy", item1="GPT Book", item2="Java Tutorial", item3="Hiking Guide")
Il a très bien réussi à produire le code correct qui donne la sortie attendue, avec des raisons détaillées pour la modification :
De plus, vous pouvez utiliser la fonction Demander un suivi boîte pour dire à ChtGPT de convertir le code en une classe et de montrer comment l’instancier :
Le code généré ci-dessus est plus modulaire et réutilisable.
2. Déboguer votre code
Si votre code génère une erreur ou ne fonctionne pas comme il le devrait, demander à ChatGPT de le déboguer directement dans VS Code permet de gagner du temps.
Bien qu’il n’y ait pas d’invite intégrée pour le débogage, vous pouvez utiliser la commande Demander à GPT pour créer une invite personnalisée afin de déboguer votre code.
Nous avons demandé à l’extension ChatGPT de déboguer le code que nous avons utilisé plus tôt. Non seulement il a débogué, mais il l’a expliqué et a généré le bon code, y compris la sortie attendue. Il l’a expliqué et a généré le bon code, y compris la sortie attendue.
3. Ecrire votre code dans un autre langage
Il se peut que vous souhaitiez écrire un programme dans un autre langage que celui de base. Vous pouvez écrire votre code dans votre langage de base et demander à ChatGPT de le réécrire dans le langage de programmation choisi.
Cependant, le code généré peut nécessiter peu d’intervention humaine, car ChatGPT peut ne pas fournir un code converti entièrement fonctionnel dans certains cas.
Par exemple, nous avons converti le code Python suivant en son équivalent C en utilisant l’extension VS Code ChatGPT :
Vous pouvez y parvenir en cliquant avec le bouton droit de la souris sur le code surligné et en sélectionnant la commande Demander GPT option.
Voici notre invite dans VS Code :
Bien qu’il ait généré l’équivalent en C deux fois avant d’y parvenir, le code final fonctionne.
4. Générer un composant frontal pour votre API
Si vous avez écrit une API avec différents points de terminaison, vous pouvez demander à l’extension ChatGPT de fournir un composant frontal pour la consommer à l’aide d’un framework particulier. Il peut s’agir de React, Vue ou Angular.
Par exemple, nous avons utilisé l’extension pour générer un composant React afin de créer un calendrier de réunions basé sur un point de terminaison d’API créé à l’aide de FastAPI de Python :
Comme nous l’avons fait plus haut, vous pouvez vérifier l’option Base de données Ask La boîte de dialogue « Codebase » est une boîte de dialogue pour les personnes qui ont affaire à une base de code importante.
Après avoir référencé notre base de code, l’extension VS Code ChatGPT a fourni un composant React pratique pour utiliser le point de terminaison fourni :
5. Expliquer les blocs de code
Supposons que vous ayez saisi un morceau de code sur Stack Overflow ou sur un dépôt GitHub. Vous pouvez demander à l’extension ChatGPT de VS Code d’expliquer son fonctionnement pour une meilleure compréhension. Cela vous aidera à déboguer facilement un tel code si des bugs surviennent suite à des modifications futures du code.
Dans cet exemple de cas d’utilisation, nous avons demandé à l’extension ChatGPT d’expliquer le code suivant ; une classe Python pour vérifier les adresses email des utilisateurs.
Il a généré la réponse suivante :
6. Générer des modèles HTML pour votre application
En utilisant l’extension ChatGPT dans VS Code, vous pouvez créer un modèle HTML (comme des champs de saisie) à partir de zéro, en utilisant directement la boîte de dialogue de l’extension. Par exemple, vous pouvez lui demander de créer un modèle HTML pour l’enregistrement d’un utilisateur.
Mais qu’en est-il si vous écrivez une application qui rend les données en HTML directement (une application qui n’est pas une ASP) et que vous voulez un modèle spécifique au projet ? Vous pouvez utiliser l’extension ChatGPT dans VS Code pour créer des modèles HTML qui affichent les données du backend aux utilisateurs.
Par exemple, si vous utilisez un framework basé sur une architecture MVT comme Django, vous pouvez utiliser l’extension pour créer des modèles HTML pour vos vues Django.
Encore une fois, pour ce type de cas d’utilisation, vous pouvez cliquer sur le bouton Ask Codebase case à cocher pour que ChatGPT puisse accéder à votre base de code.
7. Testez votre code à l’unité
Aussi essentiels que soient les tests unitaires, ils peuvent être chronophages. Vous pouvez tirer parti de l’extension VS Code ChatGPT pour générer des tests unitaires pour votre code et gagner un temps précieux en matière de développement.
Bien que l’extension ChatGPT dispose d’une invite intégrée pour générer des tests unitaires, vous pouvez écrire une invite personnalisée à l’aide de la commande Ask Codebase option pour la spécificité et un meilleur résultat.
Nous avons demandé à ChatGPT d’écrire un test unitaire pour un endpoint d’enregistrement créé à l’aide de l’interface FastAPI de Python :
Il a échantillonné la base de code de manière efficace pour générer le test unitaire requis :
8. Trouver des vulnérabilités de sécurité potentielles
Bien qu’elle ne fournisse pas une analyse de sécurité détaillée, l’extension VS Code ChatGPT peut être un outil pratique pour vérifier rapidement les vulnérabilités de sécurité dans la base de code de votre application et vous faire gagner du temps lors d’une analyse manuelle.
Pour permettre à ChatGPT d’analyser votre base de code, utilisez l’option Demander la base de code (cliquez sur l’icône de l’extension et cochez l’option Ask Codebase box).
9. Poser des questions sur le code VS
Si vous avez l’habitude de jouer avec les anciennes ou nouvelles fonctionnalités de VS Code, n’hésitez pas à poser vos questions sur l’IDE à partir de l’extension ChatGPT.
Par exemple, vous pouvez demander à l’extension de vous recommander les meilleures extensions pour le débogage d’un langage de programmation particulier.
Vous pouvez également lui poser une question plus technique, par exemple comment ouvrir VS Code à partir de la ligne de commande.
10. Ecrire de la documentation directement à partir du code VS
L’extension ChatGPT permet de rédiger facilement une documentation détaillée pour un morceau de code directement à partir de VS Code.
Par exemple, voici une documentation détaillée d’une fonction de création de lien Zoom (au format HTML) que nous avons générée en utilisant l’extension VS Code ChatGPT :
Coder efficacement avec ChatGPT dans VS Code
En tant que programmeur dans un environnement Internet en constante évolution, vous souhaitez obtenir un produit minimum viable en un minimum de temps. Bien que ChatGPT ne soit pas totalement fiable, il peut vous aider dans votre développement s’il est utilisé de manière créative. Et il existe de nombreux autres cas d’utilisation de ChatGPT en programmation. Cela dit, veillez à valider les résultats de ChatGPT, car ils peuvent parfois être trompeurs.