--- type: rule name: limite-linhas description: Nenhum arquivo de código pode ultrapassar 250 linhas scope: global trigger: file_match globs: - "**/*.ts" - "**/*.tsx" - "**/*.vue" - "**/*.css" updatedAt: "2026-06-01" --- # Regra: Limite de 250 Linhas por Arquivo ## Regra Nenhum arquivo `*.vue`, `*.ts`, `*.tsx` ou `*.css` pode ultrapassar **250 linhas**. > Validação automática: `verificar-linhas.sh` ## Estratégias de Decomposição | Situação | Ação | |---|---| | Template longo | Extrair seções como subcomponentes | | CSS extenso | Mover para `.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: `verificar-linhas.sh` - Workflow: `global/workflows/codigo-limpo` (ou `global/workflows/otimizar-codigos`)