Saltar al contenido
IntelliSense para el VTEX IO Store Framework

Autocompletado e IntelliSense para los bloques de VTEX IO

Escribe temas VTEX IO más rápido — snippets de los bloques y autocompletado de props (con enums, defaults y validación) directo en VS Code.

Instalar en VS CodeVer en GitHub
Disponible en el VS MarketplaceVTEX IO Store FrameworkPRs bienvenidosLicencia MIT
378bloques
61apps
~1297props documentadas
search.jsonc — vtex-io-theme
search.jsonc
blocks.json
mainLn 10, Col 7 · JSON with Comments · UTF-8
Recursos

Dos capas de autocompletado

Desde la estructura del bloque hasta cada prop — el editor te guía en todo el camino.

Capa 1

Snippets de bloques

Escribe el nombre del bloque e inserta el bloque entero listo, con placeholders navegables con Tab.

Capa 2

IntelliSense de props (JSON Schema)

Dentro de un bloque, el editor sugiere los props válidos de ese bloque, muestra las opciones (enums) y valida los valores. Se aplica automáticamente a los archivos de bloques.

Funciona en .json y .jsonc

Soporte completo a comentarios en los archivos de tema.

Sin configuración

El schema se aplica automáticamente. Lo instalas y ya funciona.

Documentación oficial de VTEX

Props, enums y defaults extraídos de la fuente oficial.

93% de cobertura

366 de 393 bloques nativos exigidos, auditado contra el ground-truth oficial.

Instalación

Instala en segundos

Desde el Marketplace o vía línea de comandos — elige lo que prefieras.

Desde el Marketplace

Abre la pestaña Extensions de VS Code Cmd/Ctrl+Shift+X, busca VTEX IO Store Framework Snippets y haz clic en Install.

Abrir en el Marketplace

Manual / vía CLI

¿Ya tienes el comando code en la terminal? Instala directo:

terminal
code --install-extension commenteme.vtex-io-intellisense

También puedes descargar el .vsix en Releases de GitHub y ejecutar code --install-extension vtex-io-intellisense-*.vsix.

Cómo usar

Del snippet a la validación, en tres pasos

El flujo completo para escribir bloques de tema con confianza.

A

Insertar un bloque (snippets)

En cualquier archivo .json/.jsonc del tema, escribe el nombre del bloque (ej.: flex-layout.row, rich-text, product-summary.shelf) o el atajo corto v- (ej.: v-flex-row).

Usa Tab para navegar por los placeholders del bloque insertado.

store/blocks/home.jsonc
"rich-text#hero": {
  "props": {
    "text": "Texto en **Markdown**",
    "textAlignment": "CENTER"
  }
}
B

Autocompletar props (IntelliSense)

Dentro de "props": { } de un bloque, pulsa Ctrl+Espacio y el editor lista los props de ese bloque con sus opciones.

Funciona en store/blocks.json, store/blocks.jsonc y store/blocks/**/*.{json,jsonc}.

slider-layout · props

showNavigationArrows · valores

C

Consejo — autocompletado mientras escribes

Para que las sugerencias aparezcan mientras escribes (y no solo con Ctrl+Espacio), activa sugerencias en strings en settings.json:

Asegúrate de que los archivos .jsonc estén en el language mode JSON with Comments.

settings.json
{
  "[jsonc]": { "editor.quickSuggestions": { "strings": true } },
  "[json]":  { "editor.quickSuggestions": { "strings": true } }
}
Cobertura

378 bloques nativos cubiertos

Bloques del VTEX IO Store Framework cubiertos por snippets + schema de props.

Layout11

  • flex-layout.row
  • flex-layout.col
  • slider-layout
  • responsive-layout
  • condition-layout
  • tab-layout
  • modal-layout
  • sticky-layout
  • stack-layout
  • disclosure-layout
  • overlay-layout

Contenido6

  • rich-text
  • image
  • info-card
  • call-to-action
  • newsletter
  • video

Header / Footer10

  • header-layout
  • footer-layout
  • logo
  • search-bar
  • minicart.v2
  • login
  • menu
  • drawer
  • social-networks
  • accepted-payment-methods

PDP17

  • product-images
  • product-name
  • product-identifier
  • product-selling-price
  • product-list-price
  • product-installments
  • product-quantity
  • sku-selector
  • buy-button
  • product-description
  • product-specifications
  • product-details
  • product-gifts
  • product-highlights
  • product-bookmark
  • share
  • breadcrumb

Estantería7

  • product-summary.shelf
  • product-summary-image
  • product-summary-name
  • product-summary-buy-button
  • shelf
  • add-to-cart-button
  • list-context.product-list

Búsqueda7

  • search-result-layout
  • search-result-layout.desktop
  • search-result-layout.mobile
  • gallery
  • filter-navigator.v3
  • order-by.v2
  • total-products.v2

93% de cobertura de los bloques nativos exigidos (366/393), auditado contra el store/interfaces.json oficial de cada app. El schema es tolerante — los props no mapeados no generan error, solo no se sugieren. Los datos provienen de la documentación oficial de VTEX (61 apps, ~1297 props documentadas).

FAQ

Preguntas frecuentes

¿Funciona en Cursor / VSCodium?
La extensión está publicada en el VS Code Marketplace. En editores basados en Open VSX (como VSCodium y Cursor), instálala mediante el archivo `.vsix` disponible en GitHub Releases.
¿Necesito configurar algo?
No. El JSON Schema se aplica automáticamente a los archivos de bloques del tema. Solo instala la extensión y abre un proyecto de tema VTEX IO.
¿Cómo se definen los props?
Mediante un JSON Schema incluido en la extensión, generado a partir de la documentación oficial de VTEX. Describe tipos, enums, defaults y descripciones de cada prop.
¿Es open source?
Sí, licencia MIT. Las contribuciones son bienvenidas en el repositorio de GitHub.
¿Funciona con cualquier versión de tema?
Sí. La extensión se basa en los archivos de bloques del Store Framework y no altera nada en tu proyecto — solo ofrece sugerencias en el editor.

Empieza ahora — instala y gana velocidad en tus temas VTEX.

378 bloques, ~1297 props documentadas. Sin configuración.

Instalar en VS CodeVer en GitHub