Angular Geliştirmede Cursor Kuralları: AI Destekli Kodlama İçin En İyi Uygulamalar

Angular projelerinde geliştiriciler sıklıkla karşılaştıkları bir paradoksu fark etmekte zorlanır: Uygulama derlenir, sayfalar yüklenir ve her şey çalışır gibi görünür — ta ki performans sorunları ortaya çıkana kadar. Cursor gibi AI destekli kodlama araçlarıyla çalışırkenyse bu durum daha da karmaşık hale gelebiliyor. Çünkü AI, Angular'ın modern standartlarından çok önceki versiyonlarına dayalı olarak kod önerilerinde bulunabiliyor. Peki, bu sorunu nasıl çözebilirsiniz? Cursor Rules dosyası, projelerinizin AI asistanına Angular’daki en iyi uygulamaları öğretmek için mükemmel bir çözümdür.

Cursor Rules ile Angular Projelerinde AI’nin Öğrenme Sürecini Yönlendirin

Cursor, projelerinizdeki yapay zeka asistanına rehberlik etmek için `.cursorrules` adında bir dosya kullanır. Bu dosya, proje kök dizinine yerleştirildiğinde AI’nın kod önerilerini projelerinizin gereksinimlerine göre özelleştirir. Ayrıca, büyük projeler için `.cursor/rules/` klasöründe modüler .mdc dosyaları oluşturmanız önerilir. Örneğin, bir Nx monorepo yapısında yer alan farklı uygulamaların ve kütüphanelerin ihtiyaçlarını ayrı ayrı tanımlayabilirsiniz.

Böylece, sunucu tarafı renderlama yapan bir projenin kuralları, sadece API olarak kullanılmak üzere tasarlanmış bir kütüphanenin kurallarıyla karışmaz. Örneğin:

• `angular-core.mdc`: Signals, standalone bileşenler ve değişim algılama gibi core konular
• `angular-forms.mdc`: Tip güvenli formlar ve doğrulayıcılar
• `angular-rxjs.mdc`: Pipe operatörleri ve abonelik yönetimi
• `angular-routing.mdc`: Tembel yükleme, koruyucular ve çözümleyiciler
• `angular-testing.mdc`: Test bileşenleri ve harness’ler

Bu yapı, AI’nın her dosya türüne özel kuralları otomatik olarak uygulamasına olanak tanır.

Kural 1: Strict Typing — State için Signals, Formlar için Tip Güvenliği

AI tarafından üretilen en yaygın hatalardan biri, tip güvenliğinin ihmal edilmesidir. Cursor, genellikle any tipiyle oluşan formlar veya state yönetimi önerir. Örneğin:

form = new FormGroup({
  email: new FormControl(''),
  age: new FormControl(0)
});

Bu kodda form.value.email any tipi olarak tanımlanır ve form.get('age') AbstractControl | null döndürür. Bu durumda, template’de form.value.emial gibi bir yazım hatası bile derlenebilir ve üretimde sorunlara yol açabilir.

Modern Angular projelerinde state yönetimi için Signals kullanılmalıdır. Signals, değişim algılama sürecini optimize eder ve template’lerin sadece gerekli verilerle güncellenmesini sağlar. Ayrıca, reactive formlar için `FormBuilder.nonNullable` kullanılarak tip güvenliği artırılabilir. Örneğin:

form = this.fb.group({
  email: this.fb.control('', [Validators.required, Validators.email]),
  age: this.fb.control(0, [Validators.min(0)]),
});

Bu şekilde, form.value tamamen tip güvenliğine sahiptir ve template’de yapılan hatalar derleme aşamasında yakalanır. Ayrıca, state yönetimi için signal<T>() ve computed() kullanılarak performans artışı sağlanır.

Kural 2: Standalone Bileşenler — Modüllerin Gereksiz Yükünden Kurtulun

Angular 16’dan önce yapılan projelerde, her bileşenin bir modüle ihtiyacı vardı. Bu modüller, CommonModule, FormsModule ve diğerlerini içerebilir ve projeyi gereksiz yere şişirebilirdi. Cursor gibi araçlar, hala bu eski yapıya dayalı kod önerilerinde bulunabiliyor.

Angular 17 ve sonrasında standalone bileşenler varsayılan hale geldi. Bu sayede, bileşenlerinizin bağımlılıklarını doğrudan import edebilir ve modül karmaşasından kurtulabilirsiniz. Örneğin:

@Component({
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, MatInputModule],
  template: `...`
})
export class ProfileComponent { ... }

Bu yapı, hem projenizin daha temiz olmasını sağlar hem de bağımlılıkların açıkça tanımlanmasına olanak tanır. Ayrıca, bootstrapApplication kullanılarak uygulama başlatma süreci de basitleştirilebilir.

Kural 3: RxJS’de Abonelik Yönetimi ve Pipe Optimizasyonu

Angular projelerinde RxJS kullanırken en sık yapılan hatalardan biri, abonelikleri doğru şekilde yönetmemektir. Cursor, genellikle ngOnInit içinde oluşturulan abonelikleri otomatik olarak temizlemez. Bu durum, uzun süreli aboneliklerin bellek sızıntılarına neden olabilir.

Modern Angular projelerinde, `takeUntilDestroyed()` operatörü kullanılarak abonelikler otomatik olarak temizlenmelidir. Ayrıca, pipe operatörlerinin doğru şekilde kullanılması, uygulamanın performansını önemli ölçüde artırabilir. Örneğin:

this.api.getUser().pipe(
  takeUntilDestroyed(),
  map(user => user.address?.city?.toUpperCase() ?? '')
).subscribe(city => this.city.set(city));

Bu şekilde, hem bellek yönetimi iyileştirilir hem de gereksiz yeniden render işlemleri önlenir.

Cursor Rules Dosyanızı Oluşturun

Angular projelerinizde AI destekli kodlama sürecini optimize etmek için aşağıdaki .cursorrules dosyasını kullanabilirsiniz:

# Angular Rules

## Angular Sürüm ve Yapılandırmalar
- Angular 17+
- TypeScript strict mode aktif
- Standalone bileşenler kullanın
- Signals ve computed kullanın

## Form ve State Yönetimi
- Tip güvenli formlar için `FormBuilder.nonNullable` kullanın
- State yönetimi için `signal<T>()` ve `computed()` kullanın
- RxJS aboneliklerini `takeUntilDestroyed()` ile yönetin

## Bileşen ve Modüller
- Tüm yeni bileşenler `standalone: true` olmalı
- Modüller yerine standalone bileşenler kullanın
- Gereksiz modül importlarından kaçının

Bu kurallar sayesinde, AI destekli kodlama araçlarının Angular projelerinizde daha doğru ve performans odaklı öneriler sunmasını sağlayabilirsiniz. Gelecekte Angular’ın gelişen özelliklerini takip ederek, projelerinizi daha da optimize hale getirebilirsiniz.