Angular Projelerinde Cursor IDE Kuralları: Gelişmiş Yapay Zeka Kodlama Stratejileri

Bu yazı, “Cursor IDE Kurallarında Ustalık: Yapay Zekâ ile Daha Akıllı Kodlama İçin En İyi Yöntemler” rehberinin devamı niteliğindedir ve Angular projelerinde yapay zekâ destekli kural yazımına odaklanır.

Cursor IDE Kuralları Nedir?

Cursor IDE kuralları, yapay zekâ destekli kod editörünün kod üretim sürecini yönlendiren kalıcı yönergelerdir. Bu kurallar, Cursor AI’ya projenizin mimarisi, kodlama standartları, kullanılan teknolojiler ve ekip tercihleri hakkında bilgi verir.

Angular projelerinde bu kurallar özellikle kritik önem taşır çünkü:

• Framework Spesifik Patterns: Angular’ın özel yapıları (components, services, modules) için doğru rehberlik sağlar.

• Type Safety: TypeScript’in güçlü tip sistemiyle uyumlu kod üretimi sağlar.

• Performance Optimization: Angular performans best practice’lerini otomatik olarak uygular.

• Consistency: Ekip genelinde tutarlı bir kod yapısı oluşturur.

Neden Angular Projeleri İçin Özel Kurallar?

Angular, diğer frontend framework’lerinden farklı olarak “opinionated” bir yapıya sahiptir. Bu nedenle Cursor AI’nın Angular projelerinde etkili çalışabilmesi için framework’ün özel gereksinimlerini anlaması gerekir:

1. Dependency Injection (DI): Angular’ın servis tabanlı yapısının doğru uygulanması

2. Change Detection: Performans için uygun stratejilerin seçilmesi

3. RxJS Integration: Reactive programlama mantığının korunması

4. Module System: Lazy loading ve feature module yapılarının desteklenmesi

5. Form Handling: Reactive ve template-driven form yönetimi farklarının anlaşılması

Angular Projelerinde Kural Yapısı

1. Modüler Kural Organizasyonu

Angular projelerinde kuralları modüller halinde kategorize etmek, Cursor AI’nın farklı dosya türleri için uygun rehberlik sağlamasına yardımcı olur:

.cursor/rules/
├── component-creation.mdc      # Bileşen oluşturma kuralları
├── service-patterns.mdc        # Servis geliştirme kuralları
├── form-handling.mdc           # Form yönetimi kuralları
├── routing-navigation.mdc      # Routing ve navigasyon kuralları
├── state-management.mdc        # State yönetimi kuralları
├── testing-patterns.mdc        # Test yazma kuralları
├── performance-optimization.mdc # Performans optimizasyonu kuralları
└── accessibility.mdc           # Erişilebilirlik kuralları

Kural Dosyası Yapısı

Her .mdc dosyası aşağıdaki şablonu takip eder:

---
description: Kural açıklaması
globs: ["**/*.component.ts"]  # Hangi dosyalara uygulanacağı
alwaysApply: true/false        # Her zaman uygulanıp uygulanmayacağı
---

# Kural Başlığı

## Açıklama
Kuralın ne yaptığı ve neden gerekli olduğu

## Örnekler
Kod örnekleri ve kullanım senaryoları

## Best Practices
En iyi uygulamalar ve dikkat edilmesi gerekenler

2. Proje-Spesifik Kural Örneği: E-Ticaret Uygulaması

Gerçek dünyada, kurallar proje türüne göre özelleştirilmelidir. Örneğin bir e-ticaret projesi için:

---
description: Product Components Creation Rules
alwaysApply: true
---

# Product Components Creation Rules

## Core Principles

### 1. Component Architecture
- **Standalone Components**: Tüm product bileşenleri standalone olmalı.
- **Proper Imports**: Yalnızca gerekli modüller import edilmeli.
- **Translation Support**: Her bileşende `TranslatePipe` kullanılmalı.
- **Type Safety**: Input ve output property’ler strict tipli olmalı.

### 2. Naming Conventions
- **Selector**: `app-product-[component-name]`
- **File**: Angular naming convention’larına uygun olmalı.
- **Class**: `Product[ComponentName]Component` formatı kullanılmalı.

Angular-Spesifik Kural Kategorileri

1. Bileşen Oluşturma Kuralları

Angular bileşenleri, uygulamanın temel yapı taşlarıdır. Cursor AI bu kurallarla bileşenleri tutarlı ve optimize şekilde oluşturur.

import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';

@Component({
  selector: 'app-product-[component-name]',
  standalone: true,
  imports: [CommonModule, TranslateModule],
  templateUrl: './[component-name].component.html',
  styleUrls: ['./[component-name].component.scss']
})
export class Product[ComponentName]Component implements OnInit, OnDestroy {
  @Input() property: string = '';
  @Output() event = new EventEmitter<string>();

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

Best Practices:

• Bileşen isimleri açıklayıcı olmalı.

• OnPush change detection kullanılmalı.

• Gereksiz importlardan kaçınılmalı.

2. Servis Geliştirme Kuralları

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ProductService {
  private readonly apiUrl = '/api/v1';

  constructor(private http: HttpClient) {}

  getData(): Observable<Product[]> {
    return this.http.get<Product[]>(`${this.apiUrl}/products`);
  }
}

Kurallar:

• @Injectable zorunludur.

• Tüm HTTP işlemleri Observable döndürmelidir.

• pipe(map(), catchError()) gibi RxJS operatörleri kullanılmalıdır.

3. Form Yönetimi Kuralları

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class RegisterFormComponent {
  form: FormGroup;
  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(8)]]
    });
  }

  submit() {
    if (this.form.valid) {
      // handle submit
    }
  }
}

Best Practices:

• Reactive forms kullanılmalı.

• Custom validator’lar oluşturulmalı.

• Hata mesajları translate key üzerinden gösterilmeli.

4. Routing ve Navigasyon Kuralları

const routes: Routes = [
  {
    path: 'product/:id',
    component: ProductDetailComponent,
    resolve: { product: ProductResolver },
    data: { title: 'PRODUCT_DETAIL_TITLE' }
  }
];

Kurallar:

• Lazy loading kullanılmalı.

• Route guard’lar authentication için zorunludur.

• data alanı breadcrumb ve title yönetimi için kullanılmalıdır.

Gelişmiş Kural Teknikleri

1. Koşullu Kural Uygulaması

Belirli türde dosyalar için özel kurallar:

---
description: Dialog Components
globs: ["**/*dialog*.component.ts"]
alwaysApply: false
---

# Dialog Component Rules

- `MatDialogRef` ve `MAT_DIALOG_DATA` injection zorunludur.
- Translation key’ler kullanılmalı.
- `app-pop-up` wrapper bileşeni tercih edilmelidir.
- Fonksiyonlar `.bind(this)` ile bağlanmalıdır.

Performans, Test ve Erişilebilirlik

Performans

• ChangeDetectionStrategy.OnPush kullanın.

• trackBy fonksiyonları ekleyin.

• Gereksiz subscription’ları takeUntil() ile yönetin.

Test

describe('ProductComponent', () => {
  let component: ProductComponent;
  let fixture: ComponentFixture<ProductComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({ imports: [ProductComponent] });
    fixture = TestBed.createComponent(ProductComponent);
    component = fixture.componentInstance;
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Erişilebilirlik

• Her form kontrolüne label eklenmeli.

• ARIA label’lar zorunludur.

• Klavye navigasyonu desteklenmelidir.

Kural Yönetimi ve Versiyonlama

Versiyonlama

• Kurallar git üzerinde takip edilmelidir.

• Değişiklikler commit mesajlarında belgelenmelidir.

• Her büyük değişiklik için CHANGELOG.md güncellenmelidir.

Ekip İşbirliği

• Yeni kurallar eklenmeden önce ekip review’u alınmalıdır.

• Gereksiz kurallar kaldırılmalıdır.

• Cursor AI önerileri düzenli olarak analiz edilmelidir.

Sonuç

Cursor IDE, Angular projelerinde yapay zekâ destekli bir kodlama ortamı sunar. Ancak bu ortamın gücü, yazılan kuralların kalitesiyle doğru orantılıdır. Bu rehberle:

• Ekip içi kod tutarlılığını artırabilir,

• Geliştirme hızınızı %40-60 oranında yükseltebilir,

• Kod kalitesinde %90’a varan iyileşme sağlayabilirsiniz.

Unutmayın: Doğru kurallar, güçlü bir yapay zekâ asistanını etkili bir takım arkadaşı haline getirir.