60 lines
1.7 KiB
Markdown
60 lines
1.7 KiB
Markdown
# Regra: Limite de Linhas em Arquivos Vue
|
|
|
|
## 🎯 Regra
|
|
|
|
**Nenhum arquivo `*.vue` deve ultrapassar 250 linhas.**
|
|
|
|
---
|
|
|
|
## Motivação
|
|
|
|
Arquivos Vue longos acumulam múltiplas responsabilidades:
|
|
|
|
- template, lógica e estilo no mesmo arquivo
|
|
- componentes internos não reutilizáveis
|
|
- dificuldade de teste e manutenção
|
|
|
|
O limite de 250 linhas é uma fronteira de manutenibilidade, não apenas de estética.
|
|
|
|
---
|
|
|
|
## Aplicação automática
|
|
|
|
O script `scripts/check-vue-linhas.sh` valida este limite em todo `pnpm run build`.
|
|
Arquivos legados em processo de refatoração estão listados como **isentos temporários** dentro do script.
|
|
|
|
---
|
|
|
|
## Obrigações do agente
|
|
|
|
### Antes de criar um novo arquivo Vue
|
|
|
|
- Estimar o tamanho do componente
|
|
- Se a estimativa ultrapassar 250 linhas, **quebrar em subcomponentes imediatamente**
|
|
|
|
### Ao editar um arquivo Vue existente
|
|
|
|
- Verificar o total de linhas atual antes de adicionar código
|
|
- Se a edição levar o arquivo acima de 250 linhas, propor extração de subcomponente
|
|
|
|
### Ao identificar um arquivo isento
|
|
|
|
- Sinalizar ao operador que o arquivo é legado e deve ser refatorado
|
|
- Não adicionar mais linhas a arquivos isentos sem refatorar algo equivalente
|
|
|
|
---
|
|
|
|
## Estratégias de extração obrigatórias
|
|
|
|
Quando um arquivo se aproximar do limite:
|
|
|
|
| Situação | Ação |
|
|
|---|---|
|
|
| Template longo | Extrair seções como `<NomeSecao />` próprio componente |
|
|
| CSS extenso | Mover para arquivo `.css` co-localizado e importar |
|
|
| Setup() > 100 linhas | Extrair lógica para composable `use*.ts` co-localizado |
|
|
| Modal/Dialog embutido | Sempre em componente separado (`*Modal.vue`) |
|
|
|
|
---
|
|
|
|
> Não existem isentos. Todos os arquivos Vue da biblioteca respeitam o limite de 250 linhas.
|