vtex io intellisense

The Vtex io intellisense help you develop with vtex store-framework with snippets and autocomplete.

Features

Autocomplete

ATTENTION: The auto complete only works in 'json' and 'jsonc' files inside the 'store' folder

Go to definition

Experimental Features

The experimental features were deprecated and will be fully implemented in the following updates!

Autocomplete blocks

blocks with auto complete
"add-to-cart-button"
"autocomplete-result-list.v2"
"assembly-option-item-image"
"assembly-option-item-quantity-selector"
"assembly-option-item-name"
"assembly-option-item-price"
"assembly-option-item-customize"
"assembly-option-item-children-description"
"back-to-top-button"
"blog-latest-posts-preview.wordpress-latest-posts-preview"
"breadcrumb.search"
"breadcrumb"
"condition-layout.binding"
"condition-layout.product"
"disclosure-content"
"disclosure-layout-group"
"disclosure-layout"
"disclosure-state-indicator"
"disclosure-trigger-group"
"disclosure-trigger"
"filter-navigator.v3"
"flex-layout.col"
"flex-layout.row"
"gallery-layout-option"
"gallery-layout-switcher"
"gallery"
"icon"
"iframe"
"image"
"link"
"link.product"
"list-context.image-list"
"list-context.product-list"
"login-content"
"login"
"logo"
"menu-item"
"minicart.v2"
"modal-actions.close"
"modal-header"
"modal-layout"
"modal-trigger"
"newsletter-form"
"newsletter-input-email"
"newsletter-input-name"
"newsletter-input-phone"
"newsletter-submit"
"overlay-layout"
"overlay-trigger"
"paged-controls"
"product-brand"
"product-description"
"product-images"
"product-installments-list"
"product-name"
"product-specification-badges"
"product-specification-group"
"product-specification-text"
"product-specification-value"
"product-specification"
"product-summary-image"
"rich-text"
"sandbox"
"sandbox.order"
"sandbox.product"
"scroll-animate"
"search-banner"
"search-bar"
"search-not-found-layout"
"search-result-layout"
"shelf.relatedProducts"
"sku-selector"
"slider-layout"
"stack-layout"
"sticky-layout.stack-container"
"sticky-layout"
"store."
"store.search"
"tab-content.item"
"tab-content"
"tab-layout"
"tab-list.item.children"
"tab-list.item"
"tab-list"
"[email protected]:menu"
"video"

snippets

for .json and .jsonc.

trigger	result
flr	create a flex layout row
flc	create a flex layout col
shelf	create a shelf basic layout
rt	create a rich-text block
image	create a image block
stl	create a stack layout
dl	create a disclosure layout
rld	create a responsive layout desktop
rlm	create a responsive layout mobile
rlt	create a responsive layout tablet
rlp	create a responsive layout phone
clp	create a condition layout product
clb	create a condition layout binding
link	create a link
ovl	create a overlay layout

for .css and .scss

trigger	result
flr	create a .flexRow--
flrc	create a .flexRowContent--
flc	create a .flexCol--
flcc	create a .flexColChild--
vbtn	create a :global(.vtex-button)
vbtnl	create a :global(.vtex-button__label)
vip	create a :global(.vtex-styleguide-9-x-input)
vipg	create a :global(.vtex-input-prefix__group)
vil	create a :global(.vtex-input__label)
vis	create a :global(.vtex__icon-spinner)
:gl	create a :global()

Extension Settings

This extension also provides the following setting:

• vtexiointellisense.unusedBlocks: if set to true will show a warning of unused block when a block its not used. Default value is false
• vtexiointellisense.duplicatedBlocks: if set to true will show a warning of duplicated blocks when a block id its duplicated. Default value is false
• vtexiointellisense.suggestions: if set to true will suggest all blocks declared in children and blocks props. Default value is false
• vtexiointellisense.allowsUnusedBlocks: if set to false all unused blocks will show a warning of unused block. Default value is true