Angular Sentinel - One Standard. One Way. Angular Done Right. - AI-powered guardian of official Angular guidelines - VS Code Extension

🚀 205 reglas profesionales organizadas jerárquicamente para Angular 17+ con IA integrada

Extensión profesional de VS Code enfocada en Angular 17+ con soporte completo para:

• ⚡ Nueva sintaxis de control flow (@if, @for, @switch, @defer)
• 🎛️ Signals y computed values
• 📦 Standalone components
• 💉 inject() function
• 🔥 Auto-migración de sintaxis legacy

Valida tu código Angular en tiempo real, proporciona quick fixes automáticos y detecta sintaxis deprecada.

✨ Características Principales

🔍 Diagnósticos Inline en Tiempo Real

Sugerencias mientras escribes código, subrayado de problemas directamente en el editor:

export class UserComponent {
  count = 0;  // ~~~~ ⚠️ Usar signal en lugar de variable primitiva
              //      💡 Quick Fix disponible
  
  ngOnInit() {
    this.data$.subscribe(...);  // ~~~~ 🚫 Memory leak: suscripción sin takeUntil
  }
}

🤖 Integración con IA (GitHub Copilot Chat)

Chatea con el experto de Angular directamente en VS Code:

👤: @angular-sentinel analiza este componente

🤖 Angular Sentinel:
⚠️ Encontré 3 issues que puedes mejorar:

1. 🚫 Memory leak en línea 25
   Suscripción sin takeUntil puede causar memory leak...
   [🔧 Aplicar Fix]

2. ⚠️ Variables sin signals en línea 15
   ...

🔧 Quick Fixes Automáticos

Un click para aplicar correcciones:

• ✅ Convertir variables a signals
• ✅ Agregar takeUntil pattern
• ✅ Migrar a inject() function
• ✅ Aplicar OnPush change detection
• ✅ Cambiar mutaciones por operaciones inmutables
• ✅ Y más...

💡 Hover con Explicaciones Detalladas

Pasa el mouse sobre cualquier issue para ver:

• ❌ Código incorrecto (antipattern)
• ✅ Código correcto (good example)
• 🔧 Pasos para corregirlo
• 📚 Enlaces a documentación

📚 205 Reglas en 7 Categorías Jerárquicas

🅰️ Angular (74 reglas en 10 subcategorías)

• Naming: Convenciones de nombres (file-naming, kebab-case, spec files)
• Structure: Estructura de proyecto (src directory, features organization)
• Components: Componentes (lifecycle hooks, event handlers, OnPush)
• Injection: Inyección de dependencias (prefer inject() function)
• Forms: Formularios (Reactive Forms, Typed Forms, Validators)
• Templates: Templates (control flow @if/@for, bindings, async pipe)
• Directives: Directivas personalizadas (naming, selectors)
• State: State management (Signals, computed, effects, NgRx patterns)
• Advanced: Angular avanzado (@defer, ViewChild, standalone components)
• Migration: Migración Angular 17 (*ngIf→@if, *ngFor→@for)

📘 TypeScript (28 reglas en 2 subcategorías)

• Patterns: SOLID + Design Patterns (Single Responsibility, Strategy, Repository, Facade)
• Advanced: TypeScript avanzado (Generics, Mapped Types, Conditional Types, Type Guards)

🎨 Styling (39 reglas en 4 subcategorías)

• Architecture: Arquitectura CSS (BEM, SMACSS, variables)
• Performance: Performance CSS (minimize repaints, efficient selectors)
• Responsive: Diseño responsive (media queries, mobile-first)
• Quality: Calidad CSS (naming, !important, z-index scale)

🧪 Testing (34 reglas en 3 subcategorías)

• Structure: Estructura de tests (AAA pattern, naming, file location)
• Quality: Calidad de tests (assertions, mocking, coverage >80%)
• Angular: Testing Angular (TestBed, ComponentFixture, async operations)

♿ Accessibility (15 reglas)

• ARIA attributes, semantic HTML
• Keyboard navigation, focus management
• Alt text, form labels, color contrast

⚡ Performance (12 reglas en 2 subcategorías)

• Optimization: Lazy loading, OnPush, trackBy, Signals vs Observables
• RxJS: async pipe, takeUntil pattern, shareReplay, error handling

🔒 Security (3 reglas)

• Sanitización (avoid innerHTML, sanitize URLs)
• HTTP security (interceptors, CSRF tokens)

🚀 Instalación

Desde VS Code Marketplace

1. Abre VS Code
2. Ve a Extensions (Ctrl+Shift+X)
3. Busca "Angular Sentinel - One Standard. One Way. Angular Done Right. - AI-powered guardian of official Angular guidelines"
4. Click en "Install"

Desde VSIX

code --install-extension angular-sentinel-1.0.0.vsix

📖 Uso

Análisis Automático

La extensión analiza automáticamente mientras escribes. Los problemas aparecen:

• 🚫 Subrayado rojo: Errores críticos
• ⚠️ Subrayado amarillo: Advertencias
• ℹ️ Subrayado azul: Sugerencias

Comandos Disponibles

Abre el Command Palette (Ctrl+Shift+P):

• Angular Sentinel: Analizar Archivo Actual
• Angular Sentinel: Analizar Proyecto Completo (Próximamente)
• Angular Sentinel: Ver Guía de Estándares
• Angular Sentinel: Corregir Todos los Issues
• Angular Sentinel: Mostrar Arquitectura Detectada (Próximamente)

Chat con IA

En GitHub Copilot Chat o VS Code Chat:

@angular-sentinel /analizar          - Analiza el archivo actual
@angular-sentinel /explicar signals  - Explica un concepto
@angular-sentinel /sugerir          - Sugiere mejoras
@angular-sentinel /arquitectura     - Analiza arquitectura

Quick Fixes

Cuando veas una bombilla 💡 o subrayado:

1. Click en el código subrayado
2. Presiona Ctrl+. (Quick Fix)
3. Selecciona la corrección
4. ✅ ¡Listo!

⚙️ Configuración

Ajustes Disponibles

{
  // Habilitar/deshabilitar diagnósticos inline
  "angularBP.enableInlineDiagnostics": true,
  
  // Mostrar errores críticos
  "angularBP.severity.error": true,
  
  // Mostrar advertencias
  "angularBP.severity.warning": true,
  
  // Mostrar sugerencias informativas
  "angularBP.severity.info": true,
  
  // Auto-fix al guardar (experimental)
  "angularBP.autoFixOnSave": false,
  
  // Patrones de archivos a excluir
  "angularBP.excludePatterns": [
    "**/node_modules/**",
    "**/dist/**",
    "**/*.spec.ts"
  ]
}

Atajos de Teclado Recomendados

{
  "key": "ctrl+alt+a",
  "command": "angular-sentinel.analyzeFile"
},
{
  "key": "ctrl+alt+f",
  "command": "angular-sentinel.fixAll"
}

📊 Ejemplos

Antes

// ❌ Multiple issues
export class UserComponent {
  users = [];  // Variable sin signal
  
  constructor(private http: HttpClient) {}  // Constructor injection
  
  ngOnInit() {
    this.http.get('/api/users').subscribe(users => {  // Memory leak + sin error handling
      this.users.push(...users);  // Mutación directa
    });
  }
}

Después (con Quick Fixes)

// ✅ Best practices aplicadas
export class UserComponent {
  private userService = inject(UserService);  // inject() function
  users = signal<User[]>([]);  // Signal
  
  ngOnInit() {
    this.userService.getUsers().pipe(
      takeUntil(this.destroy$),  // Memory leak prevention
      catchError(err => {  // Error handling
        console.error(err);
        return of([]);
      })
    ).subscribe(users => {
      this.users.set([...this.users(), ...users]);  // Inmutable
    });
  }
}

🎯 Arquitecturas Soportadas

La extensión funciona con cualquier arquitectura Angular:

• ✅ Standalone Apps
• ✅ Modular Apps (NgModules)
• ✅ Monorepo (Nx, Angular CLI)
• ✅ Micro-frontends
• ✅ Clean Architecture
• ✅ Hexagonal Architecture
• ✅ Feature-based structure

🤝 Contribuir

¿Encontraste un bug o quieres agregar una regla?

1. Fork el repositorio
2. Crea una branch (git checkout -b feature/nueva-regla)
3. Commit tus cambios (git commit -m 'Agregar nueva regla')
4. Push (git push origin feature/nueva-regla)
5. Abre un Pull Request

📄 Licencia

MIT

🌟 Créditos

Creado con ❤️ para la comunidad Angular

Basado en:

• Angular Style Guide
• RxJS Best Practices
• SOLID Principles

¿Preguntas o sugerencias? Abre un issue en GitHub

¿Te gusta? ⭐ Dale una estrella al repo