Skip to content

Latest commit

 

History

History
132 lines (98 loc) · 3.45 KB

README.md

File metadata and controls

132 lines (98 loc) · 3.45 KB

VTEX IO Tools 🛠

Objetivo

  • Esse projeto tem como objetivo facilitar o desenvolvimento de projetos com VTEX IO na criação de novos blocos no JSON e estilizaçoes CSS. Esses snippets geram um auto complete inteligente dos blocos da VTEX IO com todas as propriedades disponiveis e seus argumentos validos.
  • Ter atalhos que vão ajudar no desenvolvimento projeto VTEX na estrutura JSON, SCSS e REACT
  • Ser um plugin do VSCode

Caracteristicas

  • snippets
    • CSS
    • JSON
  • auto complete inteligente (mesmo em blocos com identificadores)
  • Documentação VTEX inbutida
  • Mostra Valores que vem por padrao em cada propriedade
  • Verifica erros na escrita dos blocos JSON

Como Instalar

Instale a extensao no marketplace do VSCode

Como usar

Snippets (json)

Dentro de aquivos JSON/JSONC existem 2 tipos de snippets, os com o prefixo vtex.. e os com fvtex..

  • fvtex. -> Cria um objeto JSON com todas as propriedades do componente VTEX
  • vtex. -> Cria um objeto JSON com as propriedades mais usadas do componente VTEX

Depois do prefixo escreva o nome do componente VTEX que deseja, exemplo:

fvtex.rich-text

{
  "rich-text#": {
    "props": {
      "blockClass": "",
      "font": "",
      "htmlId": "",
      "preventVerticalStretch": ,
      "text": "",
      "textAlignment": "",
      "textColor": "",
      "textPosition": ""
    },
    "children": [
      ""
    }
  }
}

vtex.rich-text

{
  "rich-text#": {
    "props": {
      "blockClass": "",
      "preventVerticalStretch": ,
      "text": "",
      "textAlignment": "",
    },
    "children": [
      ""
    }
  }
}

Snippets (css)

Dentro de aquivos CSS/SCSS existem 2 tipos de snippets, os com o prefixo vtex. e os com cvtex..

  • vtex. -> Cria uma estrutura com todas as classe que esse componte deixa disponivel

  • cvtex. -> Cria uma estrutura com todas as classe que esse componte deixa disponivel + adiciona cometarios sobre as classes

    cvtex.flex-layout

// Container 
.flexRow-- {

}

// Involucro 
.flexRowContent-- {

}

vtex.flex-layout

.flexRow-- {

}

.flexRowContent-- {

}

💡 Lembre-se de usar o atalho CTRL + SPACE para ver os snippets disponiveis enquanto digita

intellisense

Como projetos VTEX IO por padrao seguem a mesma estrutura de pastas o intellisense so funcionara dentro de arquivo JSON que estao dentro de uma pasta

💡 Ao passar o mouse em cima do nome de componente ou propriedade voce vai ver uma descrição

Progresso

Veja como esta o progresso de desenvolvimento dessa extensao

Contribua

Ajude-nos a melhorar a extensao, seja com sugestoes, novas features, apontamento de erros ou no proprio desenvolvimento dos blocos que ainda faltam.

Licença

Licensed under the MIT license

Agradecimentos