Repository navigation
Home
Tema, iconos, snippets e IntelliSense para quien construye en VTEX.
Extensión de VS Code con todo lo que necesita un tema de VTEX IO Store Framework:
snippets de bloques y props con enums y validación en store/blocks, rutas y
contentSchemas; validación de JSON; autocompletado de las variables CSS del VTEX Style; y
un tema de color con sus iconos de archivo y de interfaz.
Se instala desde el VS Code Marketplace. Ese es el único lugar de distribución; esta wiki es la documentación completa.
| 385 snippets de bloques del Store Framework, con enums en las props | Bloques y snippets |
| Go to Definition, Find All References y Hover sobre los ids de bloque del tema | Bloques y snippets |
| Validación de JSON contra el esquema de bloques | Bloques y snippets |
Autocompletado de var(--...) a partir de tu JSON de tokens |
Variables CSS del VTEX Style |
| Tema de color oscuro Puelche, 9 papeles semánticos | El tema Puelche |
| 51 iconos de archivo y 42 de carpeta, con la estructura real de VTEX IO | Iconos de archivo y carpeta |
| 58 glifos propios para la interfaz de VS Code | Iconos de la interfaz |
| Tres comandos: tokens.css y el preset de confort | Comandos |
- Instalación — instalar, activar los tres temas y el primer autocompletado.
- Bloques y snippets — lo que la extensión hace en un tema de verdad.
- Solución de problemas — si algo no aparece, empieza por aquí.
La extensión es JavaScript puro, sin TypeScript y sin build step, y casi todo lo publicado es generado, nunca editado a mano.
-
Arquitectura — qué vive en
lib/, qué vive enextension.jsy por qué. - Generación y build — de dónde salen los snippets, el esquema, los iconos y la fuente.
- La spec de dibujo — el trazo Puelche: grosor, radio, caja, badge.
- Pruebas — 149 asertos, y qué cobra cada archivo.
- Contribuir — convenciones de la casa.
- Publicación — cómo sale una versión al Marketplace.
Hecho con amor y café por zeluizr y con la ayuda de Claude ☕