HTML Preview Editor

Extension VSCode pour prévisualiser et inspecter du contenu HTML en temps réel.

Fonctionnalités

🔍 Prévisualisation en temps réel

• Aperçu instantané de votre code HTML dans un panneau dédié
• Mise à jour automatique lors de la modification du code
• Support complet des styles CSS et du JavaScript

🎯 Inspection d'éléments

• Widget flottant pour activer/désactiver le mode inspection
• Cliquez sur n'importe quel élément dans la prévisualisation pour trouver son code source
• Navigation automatique vers la ligne de code correspondante
• Surbrillance temporaire de l'élément dans l'éditeur
• Persistance du mode inspection : Le mode reste actif même après navigation dans le code

🎨 Interface moderne

• Widget circulaire avec icône Font Awesome
• Effets hover et transitions fluides
• Intégration parfaite avec le thème VSCode

Utilisation

Ouvrir la prévisualisation

1. Via le menu contextuel : Clic droit dans un fichier HTML → "HTML Preview: Ouvrir la prévisualisation"
2. Via le raccourci clavier : Cmd+Shift+V (Mac) ou Ctrl+Shift+V (Windows/Linux)
3. Via l'icône dans la barre d'outils : Cliquez sur l'icône de prévisualisation

Utiliser l'inspection d'éléments

1. Ouvrez la prévisualisation HTML
2. Cliquez sur le bouton circulaire flottant (icône crayon) en bas à droite
3. Le bouton devient vert pour indiquer que le mode inspection est actif
4. Survolez les éléments dans la prévisualisation (ils seront entourés d'un outline bleu)
5. Cliquez sur un élément pour naviguer vers son code source
6. Le mode inspection reste actif pour continuer à inspecter d'autres éléments
7. Cliquez à nouveau sur le bouton pour désactiver le mode inspection

Architecture du code

Structure des fichiers

src/
├── extension.ts              # Point d'entrée de l'extension
├── PreviewPanel.ts           # Gestion du panneau de prévisualisation
├── constants.ts              # Constantes globales (couleurs, tailles, etc.)
├── types.ts                  # Interfaces TypeScript
├── utils/
│   ├── htmlProcessor.ts      # Traitement et injection dans le HTML
│   └── elementLocator.ts     # Utilitaires de localisation (legacy)
└── webview/
    └── inspectorWidget.ts    # Code JavaScript du widget d'inspection

Modules principaux

extension.ts

Point d'entrée de l'extension VSCode. Enregistre les commandes et gère les événements de mise à jour.

PreviewPanel.ts

Classe singleton gérant le webview panel :

• Création et affichage du panel
• Communication avec le webview
• Gestion de la sélection d'éléments
• Mise en surbrillance dans l'éditeur

utils/htmlProcessor.ts

Traitement du HTML utilisateur :

• Ajout des attributs de suivi (data-element-id, data-line)
• Injection de Font Awesome
• Injection du script d'inspection

webview/inspectorWidget.ts

Génération du code JavaScript pour le widget d'inspection :

• Création du widget flottant
• Gestion des événements (hover, click)
• Détection des éléments dans l'arbre DOM
• Persistance de l'état avec vscode.setState()

constants.ts

Centralisation de toutes les valeurs de configuration :

• Tailles et positions du widget
• Couleurs
• Durées des animations
• Balises HTML ignorées
• URLs des ressources externes

types.ts

Définitions TypeScript :

• Messages échangés entre webview et extension
• État persistant du webview
• Configurations

Développement

Prérequis

• Node.js 20+
• pnpm (ou npm)
• VSCode 1.85.0+

Installation

pnpm install

Compilation

pnpm run compile

Mode watch

pnpm run watch

Tests

Ouvrez le projet dans VSCode et appuyez sur F5 pour lancer l'extension en mode debug.

Configuration

Constantes personnalisables

Toutes les constantes sont centralisées dans src/constants.ts :

• Widget : Taille, position, z-index, transitions
• Couleurs : Boutons, outline, surbrillance
• Durées : Animations, surbrillance dans l'éditeur
• Détection : Profondeur maximale de l'arbre DOM

Exemple de personnalisation

// Dans src/constants.ts
export const INSPECTOR_WIDGET = {
    BUTTON_SIZE: 64,  // Augmenter la taille du bouton
    POSITION_BOTTOM: 32,  // Plus d'espace depuis le bas
    // ...
};

Bonnes pratiques

Pour les développeurs

1. Constantes : Toujours utiliser les constantes de constants.ts plutôt que des valeurs magiques
2. Types : Définir les interfaces dans types.ts pour la réutilisabilité
3. Documentation : Ajouter des JSDoc pour toutes les fonctions publiques
4. Modularité : Séparer les responsabilités dans des fichiers distincts
5. Commentaires : Utiliser les séparateurs // ====...==== pour organiser les sections

Structure des fonctions

Chaque module suit une organisation cohérente :

1. Imports
2. Constantes locales (si nécessaire)
3. Fonctions utilitaires privées
4. Fonctions publiques exportées

Contribution

Les contributions sont les bienvenues ! Assurez-vous de :

1. Respecter l'architecture existante
2. Ajouter de la documentation JSDoc
3. Tester vos modifications
4. Compiler sans erreurs TypeScript

Licence

MIT