Escrevendo novo código

O Verdent for VS Code ajuda você a escrever novo código por meio de solicitações em linguagem natural, sem exigir sintaxe especial. Descreva o que deseja construir e o Verdent cria implementações prontas para produção em vários arquivos, mantendo os padrões e convenções do seu projeto.

O que você vai aprender

• Solicitar novos recursos usando prompts em linguagem natural
• Gerar código em vários arquivos com as dependências corretas
• Trabalhar com várias linguagens de programação e frameworks
• Estruturar arquiteturas inteiras de projetos
• Iterar sobre o código gerado por meio de refinamento conversacional

Pré-requisitos

Antes de escrever código com o Verdent:

• Visual Studio Code com a extensão Verdent instalada
• Assinatura ativa do Verdent com créditos disponíveis
• Um espaço de trabalho de projeto aberto no VS Code (ou um diretório vazio para estruturação)

Solicitando novos recursos

O Verdent entende solicitações de recursos em linguagem natural sem exigir comandos ou sintaxe especiais. Basta descrever o que você quer na caixa de entrada.

Solicitações básicas de recursos:

Comece com descrições diretas do que você precisa:

Create a UserProfile component that shows the user's avatar image, name as a heading, and email below it. Make the avatar circular.

Add a login form with email and password fields to the authentication page

Build a notification system that displays toast messages for success and error events

O Verdent analisa sua solicitação, examina a estrutura do seu projeto e gera código que corresponde aos seus padrões existentes, incluindo organização de arquivos, convenções de nomenclatura, estilos de importação e práticas de codificação.

Solicitações detalhadas de implementação:

Para mais controle, especifique os requisitos técnicos explicitamente:

Add a dark mode toggle to the settings page using React Context API. Store the theme preference in localStorage and apply CSS variables for light and dark themes across all components.

Create a POST /api/users/register endpoint that validates email format, password strength (min 8 chars, uppercase, number, special char), and checks for duplicate emails before creating the user in the database.

Implement pagination for the blog posts list with 10 posts per page. Add Previous/Next buttons and page number indicators. Update the URL query params (?page=2) and fetch data from /api/posts?page=X&limit=10.

Quanto mais contexto você fornecer, mais alinhada a implementação estará com suas expectativas.

Add a search bar to the navigation

Create a footer component with copyright and links

Add a search feature to the product catalog with filtering by category and price range

Adicionando contexto com @-menções

Faça referência a arquivos ou componentes específicos quando quiser adições de recursos direcionadas:

@auth.js Add password reset functionality to this authentication module

@components/Dashboard.js Add a statistics widget showing user activity for the past 30 days

O símbolo @ seguido de um caminho de arquivo diz ao Verdent para focar em código específico ao implementar sua solicitação. Isso garante que novos recursos se integrem perfeitamente às implementações existentes.

Suporte a linguagens e frameworks

O Verdent funciona com praticamente qualquer linguagem de programação e entende a semântica do código, padrões de sintaxe e frameworks comuns em todos os principais ecossistemas, sem exigir plugins específicos de linguagem.

function UserProfile({ user }) {
  return (
    <div className="profile">
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

<template>
  <div class="profile">
    <h1>{{ user.name }}</h1>
    <p>{{ user.email }}</p>
  </div>
</template>

<script setup>
defineProps(['user']);
</script>

@Component({
  selector: 'user-profile',
  template: `
    <div class="profile">
      <h1>{{ user.name }}</h1>
      <p>{{ user.email }}</p>
    </div>
  `
})
export class UserProfileComponent {
  @Input() user!: User;
}

O Verdent também oferece suporte a scripting de Shell (Bash, Zsh), SQL, HTML/CSS, Markdown, YAML, JSON e linguagens de configuração.

Entendimento de frameworks

Além das linguagens, o Verdent reconhece padrões específicos de frameworks:

Otimizando para linguagens menos comuns:

Para frameworks especializados ou linguagens menos comuns, melhore os resultados ao:

• Fornecer exemplos de código mostrando os padrões que você deseja seguir
• Incluir trechos da base de código existente usando @-menções
• Usar servidores MCP (Model Context Protocol) para injetar contexto específico da linguagem

Geração de código em múltiplos arquivos

O Verdent cria vários arquivos coordenados em uma única solicitação, lidando com importações, dependências e referências entre arquivos automaticamente.

Exemplo:

Create a UserDashboard component with a separate hooks file for data fetching, a styles file, a types file for TypeScript interfaces, and a test file

O Verdent gera:

• components/UserDashboard/UserDashboard.tsx - Componente principal
• components/UserDashboard/useUserData.ts - Hook personalizado
• components/UserDashboard/UserDashboard.module.css - Estilos
• components/UserDashboard/types.ts - Interfaces TypeScript
• components/UserDashboard/UserDashboard.test.tsx - Testes

Todos os arquivos incluem importações e conexões corretas entre eles.

Geração paralela vs. sequencial:

Para arquivos fracamente acoplados (componentes independentes, módulos separados, arquivos de teste paralelos), o Verdent pode usar subagentes para escrever vários arquivos em paralelo, melhorando a velocidade e a eficiência.

Para arquivos fortemente acoplados com interdependências (arquivos que importam uns dos outros, tipos compartilhados, componentes dependentes), o Verdent escreve sequencialmente para garantir o gerenciamento adequado de dependências e importações corretas.

Gerando boilerplate e scaffolding

Geração de código boilerplate

O Verdent gera boilerplate compreendendo os padrões existentes do seu projeto e criando novo código que segue o mesmo estilo e estrutura:

Create a new ProductCard component with props for title, price, and image

Write an Express route handler for user registration with validation

Generate unit tests for the authentication service using Jest

O Verdent analisa sua base de código para combinar com as convenções (estilos de nomenclatura, padrões de importação, estrutura de pastas) e gera boilerplate que se integra perfeitamente, em vez de usar templates genéricos.

Scaffolding de projetos

O Verdent estrutura arquiteturas inteiras de projetos com hierarquias completas de pastas, arquivos de configuração, dependências e código inicial:

Create a new React application with TypeScript, React Router, Context API for state management, and Jest testing setup

O Verdent gera a estrutura completa do projeto, incluindo package.json, tsconfig.json, diretórios de componentes, configuração de roteamento, provedores de contexto, arquivos de teste e configuração de controle de versão (.gitignore, commit inicial).

Boa prática para scaffolding:

Use o Plan Mode ao estruturar projetos. O Verdent irá:

1. Fazer perguntas de esclarecimento sobre preferências (solução de estilização, estrutura de componentes, abordagem de testes)
2. Apresentar um plano detalhado com a estrutura completa de arquivos e o layout de diretórios
3. Permitir que você revise e refine o scaffold antes da criação
4. Gerar o projeto com verificação para garantir que todos os arquivos sejam criados corretamente

Para scaffolding complexo, o Verdent pode usar subagentes para paralelizar tarefas de configuração independentes (instalar dependências, criar arquivos de configuração, configurar esquemas de banco de dados). Ele mantém escritas sequenciais para arquivos interdependentes a fim de preservar as dependências.

Após o scaffolding, o Verdent pode verificar a configuração executando testes iniciais e comandos de build para garantir que a estrutura do projeto funcione corretamente.

Iterando sobre o código gerado

O Verdent usa um fluxo de trabalho conversacional no qual você refina o código gerado por meio de solicitações de acompanhamento em linguagem natural na mesma sessão de chat.

Fluxo básico de iteração:

1. O Verdent gera o código inicial
2. Você revisa a saída
3. Você fornece feedback ou solicita alterações
4. O Verdent atualiza o código com base no seu feedback
5. Repita até ficar satisfeito

Exemplo de iteração:

Initial: Create a login form component

O Verdent gera um formulário básico.

Follow-up: Add email validation and show error messages below each field

O Verdent atualiza o componente com validação.

Follow-up: Style it with Tailwind CSS and add a loading state for the submit button

O Verdent refina a estilização e adiciona comportamento de carregamento.

Ciclos de feedback rápidos:

O Verdent mantém o contexto ao longo da conversa, permitindo que você:

• Solicite alterações incrementais sem repetir o contexto
• Teste o código e relate problemas para que o Verdent corrija
• Faça perguntas do tipo "por quê" sobre escolhas de implementação
• Experimente abordagens diferentes pedindo alternativas

Boas práticas

Veja também