--- title: Escrevendo novo código description: Guia para usar o Verdent para escrever novos recursos, componentes e funcionalidades --- 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. Use descrições concisas para recursos diretos: ``` Add a search bar to the navigation ``` ``` Create a footer component with copyright and links ``` O Verdent faz escolhas de implementação razoáveis com base nos padrões de código já existentes no seu projeto. Para recursos de múltiplos arquivos ou decisões arquiteturais, use o **Plan Mode** para revisar a abordagem antes da execução: **Passo 1:** Mude para o Plan Mode usando o botão "Switch Mode" **Passo 2:** Envie sua solicitação de recurso: ``` Add a search feature to the product catalog with filtering by category and price range ``` **Passo 3:** O Verdent cria um plano detalhado mostrando: - Novos arquivos a criar (componentes de busca, UI de filtro, endpoints de API) - Arquivos existentes a modificar (página de catálogo de produtos, roteamento, gerenciamento de estado) - Dependências a adicionar (se houver) - Etapas de implementação em ordem lógica **Passo 4:** O Verdent pode fazer perguntas de esclarecimento: - A busca deve ser em tempo real ou acionada por botão? - Como lidar com resultados vazios? - Quais opções de ordenação incluir? **Passo 5:** Revise o plano e escolha a próxima ação: - Escolha **Edit** para refinar ainda mais o plano - Escolha **Start Building** para iniciar a execução Essa abordagem garante o alinhamento entre suas expectativas e a implementação do Verdent antes de fazer alterações. Use o Plan Mode quando os recursos afetam vários arquivos ou exigem decisões arquiteturais. Você pode realizar várias rodadas de revisão do plano para refinar a abordagem antes da execução. --- ## 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. Linguagens com resultados excelentes e profundo entendimento de frameworks: - **JavaScript & TypeScript** - React, Vue, Angular, Node.js, Next.js, padrões modernos de async/await, análise de componentes - **Python** - Django, Flask, FastAPI, Pandas, NumPy, notebooks Jupyter, serviços de backend, análise de dados - **Java/Kotlin** - Spring Boot, Hibernate, ecossistema Maven/Gradle, desenvolvimento corporativo ```jsx "React Component" function UserProfile({ user }) { return (

{user.name}

{user.email}

); } ``` ```vue "Vue Component" ``` ```tsx "Angular Component" @Component({ selector: 'user-profile', template: `

{{ user.name }}

{{ user.email }}

` }) export class UserProfileComponent { @Input() user!: User; } ``` Linguagens adicionais com conhecimento abrangente de frameworks: - **C++** - Gerenciamento de memória, otimização de desempenho, programação de sistemas - **Rust** - Padrões de segurança de memória, conceitos de ownership, ecossistema cargo - **Go** - Padrões de concorrência, microsserviços, ferramentas de CLI - **C#** - Ecossistema .NET, padrões LINQ, programação assíncrona - **Ruby** - Apps Rails, scripting - **PHP** - Laravel, WordPress, apps web - **Swift/Objective-C** - Desenvolvimento iOS/macOS 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: | Categoria | Frameworks e padrões | |----------|----------------------| | **Frontend** | React hooks, Redux, Context API, Vue Composition API, injeção de dependência do Angular, server components do Next.js | | **Backend** | Express middleware, Django ORM, microsserviços Spring Boot, endpoints assíncronos FastAPI, Rails Active Record | | **Testes** | Jest, Pytest, JUnit, Mocha/Chai, Cypress, React Testing Library | | **Banco de dados** | Prisma, TypeORM, Sequelize, SQLAlchemy, Hibernate, Mongoose | O Verdent se adapta à sua stack de tecnologia em vez de exigir linguagens ou frameworks específicos. Bases de código bem organizadas, com clara separação de responsabilidades, produzem melhores resultados independentemente da linguagem de programação. **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. Para recursos de múltiplos arquivos, o Verdent gera arquivos em paralelo e mantém a consistência em todas as alterações relacionadas automaticamente. --- ## 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. Use o Plan Mode para revisar o boilerplate candidato antes da geração. O Verdent pode fazer perguntas de esclarecimento sobre a abordagem de estilização, regras de validação ou estratégia de tratamento de erros para garantir que o código gerado corresponda exatamente aos seus requisitos. #### 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 Para mudanças significativas, descreva o que está errado ou o que você quer diferente, em vez de como corrigir. O Verdent pode analisar o problema e propor a melhor solução com base nos padrões do seu projeto. --- ## Boas práticas O Verdent entende diversos níveis de detalhe. Forneça especificações técnicas quando tiver requisitos, ou use descrições gerais e deixe o Verdent fazer escolhas informadas com base nos padrões do seu projeto. Antes de solicitar novos recursos, deixe o Verdent entender sua base de código com perguntas como "Analise o esquema do banco de dados" ou "Explique o fluxo de autenticação". Isso constrói contexto e ajuda o Verdent a fazer sugestões melhores. Revise planos de implementação detalhados antes da execução. O Verdent faz perguntas de esclarecimento e cria abordagens estruturadas. Após gerar o plano, escolha **Edit** para refinar ou **Start Building** para executar, garantindo o alinhamento antes de fazer alterações. Faça referência a arquivos específicos quando quiser que as alterações sejam integradas com código existente. Isso garante que novos recursos se alinhem com as implementações atuais. Para recursos de várias etapas, trabalhe de forma incremental: crie a tabela do banco de dados, depois o endpoint de API e, então, o componente de UI. Isso mantém a clareza e permite verificação em cada etapa. Inclua detalhes sobre escolhas de tecnologia, preferências de design, regras de validação, estratégias de tratamento de erros ou quaisquer outros requisitos importantes para sua implementação. --- ## Veja também Aprenda a explorar e analisar bases de código existentes com o Verdent Gere testes abrangentes e depure problemas com assistência de IA