Automatisez les commentaires de code à l'aide de VS Code et Ollama

Écrit par Carlos Mucuho✏️

Les commentaires de code jouent un rôle essentiel dans le développement de logiciels. Ils :

• * Expliquez la logique complexe
  • Documenter les processus de prise de décision
  • Fournir un contexte aux futurs développeurs

Alors que certains soutiennent qu'un code bien écrit doit être explicite, d'autres soulignent l'importance des commentaires pour capturer le raisonnement derrière certaines implémentations. L’idée d’automatiser la génération de commentaires a suscité des discussions sur la question de savoir si l’IA peut réellement capturer la vision humaine qui rend les commentaires précieux.

Les assistants de codage basés sur l'IA comme GitHub Copilot continuent de gagner en popularité, mais la communauté est aux prises avec des questions sur la confidentialité des données et les risques de devenir dépendants de plateformes propriétaires. Malgré ces préoccupations, des outils comme Ollama offrent un moyen de bénéficier des capacités de l’IA tout en répondant aux préoccupations concernant la confidentialité des données et le verrouillage de la plateforme.

Ollama n'est pas un assistant de codage en soi, mais plutôt un outil qui permet aux développeurs d'exécuter de grands modèles de langage (LLM) pour améliorer la productivité sans partager vos données ni payer d'abonnements coûteux.

Dans ce tutoriel, vous apprendrez à créer une extension VS Code qui utilise Ollama pour automatiser la génération de commentaires. Ce projet démontrera comment utiliser un modèle LLM pour augmenter la productivité sans partager vos données ni payer des abonnements coûteux.

À la fin du didacticiel, vous disposerez d'une extension qui ressemble à celle-ci :

Pour suivre, vous aurez besoin de :

• Node.js et npm installés
• Une machine capable d'exécuter des LLM avec Ollama

Mise en place d'Ollama

Pour configurer Ollama, commencez par télécharger le programme d'installation approprié pour votre système d'exploitation depuis le site officiel d'Ollama :

• Pour installer Ollama sur Windows, téléchargez le fichier exécutable et exécutez-le. Ollama s'installera automatiquement et vous serez prêt à l'utiliser
• Pour Mac, après avoir téléchargé Ollama pour MacOS, décompressez le fichier et faites glisser le dossier Ollama.app dans votre dossier Applications. L'installation sera terminée une fois que vous aurez déplacé l'application

• Pour les utilisateurs Linux, installer Ollama est aussi simple que d'exécuter la commande suivante dans votre terminal :
  

  curl -fsSL https://ollama.com/install.sh | sh
  

Modèles à tirer et à faire fonctionner

Une fois l'installation d'Ollama terminée, vous pouvez commencer à interagir avec les LLM. Avant d'exécuter des commandes, vous devrez lancer Ollama en ouvrant l'application ou en exécutant la commande suivante dans le terminal :

curl -fsSL https://ollama.com/install.sh | sh

Cette commande démarre l'application Ollama, vous permettant d'utiliser les commandes disponibles. Il démarre également le serveur Ollama exécuté sur le port 11434. Vous pouvez vérifier si le serveur est en cours d'exécution en ouvrant une nouvelle fenêtre de navigateur et en accédant à http://localhost:11434/. Pour extraire un modèle du registre Ollama sans l'exécuter, utilisez le Commande ollama pull. Par exemple, pour extraire le modèle phi3.5, exécutez ce qui suit :

ollama serve

Cette commande récupère le modèle et le rend disponible pour une utilisation ultérieure. Vous pouvez lister tous les modèles qui ont été extraits à l'aide de la commande suivante :

ollama pull phi3.5

Cela affichera une liste de modèles ainsi que leur taille et l'heure de modification :

ollama list

Pour extraire et exécuter un modèle immédiatement, utilisez la commande ollama run. Par exemple, pour exécuter phi3.5, exécutez :

NAME                 ID                  SIZE          MODIFIED     
phi3.5:latest        61819fb370a3        2.2 GB        11 days ago         
llava:latest         8dd30f6b0cb1        4.7 GB        2 weeks ago         
phi3:latest          64c1188f2485        2.4 GB        3 months ago        
csfm1993:~$ 

Cette commande extrait le modèle (s'il n'a pas encore été extrait) et commence son exécution afin que vous puissiez commencer à l'interroger immédiatement. Vous devriez voir ce qui suit dans votre terminal :

ollama run phi3.5

Dans ce tutoriel, vous utiliserez le modèle phi3.5 pour générer des commentaires pour un bloc de code donné. Ce modèle de langage a été sélectionné pour son équilibre entre taille et performances : bien qu'il soit compact, il fournit des résultats solides, ce qui le rend idéal pour créer une application de validation de principe.

Le modèle phi3.5 est suffisamment léger pour fonctionner efficacement sur des ordinateurs dotés de RAM limitée et sans GPU. Si vous disposez d'un GPU, n'hésitez pas à exécuter un LLM plus volumineux. Envoyez l'invite suivante au modèle :

csfm1993:~$ ollama run phi3.5
>>> Send a message (/? for help)

L'invite demande au modèle phi3.5 d'expliquer ce qui se passe dans un bloc de code donné. Vous devriez obtenir une réponse similaire à celle-ci :

complete code:
"
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
  res.send('Hello World!')
})
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})
"
Given the code block below, write a brief, insightful comment that explains its purpose and functionality within the script. If applicable, mention any inputs expected in the code block. 
Keep the comment concise (maximum 2 lines). Wrap the comment with the appropriate comment syntax (//). Avoid assumptions about the complete code and focus on the provided block. Don't rewrite the code block.
code block:
"
app.get('/', (req, res) => {
  res.send('Hello World!')
})
"

Le modèle renvoie un commentaire avec la syntaxe de commentaire spécifiée suivi de l'explication. Une fois que vous avez fini d'interagir avec le modèle, envoyez la commande /bye pour mettre fin au chat.

Création et configuration du projet

Dans cette section, vous créerez un nouveau projet d'extension VS Code et installerez les modules requis pour interagir avec Ollama. Vous utiliserez Yeoman et le VS Code Extension Generator pour échafauder un projet TypeScript.

Dans votre terminal, exécutez la commande suivante pour créer un nouveau projet d'extension VS Code :

// This Express.js route handler responds to GET requests at the root URL 
('/'), sending back a plain text 'Hello World!' message as an HTTP 
response. No additional inputs are required for this specific block of 
code, which serves as a basic setup example within a web server context.

Sélectionnez TypeScript comme langage utilisé pour le projet, puis remplissez les champs restants :

npx --package yo --package generator-code -- yo code

Maintenant, exécutez la commande suivante pour installer les modules requis pour interagir avec le serveur Ollama :

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? commentGenerator
? What's the identifier of your extension? commentgenerator
? What's the description of your extension? Leave blank
? Initialize a git repository? Yes
? Which bundler to use? unbundled
? Which package manager to use? npm
? Do you want to open the new folder with Visual Studio Code? Open with `code`

Avec la commande ci-dessus, vous avez installé les packages suivants :

• ollama : Un package qui fournit un ensemble d'outils et d'utilitaires pour interagir avec les LLM. Il sera utilisé pour communiquer avec le serveur Ollama, en envoyant des invites au LLM pour générer des commentaires de code pour un bloc de code donné
• cross-fetch : un package léger qui apporte la prise en charge de l'API Fetch à Node.js. Il permet de récupérer des ressources, telles que des requêtes API, dans des environnements où Fetch n'est pas disponible de manière native. Il sera utilisé pour effectuer des requêtes HTTP vers le serveur Ollama et éviter une erreur d'expiration de délai de requête HTTP qui pourrait survenir lorsqu'un LLM met trop de temps à générer une réponse

Ouvrez le fichier package.json et assurez-vous que la version de vscode dans la propriété des moteurs correspond à la version de VS Code installée sur votre système :

curl -fsSL https://ollama.com/install.sh | sh

Dans le fichier package.json, remarquez que le point d'entrée principal de votre extension est un fichier nommé extension.js, situé dans le répertoire out, même s'il s'agit d'un projet TypeScript. En effet, le code TypeScript est compilé en JavaScript en exécutant la commande npm compile avant d'exécuter le projet :

ollama serve

Remarquez également comment les commandes que votre extension doit exécuter sont déclarées dans la propriété commands :

ollama pull phi3.5

Pour le moment, il n'y a qu'une seule commande déclarée nommée Hello World avec l'ID commentgenerator.helloWorld. Il s'agit de la commande par défaut fournie avec un projet échafaudé.

Ensuite, accédez au répertoire src et ouvrez le fichier extension.ts :

ollama list

Le fichier extension.ts est le point d’entrée d’une extension VS Code. Le code à l'intérieur de ce fichier importe d'abord le module vscode et déclare deux fonctions nommées activate et deactivate.

La fonction d'activation sera appelée lorsque l'extension sera activée. Cette fonction enregistre un message et enregistre la commande Hello World, qui est définie dans le fichier package.json. Chaque fois que cette commande est exécutée, une fenêtre de notification affichant un message "Hello World" s'affichera.

La fonction de désactivation est appelée lorsque l'extension est désactivée (par exemple, lorsque VS Code est fermé). Il est actuellement vide car aucun nettoyage n'est requis, mais il peut être utilisé pour libérer des ressources.

Dans l'éditeur, ouvrez src/extension.ts et appuyez sur F5 ou exécutez la commande Debug : démarrez le débogage à partir de la palette de commandes (Ctrl Shift P). Cela compilera et exécutera l'extension dans une nouvelle fenêtre Extension Development Host.

Exécutez la commande Hello World à partir de la palette de commandes (Ctrl Shift P) dans la nouvelle fenêtre.

Dans l'éditeur, accédez à src/extension.ts et appuyez sur F5 ou utilisez l'option "Debug : Démarrer le débogage" de la palette de commandes (Ctrl Shift P). Cette action compilera l'extension et la lancera dans une fenêtre hôte de développement d'extension distincte.

Dans cette nouvelle fenêtre, ouvrez la palette de commandes (Ctrl Shift P) et exécutez la commande Hello World :

Pour surveiller en permanence les modifications apportées à votre projet et le compiler automatiquement, revenez à votre terminal et exécutez la commande suivante :

curl -fsSL https://ollama.com/install.sh | sh

Cela démarrera le compilateur TypeScript en mode surveillance, garantissant que votre projet est recompilé chaque fois que vous apportez des modifications.

Enregistrement de la commande Générer un commentaire

Dans cette section, vous remplacerez la commande Hello World par défaut par une commande nommée Generate Comment. Cette commande sera déclenchée lorsque — vous l'aurez deviné — l'utilisateur souhaite générer un commentaire. Vous définirez la commande et vous assurerez qu’elle est correctement enregistrée dans l’extension.

Ouvrez le fichier package.json et remplacez la commande Hello World comme indiqué ci-dessous :

ollama serve

Ouvrez le fichier nommé extension.ts et remplacez le code à l'intérieur de la fonction d'activation par ce qui suit :

ollama pull phi3.5

Ce code remplace la commande Hello par la commande Generate Comment avec l'ID commentgenerator.generateComment. La commande Générer un commentaire affiche également un message d'information lorsqu'elle est déclenchée.

La commande est ensuite poussée vers le tableau context.subscriptions pour garantir qu'elle est correctement éliminée lorsque l'extension est désactivée ou lorsqu'elle n'est plus nécessaire.

Appuyez sur F5 ou exécutez la commande Debug : Démarrer le débogage à partir de la palette de commandes (Ctrl Shift P). Cela exécutera l'extension dans une nouvelle fenêtre Extension Development Host.

Exécutez la commande Générer un commentaire depuis la palette de commandes (Ctrl Maj P) dans la nouvelle fenêtre :

Construire l'invite

Dans cette section, vous construirez l'invite qui sera envoyée au serveur Ollama. L'invite contiendra le bloc de code et son contexte, ainsi que les instructions pour le LLM. Cette étape est cruciale pour guider le LLM afin de générer des commentaires significatifs basés sur le code fourni.

Pour générer un commentaire pour un bloc de code spécifique, l'utilisateur doit d'abord copier le bloc dans le presse-papiers, placer le curseur sur la ligne où le commentaire doit apparaître, puis déclencher la commande Générer un commentaire. L'intégralité du code du fichier contenant ce bloc servira de contexte pour l'invite.

Créez un fichier nommé promptBuilder.ts dans le répertoire src et ajoutez-y le code suivant :

ollama list

Ce code définit trois fonctions : getScriptContext, getCodeBlock et getCodeBlock.

• getScriptContext accepte l'éditeur de texte actuel comme argument et renvoie l'intégralité du texte du fichier actuellement ciblé, en fournissant le contexte de code approprié
• getCodeBlock lit le texte du presse-papiers et le renvoie sous forme de bloc de code
• selectCommentSyntax prend l'éditeur de texte actuel comme argument et renvoie la syntaxe de commentaire appropriée pour l'extension de fichier. Veuillez noter que, dans cette fonction, vous ne pouvez gérer que les syntaxes de commentaires JavaScript et Python ; pour gérer plus de langues, vous devrez modifier la fonction

Maintenant, créons l'invite en utilisant le contexte de code, le bloc de code et la syntaxe de commentaire. Ajoutez le code suivant au fichier promptBuilder.ts :

curl -fsSL https://ollama.com/install.sh | sh

Ce code définit une fonction nommée buildPrompt, qui prend l'éditeur de texte actuel comme argument et renvoie la chaîne d'invite.

Il récupère d'abord le bloc de code, le contexte de code et la syntaxe des commentaires à l'aide des fonctions définies précédemment. Ensuite, il construit la chaîne d'invite à l'aide de littéraux de modèle et remplace les espaces réservés par les valeurs réelles.

La chaîne d'invite demande au LLM d'écrire un commentaire bref et perspicace qui explique le but et la fonctionnalité du bloc de code dans le script, en le gardant concis (deux lignes maximum) et en étant enveloppé dans la syntaxe de commentaire correcte. Le LLM doit se concentrer uniquement sur le bloc fourni, garantissant que le commentaire est pertinent et précis.

Maintenant, mettons à jour le fichier extension.ts pour utiliser la fonction buildPrompt. Accédez au bloc d'importation du fichier extension.ts et importez la fonction buildPrompt :

ollama serve

Ensuite, mettez à jour la commande generateCommentCommand avec le code suivant :

ollama pull phi3.5

Ce code met à jour generateCommentCommand pour récupérer l'éditeur de texte actif et créer l'invite à l'aide de la fonction buildPrompt. Il enregistre ensuite l'invite et affiche un message d'erreur si l'invite ne peut pas être générée.

Appuyez sur F5 ou exécutez la commande Debug : Démarrer le débogage à partir de la palette de commandes (Ctrl Shift P). Cela exécutera l'extension dans une nouvelle fenêtre Extension Development Host.

Exécutez la commande Générer un commentaire à partir de la palette de commandes (Ctrl Maj P) dans la nouvelle fenêtre.

Retournez à la fenêtre d'origine où vous avez le code d'extension, ouvrez le terminal intégré, cliquez sur la Console de débogage et recherchez l'invite générée :

Utiliser Ollama.js pour générer les commentaires

Dans cette section, vous utiliserez la bibliothèque Ollama.js pour générer des commentaires à partir d'invites. Vous configurerez les fonctions nécessaires pour communiquer avec le serveur Ollama, en envoyant des invites au serveur, en interagissant avec le LLM et en recevant les commentaires générés.

Créez un fichier nommé ollama.ts dans le répertoire src et ajoutez le code suivant :

curl -fsSL https://ollama.com/install.sh | sh

Ce code importe la classe Ollama du module ollama et la fonction fetch du module cross-fetch. Il crée ensuite une nouvelle instance de la classe Ollama avec la fonction host et fetch spécifiée.

Ici, vous utilisez le module cross-fetch pour créer une instance Ollama afin d'éviter une erreur de délai d'attente que le serveur Ollama pourrait générer lorsqu'un LLM prend trop de temps pour générer une réponse.

Maintenant, définissons la fonction generateComment, qui prend l'invite comme argument et renvoie le commentaire généré. Ajoutez le code suivant au fichier ollama.ts :

ollama serve

Ce code définit la fonction generateComment, qui prend l'invite comme argument et renvoie le commentaire généré.

Il enregistre d'abord l'heure de début à l'aide de la fonction performance.now. Ensuite, il envoie une requête au serveur Ollama en utilisant la méthode generate de l'instance ollama, en passant phi3.5 comme nom de modèle et invite.

Ensuite, il enregistre l'heure de fin et enregistre le temps qu'il a fallu au LLM pour générer une réponse.

Enfin, il renvoie le commentaire généré stocké dans la réponse.

Maintenant, mettons à jour le fichier extension.ts pour utiliser la fonction generateComment. Tout d'abord, allez dans le bloc d'importation du fichier extension.ts et importez la fonction generateComment :

ollama pull phi3.5

Ensuite, mettez à jour le code dans generateCommentCommand :

ollama list

Ce code met à jour generateCommentCommand pour générer le commentaire à l'aide de la fonction generateComment. Il enregistre ensuite le commentaire généré et affiche un message d'erreur si le commentaire ne peut pas être généré.

Appuyez sur F5 ou exécutez la commande Debug : Démarrer le débogage à partir de la palette de commandes (Ctrl Shift P). Cela compilera et exécutera l'extension dans une nouvelle fenêtre Extension Development Host.

Ouvrez le fichier dans lequel vous souhaitez générer des commentaires, accédez au bloc de code souhaité, copiez-le et placez le curseur sur la ligne où vous souhaitez que le commentaire soit ajouté. Ensuite, exécutez la commande Générer un commentaire à partir de la palette de commandes (Ctrl Maj P) dans la nouvelle fenêtre.

Retournez à la fenêtre d'origine où vous avez le code d'extension, ouvrez le terminal intégré, cliquez sur la Console de débogage, et recherchez le commentaire généré :

Gardez à l'esprit que le temps nécessaire au LLM pour générer une réponse peut varier en fonction de votre matériel.

Ajouter les commentaires au script

Dans cette section, vous ajouterez le commentaire généré au script à la ligne où l'utilisateur a invoqué la commande Générer un commentaire. Cette étape consiste à gérer l'éditeur pour insérer le commentaire à l'emplacement approprié dans le code.

Dans le répertoire src, créez un fichier nommé manageEditor.ts et ajoutez le code suivant :

curl -fsSL https://ollama.com/install.sh | sh

Ce code importe d'abord l'intégralité de l'API Visual Studio Code dans le module actuel, puis définit deux fonctions nommées getCurrentLine et addCommentToFile.

La fonction getCurrentLine prend l'éditeur de texte actuel comme argument et renvoie le numéro de ligne actuel.

La fonction addCommentToFile prend l'URI du fichier, le nom du fichier, le numéro de ligne et le commentaire généré comme arguments et ajoute le commentaire au fichier à la ligne spécifiée. Il crée d'abord un nouvel objet WorkspaceEdit et insère le commentaire à la position spécifiée. Il applique ensuite la modification et affiche un message d'information.

Maintenant, mettons à jour le fichier extension.ts pour utiliser la fonction addCommentToFile.

Allez dans le bloc d'importation du fichier extension.ts et importez les fonctions getCurrentLine et addCommentToFile :

ollama serve

Ensuite, mettez à jour le code dans generateCommentCommand :

ollama pull phi3.5

Ce code met à jour generateCommentCommand pour récupérer l'URI du fichier, le nom du fichier et le numéro de ligne actuel à l'aide de la fonction getCurrentLine. Il ajoute ensuite le commentaire au fichier à la ligne actuelle à l'aide de la fonction addCommentToFile.

Appuyez sur F5 ou exécutez la commande Debug : Démarrer le débogage à partir de la palette de commandes (Ctrl Shift P). Cela exécutera l'extension dans une nouvelle fenêtre Extension Development Host.

Ouvrez le fichier dans lequel vous souhaitez générer des commentaires, accédez au bloc de code souhaité, copiez-le et placez le curseur sur la ligne où vous souhaitez que le commentaire soit ajouté.

Ensuite, exécutez la commande Générer un commentaire depuis la palette de commandes (Ctrl Maj P) et après quelques secondes (ou minutes, selon votre matériel), le commentaire sera placé sur la ligne spécifiée (vous pouvez appuyer sur Alt Z pour envelopper la ligne de commentaire si elle est trop longue) :

Conclusion

Le monde du développement logiciel regorge de discussions sur l'utilisation de l'IA pour faciliter les tâches de codage, notamment la génération de commentaires de code.

Dans ce didacticiel, nous avons expliqué la création d'une extension VS Code pour automatiser les commentaires de code à l'aide de la bibliothèque Ollama.js et d'un LLM local. Nous avons démontré comment certains outils de codage d'IA peuvent rationaliser votre processus de documentation sans compromettre la confidentialité des données ni nécessiter d'abonnements payants.

---

Installez-vous avec le suivi des erreurs moderne de LogRocket en quelques minutes :

1. Visitez https://logrocket.com/signup/ pour obtenir un identifiant d'application.
2. Installez LogRocket via NPM ou une balise de script. LogRocket.init() doit être appelé côté client et non côté serveur.

NPM :

ollama list

Balise de script :

NAME                 ID                  SIZE          MODIFIED     
phi3.5:latest        61819fb370a3        2.2 GB        11 days ago         
llava:latest         8dd30f6b0cb1        4.7 GB        2 weeks ago         
phi3:latest          64c1188f2485        2.4 GB        3 months ago        
csfm1993:~$ 

3.(Facultatif) Installez des plugins pour des intégrations plus approfondies avec votre pile :

• Middleware Redux
• middleware ngrx
• Plugin Vuex

Commencez maintenant

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!