GovBR Web Components Autocomplete

Autocomplete inteligente dos componentes do Design System do Governo Federal (GovBR DS) direto no VSCode.

Pare de digitar atributos na mão. A extensão conhece todos os componentes do GovBR DS e sugere tags, atributos válidos e valores aceitos direto no editor — com snippet pronto e documentação inline, sem precisar abrir a doc do Design System.

Ideal para equipes desenvolvendo portais, sistemas internos, ouvidorias, serviços do cidadão e qualquer interface que utilize os componentes padrão do Governo Federal.

📸 Demonstração em Ação

Autocomplete e Preview

Propriedades e Documentação

🚀 Funcionalidades Principais

1. Autocomplete com Preview de Snippets

Ao digitar <br-, você vê a lista de componentes. A extensão exibe o nome do componente em negrito, uma descrição clara e um exemplo de código (snippet) para que você saiba exatamente o que está inserindo antes de confirmar.

[!TIP] Variações de Componentes: Ao digitar um componente como br-button, você verá não apenas o padrão, mas também as variações comuns (Primary, Secondary, Core, etc), economizando tempo de configuração manual.

2. Atributos e Atalhos Inteligentes

• Atributos Válidos: Dentro da tag, receba sugestões apenas do que o componente aceita (ex: emphasis, state).
• Sugestão de Valores: Para atributos booleanos ou enums, a extensão sugere os valores permitidos (true/false ou os tipos específicos da variante).
• Metadados sempre frescos: Os dados são carregados dinamicamente seguindo o padrão oficial do GovBR DS.

3. Painel de Documentação Visual do Componente

Abra um painel completo com todas as informações do componente em um layout visual rico — atributos com badges de tipo coloridos, slots, eventos e descrições organizados em seções.

Como abrir:

1. Pressione Ctrl+Shift+P (ou Cmd+Shift+P no Mac)
2. Digite GovBR: Mostrar informações do componente
3. Escolha o componente desejado na lista

O painel exibe:

• 📋 Atributos — nome, tipo (com badge colorido por categoria), valor padrão e descrição
• 🔲 Slots — pontos de inserção de conteúdo do componente
• ⚡ Eventos — eventos nativos emitidos pelo componente

[!TIP] Os tipos são identificados visualmente por cor: verde para string, azul para boolean, amarelo para number e roxo para enums.

4. Documentação Inline (Hover)

Passe o mouse sobre qualquer tag ou atributo GovBR para ler a documentação resumida, tipos esperados e valores padrão sem sair do código.

🛠️ Como usar em 5 segundos

1. Instale a extensão pelo VS Code Marketplace ou pela sua loja de extensões favorita.

2. Abra um arquivo HTML, JSX ou TSX.

3. Comece a digitar:

   <br-
   

4. Navegue pela lista e pressione Enter ou Tab para inserir o código completo.

[!IMPORTANT] Se a lista não aparecer automaticamente, use o atalho Ctrl + Espaço (ou Cmd + Espaço no Mac) como fallback para forçar a abertura do autocomplete.

🧩 Snippets de Telas Prontas (Scaffolding)

Acelere a criação das suas interfaces com templates de telas completas e prontas do GovBR DS: Digite screen- no seu arquivo HTML e escolha um dos templates:

📋 Lista de Componentes Suportados (Exemplos)

A extensão suporta todos os 60+ componentes do GovBR DS, incluindo:

📈 Telemetria e Privacidade (LGPD)

Métricas anônimas são coletadas apenas para entender o uso das funcionalidades e priorizar melhorias. Nenhum dado pessoal ou código-fonte sensível é coletado. Respeitamos a configuração global de privacidade do seu VS Code.

🤝 Contato e Suporte

Dúvidas ou sugestões? Entre em contato via: natanael.leite@serpro.gov.br