Pular para o conteúdo principal

Cursor Composer: Edição Multi-Arquivo que Realmente Funciona

A maioria dos usuários do Cursor fica no chat regular. Eles pedem uma função, copiam a saída, colam em um arquivo, repetem. Funciona para coisas pequenas. Mas quando você precisa mudar cinco arquivos para adicionar um recurso, esse fluxo de trabalho desmorona.

O Composer é a resposta do Cursor para isso. É um painel separado onde você descreve o que quer alterado, e o Cursor propõe edições em vários arquivos de uma vez. Você revisa, aceita ou rejeita cada mudança e segue em frente. Sem copiar e colar. Sem troca de contexto.

Este guia cobre fluxos de trabalho reais do fórum do Cursor. Sem linguagem de marketing. Apenas o que funciona.

Visão geral do painel do Composer

Composer vs Chat Regular: A Diferença Real

O chat regular é Q&A. Você pergunta, o Cursor responde. Você ainda é quem move o código para os arquivos.

O Composer é ação. Você descreve o objetivo, o Cursor descobre quais arquivos tocar e o que mudar. Ele apresenta um diff. Você decide o que entra.

RecursoChat RegularComposer
Sugere códigoSimSim
Edita arquivos diretamenteNãoSim
Mudanças multi-arquivoNãoSim
Mostra diff antes de aplicarNãoSim
Checkpoint/rollbackNãoSim
Melhor paraPerguntas, trechos únicosRefatoração, recursos, atualizações em lote

O recurso principal é os checkpoints. O Composer salva um snapshot antes de fazer mudanças. Se a edição der errado, você reverte para o checkpoint em um clique. O chat regular não tem rede de segurança.

Como Abrir o Composer

Pressione Cmd/Ctrl + I ou clique no ícone do Composer na barra lateral esquerda. É um painel separado do chat — não confunda os dois.

Quando Usar o Composer

O Composer brilha quando uma tarefa toca mais de um arquivo. Cenários comuns:

  • Refatoração — renomear uma prop entre componentes, extrair um utilitário compartilhado
  • Trabalho de recurso — adicionar um novo endpoint de API precisa de arquivos de rota, controlador, serviço e teste
  • Atualizações de padrão — mudar de fetch para um apiClient customizado em todos os lugares
  • Mudanças de tipo — atualizar uma interface que se propaga por dez arquivos
  • Limpeza de imports — reorganizar uma estrutura de módulos

Se você está copiando e colando código do chat em mais de dois arquivos, pare. Use o Composer em vez disso.

O Composer Não é para Tudo

Perguntas rápidas, one-liners, ou "explique esta regex" — o chat regular é mais rápido. O Composer tem overhead. Reserve-o para trabalho multi-arquivo.

Fluxo de Trabalho Real 1: Refatoração Cross-Arquivo

Você tem um tipo User em types.ts. Você quer renomear name para fullName porque está adicionando um campo displayName e a nomenclatura agora está confusa.

Isso toca:

  • src/types.ts — a definição do tipo
  • src/components/UserCard.tsx — exibe o nome
  • src/components/UserProfile.tsx — também exibe
  • src/api/users.ts — chamadas de API que recebem/enviam o campo
  • src/lib/validators.ts — schema Zod para validação de usuário

Passo 1: Abra o Composer (Cmd/Ctrl + I).

Passo 2: Descreva a mudança:

Renomeie o campo `name` para `fullName` no tipo User e atualize todos os usos em toda a base de código. Não mude nenhum comportamento — isso é uma renomeação pura.

Passo 3: Revise o diff proposto. O Composer mostra cada arquivo com mudanças destacadas. Verifique que:

  • Apenas name relacionado a usuários é renomeado (não outras props name)
  • A camada de API ainda envia/recebe os dados corretos
  • Nenhuma mudança de lógica se infiltrou

Passo 4: Aceite ou rejeite por arquivo. Se um arquivo parecer errado, rejeite apenas aquele e corrija manualmente.

Verifique o Diff com Cuidado

O Composer às vezes exagera. Ele pode renomear uma prop name em um componente não relacionado se o contexto parecer similar. Sempre escaneie o diff antes de aceitar.

Fluxo de Trabalho Real 2: Adicionando um Recurso em Vários Arquivos

Você quer adicionar "papéis de usuário" ao seu app. Usuários admin veem elementos de UI extras e podem acessar endpoints de API extras.

Arquivos envolvidos:

  • src/types.ts — adicionar role: 'user' | 'admin' ao User
  • src/api/auth.ts — incluir role no payload JWT
  • src/components/Navbar.tsx — mostrar link de admin apenas para admins
  • src/components/AdminPanel.tsx — novo componente
  • src/hooks/useAuth.ts — expor flag isAdmin
  • src/middleware/auth.ts — novo middleware para verificar papel de admin

Passo 1: Abra o Composer.

Passo 2: Dê um plano, não apenas um desejo:

Adicione papéis de usuário ao app:

1. Adicione `role: 'user' | 'admin'` ao tipo User em src/types.ts
2. Atualize a resposta de login em src/api/auth.ts para incluir role no payload JWT
3. Adicione um valor computado `isAdmin` em src/hooks/useAuth.ts
4. Atualize Navbar.tsx para mostrar condicionalmente um link "Admin" quando isAdmin for true
5. Crie src/components/AdminPanel.tsx com um dashboard admin placeholder
6. Crie src/middleware/auth.ts com um middleware requireAdmin que verifica o papel do JWT

Use os padrões existentes na base de código. Siga o mesmo estilo de tratamento de erros dos outros arquivos de API.

Passo 3: O Composer gera um diff multi-arquivo. Revise cada arquivo.

Passo 4: Se o novo AdminPanel.tsx parecer errado, rejeite-o e mantenha o resto. As edições do Composer são granulares.

Peça um Plano Primeiro

Antes de deixar o Composer codificar, peça para ele esboçar o plano. Adicione "Liste os arquivos que você vai mudar e por quê antes de fazer edições." Isso pega mal-entendidos cedo e não custa nada.

Fluxo de Trabalho Real 3: Atualização em Lote de Chamadas de API

Você começou com chamadas fetch brutas espalhadas pelo frontend. Agora você tem um apiClient customizado com headers de auth, tratamento de erros e URL base configurada. Você precisa migrar tudo.

Arquivos: potencialmente dezenas de locais de chamada de API.

Passo 1: Certifique-se de que apiClient existe e está importado corretamente em um arquivo primeiro. O Composer funciona melhor quando tem uma implementação de referência.

Passo 2: Abra o Composer e delimite a tarefa:

Substitua todas as chamadas `fetch` brutas em src/ pelo `apiClient` de src/lib/apiClient.ts.

Regras:
- Use os métodos existentes `apiClient.get`, `.post`, `.put`, `.delete`
- Remova o tratamento manual de JSON.stringify e response.json() — o apiClient faz isso
- Mantenha os mesmos caminhos de endpoint
- Preserve quaisquer headers customizados que já não estejam no apiClient

Comece com o diretório src/api/, depois src/hooks/ se necessário.

Passo 3: Revise em lotes. Não aceite 20 arquivos de uma vez sem olhar. O Composer é bom, mas não perfeito.

Passo 4: Execute sua suíte de testes após aceitar. Erros de tipo e comportamento em runtime podem divergir mesmo quando o diff parece limpo.

Não Migre Tudo de Uma Vez

Se você tem 50+ arquivos, divida em pedaços. "Migre src/api/ primeiro." Depois "Migre src/hooks/ em seguida." Lotes grandes são mais difíceis de revisar e mais fáceis de estragar.

Composer + Modo Agente: A Combinação Poderosa

O Composer e o modo Agente resolvem problemas diferentes. O Composer é para edições multi-arquivo direcionadas onde você sabe o que quer. O modo Agente é para tarefas abertas onde a IA precisa explorar, executar comandos e descobrir as coisas.

Mas eles trabalham juntos.

Padrão: Agente Planeja, Composer Executa

Use o modo Agente para descobrir o escopo de uma mudança:

Quero migrar de React Context para Zustand para gerenciamento de estado. Liste todos os arquivos que usam AuthContext e quais mudanças cada um precisa.

O modo Agente busca na base de código e te dá a análise. Depois você abre o Composer e executa as mudanças arquivo por arquivo, com revisão completa de diff.

Padrão: Composer para Refatoração, Agente para Verificação

Após uma grande refatoração no Composer, mude para o modo Agente:

Execute a suíte de testes e corrija quaisquer imports quebrados ou erros de tipo causados pela refatoração recente.

O modo Agente lida com a limpeza enquanto você revisa as mudanças do Composer.

Modo Agente Pode Usar o Composer

No modo Agente, o Cursor às vezes abre o Composer internamente para edições multi-arquivo. Você não controla isso diretamente, mas verá diffs no estilo do Composer aparecerem durante sessões de Agente. Revise-os da mesma forma.

Erros Comuns e Como Evitá-los

1. Prompts Vagos

Ruim: "Melhore a autenticação."

Bom: "Adicione um campo role ao tipo User, atualize a API de login para incluí-lo no JWT, e mostre um link de admin na Navbar para usuários admin."

Especificidade reduz surpresas.

2. Aceitar Sem Revisar

Os diffs do Composer parecem limpos, mas ele pode:

  • Deletar um comentário que você queria manter
  • Mudar a formatação em linhas não relacionadas
  • Perder um caso extremo em um arquivo

Sempre escaneie o diff. Leva 30 segundos e evita retrabalho.

3. Muitos Arquivos de Uma Vez

O Composer lida bem com 10-15 arquivos. Além disso, a janela de contexto fica sobrecarregada e a qualidade cai. Divida tarefas grandes em pedaços lógicos.

4. Não Usar Checkpoints

Antes de começar uma grande sessão no Composer, aperte o botão de checkpoint. É um clique. Se a sessão der errado, a reversão é um clique de volta. Não há desculpa para pular isso.

Checkpoints Não São Commits do Git

Os checkpoints do Composer vivem dentro do Cursor. Eles não substituem o git. Faça commit no git antes de grandes trabalhos no Composer também. Use ambas as redes de segurança.

5. Ignorar Erros de Tipo Após Mudanças

As edições do Composer compilam talvez 90% das vezes. Os outros 10% introduzem incompatibilidades sutis de tipo, especialmente ao renomear ou mudar interfaces. Execute tsc ou seu linter após aceitar mudanças.

Referência Rápida

AçãoAtalho
Abrir ComposerCmd/Ctrl + I
Aceitar mudançaCmd/Ctrl + Y
Rejeitar mudançaCmd/Ctrl + N
Criar checkpointClique no ícone de checkpoint no painel do Composer
Reverter para checkpointClique no ícone de reverter ao lado do checkpoint

Resumo

  • Use o Composer para edições multi-arquivo. Use o chat regular para perguntas.
  • Descreva exatamente o que você quer. Inclua caminhos de arquivo e restrições.
  • Revise cada diff antes de aceitar.
  • Crie checkpoints antes de sessões grandes.
  • Divida tarefas grandes em pedaços.
  • Combine Composer com modo Agente: Agente explora, Composer executa.

O Composer não é mágica. É uma ferramenta que remove o imposto de copiar e colar do trabalho multi-arquivo. Usado corretamente, economiza horas. Usado descuidadamente, cria trabalho de limpeza. A diferença está na etapa de revisão — não a pule.