vscode-ui-sketcher

Qu’est-ce que vscode-ui-sketcher ?

vscode-ui-sketcher est une extension Visual Studio Code (avec un composant webview) pour donner vie à vos projets d’interface. Le dépôt positionne l’outil autour de la transformation du travail de design d’interface en quelque chose d’interactif et déployable dans un workflow VS Code.

Le projet est open source et inclut à la fois l’extension VS Code et une application webview séparée. Il référence également une inspiration de dessin de tldraw et un coup de pouce pour le dessin d’interface de draw-a-ui.

Fonctionnalités principales

• Projet d’extension VS Code pour l’esquisse d’interfaces : offre un moyen dans l’éditeur pour dessiner des idées d’interface dans un workflow VS Code typique.
• Expérience d’édition basée sur webview : l’extension inclut un package dédié ui-sketcher-webview, indiquant que l’interface de dessin s’exécute dans une webview.
• Configuration de développement reproductible avec pnpm : inclut des instructions pour installer les dépendances (pnpm install) et construire la webview (pnpm build ou pnpm build --watch).
• Support de débogage via le débogueur VS Code : le dépôt recommande explicitement d’utiliser le débogueur VS Code pour exécuter l’extension.
• Développement webview basé sur navigateur : les développeurs peuvent exécuter la webview directement (pnpm --filter ui-sketcher-webview dev) et ouvrir l’URL locale http://localhost:3174.
• Licence open source (AGPL-3.0) : le dépôt inclut un fichier de licence AGPL-3.0, pertinent pour l’utilisation et la redistribution du code.

Comment utiliser vscode-ui-sketcher

1. Installez l’extension depuis le Visual Studio Marketplace (ou recherchez « UI Sketcher » dans l’onglet Extensions).
2. Ouvrez l’extension et suivez le workflow à l’écran pour dessiner votre projet d’interface (le README et le README de l’extension sont référencés dans le dépôt, mais les étapes détaillées in-product ne sont pas incluses dans le contenu de la page fourni).
3. Si vous contribuez ou développez : clonez le dépôt, installez les dépendances avec pnpm install, puis construisez et exécutez l’extension en utilisant la configuration de développement ui-sketcher.code-workspace.
4. Pour le travail sur la webview : exécutez pnpm --filter ui-sketcher-webview dev depuis ./ui-sketcher-webview et ouvrez http://localhost:3174 dans votre navigateur.

Cas d’utilisation

• Esquisse d’une interface dans VS Code en itérant sur la mise en page : utilisez l’extension pour rédiger la structure d’interface sans quitter l’éditeur.
• Développement ou personnalisation de l’expérience de dessin : les contributeurs peuvent travailler sur le package ui-sketcher-webview et voir les changements via l’URL du navigateur local.
• Débogage du comportement de l’extension dans l’éditeur : utilisez le débogueur VS Code pour exécuter l’extension et investiguer les problèmes.
• Construction et surveillance de la webview pendant le développement : exécutez pnpm build --watch pour un retour rapide lors du travail sur la webview.
• Apprentissage d’une implémentation open source de référence : la structure du dépôt (packages extension + webview, fichier workspace et instructions de build) peut servir de point de départ pour des outils de dessin VS Code similaires.

FAQ

Où installer vscode-ui-sketcher ?

Installez-le depuis le Visual Studio Marketplace, ou recherchez « UI Sketcher » dans l’onglet Extensions.

Y a-t-il un code webview séparé que je peux exécuter pendant le développement ?

Oui. Le dépôt documente l’exécution de la webview avec pnpm --filter ui-sketcher-webview dev et l’ouverture de http://localhost:3174.

Comment construire l’extension ou la webview à partir des sources ?

Le contenu de la page indique que vous pouvez exécuter pnpm build (ou pnpm build --watch) depuis ./ui-sketcher-webview. Il indique également de « Ne travailler que depuis le fichier ui-sketcher.code-workspace » pour le développement.

Quelle est la licence du projet ?

Le dépôt liste la licence AGPL-3.0.

Alternatives

• Outils de diagrammes d’interface généralistes : des outils axés sur le dessin ou les diagrammes (souvent avec des fonctionnalités d’export) peuvent remplacer les workflows d’esquisse, mais ils ne sont peut-être pas intégrés à VS Code.
• Autres approches d’extensions VS Code pour design-to-code : des extensions ciblant la génération d’interface ou les maquettes peuvent servir des objectifs similaires, bien que les workflows et options de rendu/export diffèrent.
• Tableaux blancs/dessins collaboratifs basés sur le web : si vous avez besoin de dessin basé sur navigateur plutôt que d’un workflow intégré à l’éditeur, un canevas de dessin web peut être une alternative, avec moins d’emphase sur le contexte de projet VS Code.
• Outils de diagrammes/flux : pour les utilisateurs qui ont principalement besoin de structure plutôt que de mise en page au niveau pixel, les outils de diagrammes peuvent offrir un workflow de documentation plus simple comparé à un canevas d’esquisse d’interface.