Le développement d’un plugin pour Visual Studio Code (VS Code) permet d’ajouter des fonctionnalités personnalisées à l’éditeur, comme des extensions de langage, des outils d’automatisation ou des intégrations avec d’autres services.

Dans cet article, nous allons voir :

1. Introduction aux extensions VS Code
2. Installation des outils nécessaires
3. Création d’un plugin de base
4. Ajout d’une commande personnalisée
5. Publication sur la marketplace

---

1. Introduction aux extensions VS Code

Une extension VS Code est une application JavaScript/TypeScript qui interagit avec l’API de VS Code pour ajouter des fonctionnalités.

🔹 Exemples d’extensions populaires :
✔ Auto-complétion avancée (ex : IntelliCode)
✔ Linting et formatage de code (ex : ESLint, Prettier)
✔ Débogage (ex : Debugger for Chrome)
✔ Thèmes et icônes personnalisés

---

2. Installation des outils nécessaires

📌 Prérequis

1️⃣ Installer Node.js (requis pour exécuter TypeScript et VS Code API) :

• Téléchargez et installez Node.js depuis https://nodejs.org/
• Vérifiez l’installation :bashCopierModifiernode -v npm -v

2️⃣ Installer VS Code :

• Téléchargez-le ici : https://code.visualstudio.com/

3️⃣ Installer l’outil de génération d’extension VS Code (yo et generator-code)

bashCopierModifiernpm install -g yo generator-code

---

3. Création d’un plugin de base

📌 Génération d’un projet d’extension

Dans un terminal, exécutez :

bashCopierModifieryo code

Répondez aux questions :

• Type d’extension : New Extension (TypeScript)
• Nom de l’extension : my-vscode-plugin
• Identifiant unique : my-vscode-plugin
• Description : Un plugin simple pour VS Code
• Nom du développeur : Votre nom
• Git ? : Yes

Cela crée une structure de projet contenant :

perlCopierModifiermy-vscode-plugin/
│── .vscode/             # Configuration du débogueur
│── src/                 # Code source de l’extension
│── package.json         # Métadonnées et dépendances
│── tsconfig.json        # Configuration TypeScript
│── README.md            # Documentation
│── extension.ts         # Code principal de l’extension

📌 Lancer l’extension

Accédez au dossier :

bashCopierModifiercd my-vscode-plugin

Puis démarrez VS Code en mode développement :

bashCopierModifiercode .

Appuyez sur F5 pour ouvrir une nouvelle fenêtre VS Code où votre extension est activée.

---

4. Ajout d’une commande personnalisée

📌 Ouvrez src/extension.ts et ajoutez une nouvelle commande :

typescriptCopierModifierimport * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    let disposable = vscode.commands.registerCommand('my-vscode-plugin.helloWorld', () => {
        vscode.window.showInformationMessage('Bonjour depuis mon plugin VS Code !');
    });

    context.subscriptions.push(disposable);
}

export function deactivate() {}

📌 Déclarez la commande dans package.json :
Ajoutez ceci sous "contributes" :

jsonCopierModifier"contributes": {
    "commands": [
        {
            "command": "my-vscode-plugin.helloWorld",
            "title": "Dites Bonjour"
        }
    ]
}

Redémarrez l’extension (F5) et testez-la en ouvrant la palette de commandes (Ctrl+Shift+P), puis tapez Dites Bonjour. 🎉

---

5. Publication sur la marketplace

📌 Étape 1 : Installer l’outil de publication

bashCopierModifiernpm install -g vsce

📌 Étape 2 : Créer un compte éditeur Microsoft

• Inscrivez-vous sur https://dev.azure.com
• Suivez les instructions pour obtenir un Personal Access Token (PAT).

📌 Étape 3 : Générer et publier l’extension

Dans le dossier du projet, exécutez :

bashCopierModifiervsce package

Cela génère un fichier .vsix.

Pour publier sur la marketplace VS Code :

bashCopierModifiervsce publish

✅ Votre extension est maintenant disponible ! 🎉

---

Conclusion

Nous avons développé et publié un plugin simple pour VS Code. 🚀

✔ Création d’un projet d’extension
✔ Ajout d’une commande personnalisée
✔ Test en mode développeur
✔ Publication sur la marketplace

👉 Prochaine étape : Ajouter des fonctionnalités avancées comme l’auto-complétion et l’analyse de code ! 🔥