Construire une Extension VSCode avec ChatGPT

Introduction

Ce projet vous guidera à travers le processus de création d'une extension VSCode qui permet à l'utilisateur d'ajuster le niveau de titre du texte Markdown sélectionné. À la fin, vous disposerez d'une extension fonctionnelle qui améliore l'expérience d'édition Markdown dans Visual Studio Code.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous apprendrez :

• Comment créer l'échafaudage d'une extension VSCode en utilisant TypeScript.
• Comment intégrer TypeScript avec les configurations Node.js et VSCode.
• Comment développer la fonctionnalité principale pour ajuster les niveaux de titre du texte Markdown sélectionné.
• Comment écrire des fichiers de configuration pour la construction, le débogage et l'exécution de l'extension.

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Concevoir et développer des extensions VSCode en utilisant TypeScript.
• Gérer les interactions utilisateur et les sélections de texte dans l'environnement VSCode.
• Analyser et manipuler la syntaxe Markdown.
• Générer et gérer plusieurs fichiers dans un projet.
• Configurer TypeScript, Node.js et VSCode pour un développement fluide.

Installer smol-ai

De plus, nous utilisons le framework smol-ai pour générer du code.

Description de smol-ai tirée du README :

Ceci est un prototype d'agent « développeur junior » (alias smol dev) qui génère l'intégralité d'une base de code pour vous une fois que vous lui donnez une spécification de produit, mais qui ne met pas fin au monde et ne promet pas l'AGI. au lieu de créer et de maintenir des starters spécifiques, rigides et uniques, comme create-react-app ou create-nextjs-app, il s'agit essentiellement de create-anything-app où vous développez votre prompt d'échafaudage dans une boucle serrée avec votre smol dev.

Nous apprécions smol-ai pour sa simplicité. La logique complète de génération de code se trouve dans un seul fichier Python composé de trois fonctions principales :

1. Générer une liste des fichiers nécessaires pour exécuter le prompt (ex. package.json, index.js, ...)
2. Générer une liste des dépendances partagées nécessaires pour exécuter le prompt (ex. axios, react, ...)
3. Pour chaque fichier de la liste générée, générer le code qui ira dans le fichier, en utilisant les dépendances partagées si applicable.

Notez que smol-ai fournit également d'autres capacités telles que la possibilité de déboguer des erreurs et de générer un prompt basé sur la base de code actuelle.

Tâches

1. Cloner le dépôt smol-ai

   Vous devez cloner le dépôt https://github.com/smol-ai/developer dans le répertoire /home/labex/project.

2. Configurer smol-ai

   Vous devez lire le README de smol-ai et configurer la clé API OpenAI.

Initialiser Cette Extension

Il existe un prompt de base décrivant ce projet :

une extension vscode qui permet à l'utilisateur d'ajuster le niveau de titre du texte sélectionné. elle doit avoir trois commandes : augmenter le niveau de titre, diminuer le niveau de titre et définir le niveau de titre

Notez que le prompt est court et général. Vous pouvez essayer d'améliorer le prompt en ajoutant plus de détails sur le projet.

Vous pouvez exécuter smol-ai pour générer le projet. Après quelques minutes passées à générer du code, smol-ai a créé les fichiers dans le répertoire developer/generated.

Tâches

1. Initialiser le projet

   Visualisez le README de smol-ai, puis utilisez smol-ai pour générer le projet.

2. Configurer le projet

   Vous devez visualiser le code généré. Si nécessaire, le prompt peut être ajusté pour régénérer.

Résultat Attendu

Il y a un exemple du code généré dans le répertoire developer/generated. Votre résultat peut être différent.

.
├── extension
│   ├── package.json
│   ├── src
│   │   ├── commands
│   │   │   ├── decreaseHeadingLevel.ts
│   │   │   ├── increaseHeadingLevel.ts
│   │   │   └── setHeadingLevel.ts
│   │   └── extension.ts
└── shared_dependencies.md

Tester Cette Extension

Pour tester cette extension, nous devons exécuter avec succès les étapes suivantes :

1. Installer les dépendances ;
2. Compiler le code ;
3. Exécuter l'extension.

Installer les Dépendances

Vous devez exécuter les commandes suivantes dans le répertoire généré.

yarn

Il peut y avoir des problèmes lors de l'installation des dépendances. Vous devez corriger ces problèmes.

Tâches

1. Corriger les problèmes lors de l'installation des dépendances.

   Vous pouvez demander à l'IA de corriger les problèmes.

Résultat Attendu

Une fois les problèmes corrigés, vous pourriez voir les résultats d'exemple suivants.

$ yarn

...
[3/5] 🚚 Fetching packages...
[4/5] 🔗 Linking dependencies...
[5/5] 🔨 Building fresh packages...
✨ Done in 4.31s.

Construire Cette Extension

Étant donné que TypeScript est un langage compilé, nous devons exécuter une étape de construction pour compiler le code en JavaScript. Le package.json est livré avec les scripts suivants :

"scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "postinstall": "node ./node_modules/vscode/bin/install",
    "test": "npm run compile && node ./node_modules/vscode/bin/test"
},

Nous pouvons construire le code en exécutant la commande suivante :

tsc --init
yarn compile

Il peut y avoir des problèmes lors de la compilation du code. Vous devez corriger ces problèmes.

Tâches

1. Corriger les problèmes lors de la compilation du code.

   Vous pouvez demander à l'IA de corriger les problèmes.

Résultat Attendu

Une fois les problèmes corrigés, vous pourriez voir les résultats d'exemple suivants.

$ tsc -p ./
✨ Done in 0.80s.

Exécuter Cette Extension

L'exécution d'une extension vscode nécessite que vous accédiez au panneau « Exécuter et Déboguer » et que vous lanciez la tâche vscode extension lorsque le fichier extension.ts est actif dans l'éditeur.

Il peut y avoir des problèmes lors de l'exécution de l'extension. Vous devez corriger ces problèmes.

Tâches

1. Corriger les problèmes lors de l'exécution de l'extension.

   Vous pouvez demander à l'IA de corriger les problèmes.

Résultat Attendu

Une fois les problèmes corrigés, vous devriez voir l'extension s'exécuter correctement.

Résumé

Ça marche 🥳

Alors, qu'avons-nous accompli ? Nous avons obtenu une extension fonctionnelle. Nous l'avons fait accomplir l'objectif fixé dans notre prompt.

Le chemin parcouru n'a pas été « automatique ». Nous avons rencontré de nombreux problèmes en cours de route. Sans connaissances préalables en TypeScript, Node.js et VSCode, ces problèmes auraient pris du temps à déboguer.

Et même si le code que nous avons pu générer fonctionne, de nombreuses améliorations restent à apporter :

• Il n'y a aucune instruction sur la manière de développer, d'utiliser ou de publier l'extension ;
• Il n'y a pas de .gitignore pour les artefacts typescript/javascript/vscode ;
• Il n'y a pas de fichier launch.json qui configure l'exécution de l'extension en développement ;
• Il n'y a pas de tests ;
• Il n'y a pas de réutilisation de code.