Regra: Limite de 250 Linhas por Arquivo

Regra

Nenhum arquivo *.vue, *.ts, *.tsx ou *.css pode ultrapassar 250 linhas.

Validação automática: .agent/verificar-linhas.sh

Estratégias de Decomposição

Situação	Ação
Template longo	Extrair seções como subcomponentes
CSS extenso	Mover para `<nome>.css` co-localizado
`setup()` extenso	Extrair subcomponentes, CSS ou Dispatch Table
Modal/Dialog embutido	Sempre em componente separado (`*Modal.vue`)
Handlers e dispatch	Extrair para `handlers.ts` ou `dispatch.ts`

Divisão em Pasta

Quando um componente precisa de múltiplos sub-arquivos, converter em pasta homônima com index.vue:

# Antes
ComponenteGrande.vue                ← monolítico (+250 linhas)

# Depois
ComponenteGrande/
├── index.vue                       ← orquestração (≤250 linhas)
├── SecaoPrincipal.vue              ← bloco de template extraído
├── SecaoSecundaria.vue             ← outro bloco extraído
├── componenteGrande.mapeadores.ts  ← lógica de eventos
└── ComponenteGrande.css            ← estilos co-localizados

Arquivo	Responsabilidade
`index.vue`	Orquestração: importa e compõe. Sem lógica densa.
`Secao*.vue`	Template isolado. Props + eventos.
`*.mapeadores.ts`	Funções de ação desacopladas.
`*.css`	Estilos co-localizados.

Importações externas não mudam: ComponenteGrande/ resolve para index.vue.

Impacto

Sem esta regra, arquivos crescem silenciosamente até se tornarem intocáveis — ninguém quer revisar ou refatorar um componente de 800 linhas.

Referências

Script: .agent/verificar-linhas.sh
Workflow: .agent/workflows/otimizar-codigos.global.md

2 KiB Raw Blame History