Faites passer votre productivité de codage au niveau supérieur en intégrant ChatGPT à VS Code.

Vous pouvez être le patron de vos tâches et augmenter votre productivité lorsque vous apprenez à tirer parti des outils d'IA qui sortent quotidiennement des laboratoires de recherche. VS Code propose l'extension ChatGPT pour vous offrir un environnement de codage compatible OpenAI.

Vous pouvez tirer parti du vaste modèle de codage de ChatGPT pour mener à bien vos projets plus efficacement et plus rapidement, directement dans l'IDE. Voici des façons pratiques d'utiliser ChatGPT avec VS Code.

Comment installer et utiliser l'extension ChatGPT dans VS Code

Lorsque vous recherchez "ChatGPT" ou "Code GPT" sur le marché des extensions VS Code, de nombreuses extensions associées apparaissent. Contrairement à GitHub Copilot, ceux-ci ne proviennent pas officiellement directement d'OpenAI.

Cependant, la plupart des extensions VS Code ChatGPT échantillonnées fonctionnent de la même manière. Mais nous nous en tiendrons

instagram viewer
Extension ChatGPT d'EasyCode pour cet article, car il est assez décent pour démontrer les cas d'utilisation de ChatGPT dans VS Code. Il prend en charge GPT-4 et GPT-3.5, dispose d'un niveau gratuit et ne nécessite pas de clé API.

Pour installer l'extension ChatGPT dans VS Code :

  1. Ouvrez VS Code et cliquez sur l'icône des paramètres en bas à gauche de la barre latérale gauche.
  2. Aller à Rallonges.
  3. Sinon, appuyez sur Ctrl + Maj + X (Commande + Maj + X pour Mac) pour ouvrir directement le marché des extensions.
  4. Tapez "ChatGPT - EasyCode" dans la barre de recherche en haut à gauche.
  5. Cliquez sur l'extension lorsqu'elle est visible.
  6. Enfin, cliquez Installer.
  7. Vous verrez l'icône de l'extension dans la barre latérale gauche une fois installée.
  8. Cliquez sur l'icône d'extension. Cliquez sur Essayez sans compte. Mais n'hésitez pas à S'identifier si vous avez un compte ou S'inscrire pour un nouveau compte avec le fournisseur d'extension.

Comment utiliser l'extension ChatGPT

  1. Pour utiliser une invite intégrée, mettez en surbrillance le code cible et cliquez dessus avec le bouton droit. Sélectionnez l'une des invites disponibles.
  2. Pour écrire une invite personnalisée, cliquez avec le bouton droit sur le code en surbrillance et sélectionnez Ask GPT. Tapez votre invite dans la boîte de discussion en haut et appuyez sur Entrer.

Comment utiliser l'extension ChatGPT avec votre base de code

Si vous avez ouvert VS Code dans votre répertoire de base de code et que vous souhaitez que ChatGPT accède aux modules sous-jacents :

  1. Cliquez sur l'icône d'extension dans la barre latérale gauche. Vérifiez ensuite le Demander à Codebase boîte.
  2. Copiez le code cible et collez-le dans la boîte de discussion.
  3. Tapez votre invite sous le code (appuyez sur Maj + Entrée) dans la boîte de discussion.
  4. Presse Entrer ou cliquez sur l'icône d'envoi.

Voyons maintenant les différentes manières d'utiliser ChatGPT dans VS Code.

1. Refactoriser et modifier le 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.

définitivementmakeDict(n: str, **kwargs)-> dicter :
 certains: dict
pour valeur clé dans kwargs.items() :
 certains = n+" "+valeur
retour quelques
newDict = makeDict("Acheter", élément1="Livre GPT", élément2="Tutoriel Java", élément3="Guide de randonnée")

Il a plutôt bien produit le code correct qui donne le résultat attendu, avec les raisons détaillées de la modification :

De plus, vous pouvez utiliser le Demander un suivi box pour indiquer à 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 se doit, 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 le Demander à GPT option pour créer une invite personnalisée pour déboguer votre code.

Nous avons demandé à l'extension ChatGPT de déboguer le code que nous avons utilisé précédemment. Non seulement il a débogué. Il l'a expliqué et a généré le bon, y compris sa sortie attendue.

3. Écrivez votre code dans une autre langue

Vous voudrez peut-être écrire un programme dans un langage particulier en plus de votre noyau. Vous pouvez écrire votre code dans votre langage principal 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 à l'aide de l'extension VS Code ChatGPT :

Vous pouvez y parvenir en cliquant avec le bouton droit sur le code en surbrillance et en sélectionnant le Demander à GPT option.

Voici notre invite dans VS Code :

Bien qu'il ait généré l'équivalent C deux fois avant de réussir, 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 l'utiliser à l'aide d'un framework particulier. Cela pourrait être React, Vue ou Angular.

Par exemple, nous avons utilisé l'extension pour générer un composant React pour créer un calendrier de réunion basé sur un point de terminaison API créé à l'aide de FastAPI de Python :

Comme indiqué ci-dessus, vous voudrez peut-être vérifier le Demander à Codebase case si vous avez affaire à une grande base de code.

Après avoir fait référence à 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 récupéré un morceau de code de Stack Overflow ou d'un référentiel GitHub. Vous pouvez demander à l'extension ChatGPT dans VS Code d'expliquer son fonctionnement pour une meilleure compréhension. Cela vous aide à déboguer facilement ce code si des bogues surviennent en raison de 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 e-mail des utilisateurs.

Il a généré la réponse suivante :

6. Générez des modèles HTML pour votre application

À l'aide de 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 discussion de l'extension. Par exemple, vous pouvez lui demander de créer un modèle HTML pour l'enregistrement des utilisateurs.

Mais que se passe-t-il si vous écrivez une application qui restitue directement les données en HTML (un non-SPA) et que vous souhaitez 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 principales aux utilisateurs.

Par exemple, si vous utilisez un Framework basé sur l'architecture MVT comme Django, vous pouvez utiliser l'extension pour forger des modèles HTML pour vos vues Django.

Encore une fois, pour ce type de cas d'utilisation, vous pouvez cliquer sur le bouton Demander à Codebase case à cocher pour que ChatGPT accède à votre base de code.

7. Testez unitairement votre code

Aussi essentiels que soient les tests unitaires, ils peuvent prendre beaucoup de temps. Vous pouvez tirer parti de l'extension VS Code ChatGPT pour générer des tests unitaires pour votre code et gagner un temps de développement précieux.

Bien que l'extension ChatGPT dispose d'une invite intégrée pour générer des tests unitaires, vous souhaiterez peut-être écrire une invite personnalisée à l'aide de l' Demander à Codebase option pour la spécificité et un meilleur résultat.

Nous avons demandé à ChatGPT d'écrire un test unitaire pour un point de terminaison d'enregistrement créé à l'aide de FastAPI de Python :

Il a échantillonné la base de code efficacement pour générer le test unitaire requis :

8. Trouver des vulnérabilités de sécurité potentielles

Bien qu'elle ne fournisse pas d'analyse de sécurité détaillée, l'extension VS Code ChatGPT peut être un outil pratique pour rapidement vérifier les vulnérabilités de sécurité dans votre application base de code et vous fait gagner du temps en scannant manuellement.

Pour permettre à ChatGPT d'analyser votre base de code, utilisez le Demander à Codebase option (cliquez sur l'icône de l'extension et cochez la case Demander à Codebase boîte).

Si vous jouez habituellement votre chemin autour de vieux ou nouvelles fonctionnalités du code VS, n'hésitez pas à demander votre chemin dans l'IDE à partir de l'extension ChatGPT.

Par exemple, vous pouvez demander à l'extension de recommander les meilleures extensions pour déboguer un langage de programmation particulier.

Ou vous pouvez lui poser une question plus technique, comme comment ouvrir VS Code à partir de la ligne de commande.

10. Écrire la documentation directement à partir du code VS

Vous pouvez facilement rédiger une documentation détaillée pour un morceau de code directement à partir de VS Code à l'aide de l'extension ChatGPT.

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 à l'aide de l'extension VS Code ChatGPT :

Coder efficacement avec ChatGPT dans VS Code

En tant que programmeur dans un Internet au rythme rapide, vous souhaitez obtenir un produit minimum viable en un minimum de temps. Bien que ChatGPT ne soit pas entièrement fiable, il peut faciliter votre parcours de développement s'il est utilisé de manière créative. Et il existe de nombreux autres cas d'utilisation de ChatGPT dans la programmation. Cependant, avec tout cela, assurez-vous de valider les résultats de ChatGPT, car ils peuvent parfois être trompeurs.