🎨 Angular Component Organizer

Extensão do VS Code que organiza automaticamente componentes Angular de forma semelhante ao CodeMaid do Visual Studio (.NET).

✨ Funcionalidades

🔄 Organiza automaticamente membros de classes Angular (@Component e @Directive)
📋 Reordena membros seguindo boas práticas e ordem oficial do Angular
💬 Preserva comentários JSDoc, de linha e de bloco
🎯 Preserva decorators todos os decorators Angular são mantidos
📐 Preserva formatação mantém indentação e estilo original
⚡ Rápido e confiável usa ts-morph para análise AST precisa
🎨 Status bar indica quando o arquivo pode ser organizado
⌨️ Atalhos múltiplas formas de executar o comando

📋 Ordem de Membros

A extensão organiza os membros seguindo esta ordem padronizada:

1. @Input()                         ← Decorated fields no topo
2. @Output()
3. @ViewChild / @ViewChildren
4. @ContentChild / @ContentChildren
5. static fields                    ← Campos estáticos
6. public instance fields           ← Campos de instância (public → protected → private)
7. protected instance fields
8. private instance fields
9. constructor                      ← Construtor sempre aqui
10. ngOnChanges                     ← Lifecycle hooks na ordem oficial
11. ngOnInit
12. ngDoCheck
13. ngAfterContentInit
14. ngAfterContentChecked
15. ngAfterViewInit
16. ngAfterViewChecked
17. ngOnDestroy
18. public methods                  ← Métodos (public → protected → private)
19. protected methods
20. private methods
21. public getters/setters          ← Accessors (public → protected → private)
22. protected getters/setters
23. private getters/setters

🚀 Início Rápido

📦 Instalação

# 1. Clone ou baixe o projeto
# 2. Instale dependências
npm install

# 3. Compile
npm run compile

# 4. Execute (F5 no VS Code)
code .
# Pressione F5

Ou use o script automatizado:

.\setup.ps1

🎯 Uso

Método 1: Atalho de Teclado

Windows/Linux: Ctrl+Shift+O
Mac: Cmd+Shift+O

Método 2: Command Palette

Pressione Ctrl+Shift+P (ou Cmd+Shift+P no Mac)
Digite "Organize Angular Component"
Pressione Enter

Método 3: Menu Contextual

Clique com botão direito no editor
Selecione "Organize Angular Component"

Método 4: Status Bar

Observe o ícone na barra de status (canto inferior direito)
Clique no ícone para organizar

📸 Exemplo Visual

ANTES da Organização ❌

@Component({
  selector: "app-user",
  template: "...",
})
export class UserComponent implements OnInit, OnDestroy {
  // ❌ Desorganizado - membros em ordem aleatória

  private userData: any;
  ngOnDestroy(): void {}
  @Output() userUpdated = new EventEmitter();
  public name: string = "";
  constructor() {}
  @Input() userId: string = "";
  ngOnInit(): void {}
  private loadUser(): void {}
  @ViewChild("form") form?: ElementRef;
  public saveUser(): void {}
}

DEPOIS da Organização ✅

@Component({
  selector: "app-user",
  template: "...",
})
export class UserComponent implements OnInit, OnDestroy {
  // ✅ Organizado - seguindo boas práticas

  @Input() userId: string = "";
  @Output() userUpdated = new EventEmitter();
  @ViewChild("form") form?: ElementRef;

  public name: string = "";
  private userData: any;

  constructor() {}

  ngOnInit(): void {}
  ngOnDestroy(): void {}

  public saveUser(): void {}
  private loadUser(): void {}
}

📂 Estrutura do Projeto

angular-reordering/
├── 📄 README.md                    ← Você está aqui
├── 📄 QUICKSTART.md                ← Início rápido
├── 📄 USAGE.md                     ← Guia de uso detalhado
├── 📄 DEVELOPMENT.md               ← Guia para desenvolvedores
├── 📄 CHANGELOG.md                 ← Histórico de versões
├── 📄 PROJECT_SUMMARY.md           ← Resumo completo do projeto
│
├── 📄 package.json                 ← Configuração da extensão
├── 📄 tsconfig.json                ← Configuração TypeScript
│
├── 📄 example-before.component.ts  ← Exemplo ANTES
├── 📄 example-after.component.ts   ← Exemplo DEPOIS
│
├── 📁 src/                         ← Código fonte
│   ├── 📄 extension.ts             ← Ponto de entrada
│   ├── 📁 commands/                ← Comandos
│   ├── 📁 analyzer/                ← Detecção Angular
│   ├── 📁 organizer/               ← Reorganização
│   ├── 📁 rules/                   ← Regras de ordenação
│   └── 📁 utils/                   ← Utilitários
│
└── 📁 .vscode/                     ← Configurações VS Code
    ├── launch.json
    ├── tasks.json
    └── settings.json

🎓 Documentação

📖 QUICKSTART.md - Instalação e primeiro uso
📚 USAGE.md - Guia completo de uso com exemplos
🛠️ DEVELOPMENT.md - Arquitetura e desenvolvimento
📝 CHANGELOG.md - Histórico de versões
📊 PROJECT_SUMMARY.md - Resumo técnico completo

⚙️ Requisitos

VS Code: 1.85.0 ou superior
Node.js: 20.0 ou superior
TypeScript: 5.3 ou superior
Arquivo: TypeScript (.ts) com classe Angular (@Component ou @Directive)

⚙️ Configurações

A extensão oferece as seguintes configurações customizáveis:

`angular-reordering.organizeOnSave`

Tipo: boolean
Padrão: false
Descrição: Organiza automaticamente componentes Angular ao salvar o arquivo

`angular-reordering.showStatusBar`

Tipo: boolean
Padrão: true
Descrição: Mostra indicador na barra de status

Como configurar:

Abra as configurações do VS Code (Ctrl+,)
Busque por "Angular Reordering"
Habilite/desabilite as opções conforme necessário

Ou edite diretamente o settings.json:

{
  "angular-reordering.organizeOnSave": true,
  "angular-reordering.showStatusBar": true
}

🔧 Tecnologias

ts-morph - Análise e manipulação de AST TypeScript
VS Code Extension API - Integração com editor
TypeScript - Linguagem principal
Node.js - Runtime

🎯 Características Técnicas

✅ TypeScript Strict Mode - Tipos rigorosos
✅ Análise AST - Não usa regex
✅ Preservação Total - Comentários, decorators e formatação
✅ Detecção Inteligente - Sabe quando já está organizado
✅ Multi-classe - Suporta múltiplas classes no mesmo arquivo
✅ Arquitetura Modular - Fácil de estender
✅ Singleton Pattern - Performance otimizada
✅ Error Handling - Tratamento robusto de erros

🐛 Solução de Problemas

Nada acontece ao executar o comando

✅ Verifique se o arquivo é .ts
✅ Verifique se contém @Component ou @Directive
✅ Verifique se a extensão está ativa

A organização alterou meu código

🔄 Pressione Ctrl+Z para desfazer
📧 Reporte o bug com exemplo do código

Extensão não compila

# Reinstale dependências
Remove-Item -Recurse -Force node_modules
npm install
npm run compile

🤝 Contribuindo

Contribuições são bem-vindas! Para contribuir:

Fork o projeto
Crie uma branch para sua feature (git checkout -b feature/MinhaFeature)
Commit suas mudanças (git commit -m 'Adiciona MinhaFeature')
Push para a branch (git push origin feature/MinhaFeature)
Abra um Pull Request

📝 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

👨‍💻 Autor

Desenvolvido com ❤️ para a comunidade Angular

🙏 Agradecimentos

Inspirado no CodeMaid do Visual Studio
Baseado nas boas práticas do Angular Style Guide
Powered by ts-morph

📞 Suporte

🐛 Issues: GitHub Issues
💡 Features: Pull Requests são bem-vindos
📖 Documentação: Veja os arquivos .md no repositório

⭐ Se você gostou deste projeto, dê uma estrela no GitHub!

🚀 Comece agora: npm install && npm run compile && F5

Angular Component Organizer

diogo-tools