VSCE Vue Starter

Une extension starter pour vscode avec Vue 3 + Vite et tailwind pour créer facilement des webviews interactives.

📸 Aperçu

Cette extension fournit une base solide pour développer des extensions VS Code avec des interfaces utilisateur modernes utilisant Vue 3 et Vite. Elle inclut un exemple complet de communication bidirectionnelle entre l'extension et la webview.

✨ Fonctionnalités

• 🚀 Vue 3 + Vite - Développement moderne avec hot reload
• 🎨 Tailwind CSS - Framework CSS utilitaire intégré
• 🔄 Communication bidirectionnelle - Échange de messages entre extension et webview
• ⚡ Mode développement - Serveur Vite intégré pour un développement rapide
• 📦 Build optimisé - Assets buildés pour la production
• 🛠️ Configuration flexible - Port Vite configurable
• 📁 Sidebar intégrée - Webview dans la barre latérale VS Code

🏗️ Architecture

├── src/
│   ├── extension.ts              # Point d'entrée principal
│   ├── includes/
│   │   └── webview.ts           # Provider de webview
│   ├── tooling/
│   │   └── utils.ts             # Utilitaires (détection Vite, port, etc.)
│   └── webview/                 # Application Vue
│       ├── src/
│       │   ├── App.vue          # Composant racine
│       │   ├── main.ts          # Point d'entrée Vue
│       │   ├── components/      # Composants Vue
│       │   └── helpers/         # Helpers de communication
│       ├── vite.config.ts       # Configuration Vite
│       └── package.json         # Dépendances webview

🚀 Installation et Développement

Prérequis

• Node.js (v18+)
• npm ou yarn
• VS Code

Installation

1. Clonez le repository :

git clone <votre-repo>
cd justhugo-vsce-vue-starter

2. Installez les dépendances :

# Dépendances de l'extension
npm install

# Dépendances de la webview
cd src/webview
npm install
cd ../..

Développement

1. Mode développement avec hot reload :

# Terminal 1 : Démarrer Vite (webview)
cd src/webview
npm run dev

# Terminal 2 : Compiler l'extension
npm run watch

2. Tester l'extension :
   • Ouvrez le projet dans VS Code
   • Appuyez sur F5 pour lancer une nouvelle instance VS Code
   • Ouvrez la Command Palette (Ctrl+Shift+P)
   • Exécutez VSCEVS: Ouvrir la webview

Build de production

# Build de la webview
cd src/webview
npm run build
cd ../..

# Package de l'extension
npm run package

# Créer le .vsix
npx vsce package

⚙️ Configuration

Port Vite

Le port du serveur Vite peut être configuré dans les paramètres VS Code ou directement dans le package.json :

{
  "vitePort.vitePort": 5170
}

Commandes disponibles

• vscevs.helloWorld - Commande Hello World
• vscevs.openWebview - Ouvrir la webview

🔧 API et Communication

Extension vers Webview

// Dans webview.ts
webviewView.webview.postMessage({ 
  type: "onMultByPiResult", 
  value: result 
});

Webview vers Extension

// Dans la webview Vue
const vscodeApi = (window as any).vscodeApi;
vscodeApi.postMessage({ 
  type: 'onMultByPi', 
  value: number.value 
});

Exemple de handler de messages

webviewView.webview.onDidReceiveMessage(async (data) => {
  switch (data.type) {
    case "onMultByPi":
      const result = data.value * Math.PI;
      webviewView.webview.postMessage({ 
        type: "onMultByPiResult", 
        value: result 
      });
      break;
  }
});

📁 Structure de la Webview

Composants inclus

• HomeWelcome.vue - Page d'accueil avec liens utiles
• MultiplyByPi.vue - Exemple de composant avec communication bidirectionnelle

Helpers

• sendPostMessage.ts - Utilitaires pour la communication avec VS Code
  • Cache avec expiration (1 heure)
  • Gestion des états de chargement
  • Composition API Vue pour les requêtes

🎯 Exemples d'utilisation

Ajouter un nouveau composant

1. Créer le composant dans src/webview/src/components/
2. L'importer dans App.vue
3. Ajouter les handlers de messages si nécessaire dans webview.ts

Ajouter une nouvelle commande

1. Définir la commande dans package.json :

{
  "command": "vscevs.maCommande",
  "title": "Ma Commande"
}

2. L'enregistrer dans extension.ts ou webview.ts

🛠️ Technologies utilisées

• Backend Extension :

  • TypeScript
  • VS Code Extension API
  • Webpack

• Frontend Webview :

  • Vue 3 (Composition API)
  • Vite
  • Tailwind CSS
  • TypeScript

📝 Scripts disponibles

Extension

• npm run compile - Compiler l'extension
• npm run watch - Compiler en mode watch
• npm run package - Build de production
• npm run lint - Linter le code

Webview

• npm run dev - Serveur de développement Vite
• npm run build - Build de production
• npm run preview - Preview du build

🐛 Dépannage

La webview ne se charge pas

1. Vérifiez que le serveur Vite est démarré (npm run dev dans /src/webview)
2. Vérifiez le port dans la configuration VS Code
3. Consultez la console de développement VS Code (Help > Developer Tools)

Erreurs TypeScript

1. Assurez-vous que toutes les dépendances sont installées
2. Vérifiez que les types DOM sont bien inclus dans tsconfig.json

📄 Licence

MIT © [justhugo]

🤝 Contribution

Les contributions sont les bienvenues ! N'hésitez pas à :

1. Fork le projet
2. Créer une branche feature (git checkout -b feature/AmazingFeature)
3. Commit vos changements (git commit -m 'Add some AmazingFeature')
4. Push vers la branche (git push origin feature/AmazingFeature)
5. Ouvrir une Pull Request

📚 Ressources utiles

• VS Code Extension API
• Vue 3 Documentation
• Vite Documentation
• Tailwind CSS
• VS Code Webview Guide

---

⭐ N'oubliez pas de starring le repo si ce starter vous a été utile !