Cursor Agent ile Vue.js’te verimli çalışma rehberi

Cursor Agent’ı Vue.js projelerinde kullanmak isteyenler için pratik bir rehber. cursor-agent komutunu proje klasöründe çalıştırarak ajana Vue ekosistemine uygun bağlam verirseniz; Composition API, Pinia, Vite ve Vitest ile tutarlı kod üretebilirsiniz. Aşağıda kurulum, çalışma döngüsü, test ve paralel ajan kullanımı anlatılıyor. Cursor Agent hakkında temel bilgiler için bağlantıya bakabilirsiniz.

Cursor Agent Vue.js işleri için neden uygun

Vue.js tek dosyalı bileşenler (SFC) üzerine kuruludur; template, script ve style aynı dosyada bulunur. Cursor Agent bu yapıyı iyi anlar ve bir bileşenin props, emit, slot ve store bağlantılarını birlikte düzenleyebilir. Composition API’nin ref, reactive, computed ve watch gibi reaktivite araçlarını bilir; Pinia store’larıyla etkileşimde storeToRefs kullanımı gibi Vue’ya özgü ayrıntıları talimat verildiğinde uygular. Ajan, Vite’in hızlı dev sunucusu ve HMR döngüsüne uygun şekilde dosya değişiklikleri önerir; test kodu üretirken Vitest ve Vue Test Utils API’lerini kullanır.

Generic yapay zeka araçlarının aksine proje bağlamını okur ve mevcut bileşen adları, klasör yapısı, komutlar üzerinden karar verir. Bu yüzden Vue.js projesinde kurallar ne kadar net olursa çıktı o kadar az düzeltme gerektirir.

Projeyi ajan için hazırlamak

Cursor Agent proje kökündeki AGENTS.md veya .cursor/rules dosyasından talimatları okur. Vue.js projesi için bu dosyaya komutları, klasör kurallarını ve Vue’ya özgü kısıtları yazın. AGENTS.md proje genelinde, .cursor/rules ise alt klasör bazında daha ince ayarlar için kullanılabilir. Aşağıdaki örnek kısa ama işlevseldir:

# Vue.js proje ajan kuralları

## Komutlar
- dev: npm run dev
- build: npm run build
- test: npm run test:unit
- lint: npm run lint

## Klasör yapısı
- src/components: yeniden kullanılabilir SFC'ler
- src/views: sayfa seviyesi bileşenler
- src/stores: Pinia store tanımları
- src/composables: paylaşılan composition fonksiyonları
- src/__tests__: Vitest birim testleri

## Vue.js kuralları
- Her zaman <script setup> ile Composition API kullan
- Bileşen dosya adları PascalCase.vue olsun
- Prop'ları defineProps ile tiplendir
- Pinia store'undan state alırken storeToRefs kullan, destructure etme
- v-for içinde mutlaka :key kullan
- computed, watch ve watchEffect'i doğru bağımlılıklarla kullan
- Üçüncü taraf kütüphane eklemeden önce sor

Bu dosyaya ek olarak npm run lint ve npm run test:unit çıktılarını ajanın görmesini sağlayın; böylece hataları kendi önerisiyle düzeltebilir. Kural dosyası kısa ve kesin olmalı; gereksiz açıklamalar ajanın dikkatini dağıtır. Cursor CLI nasıl kullanılır? Adım adım rehber bağlantısındaki temel komut akışı da işinize yarar.

Çalışma döngüsü: planla, küçük adımlar at, test et, diff’i incele

Ajanla çalışırken her görevi tek seferde büyük bir refactor olarak vermeyin. Önce planı netleştirin, ardından ajanın küçük değişiklikler yapmasını isteyin. Her adımdan sonra testleri ve linter’ı çalıştırın, sonra git diff ile değişiklikleri satır satır gözden geçirin. Ajanın ‘tamam’ demesi yeterli değildir; kodun Vue.js kurallarına uyduğunu doğrulayın.

Aşağıdaki örnek komutlar tipik Vue.js görevleri için iyi başlangıç noktalarıdır:

• “Pinia’da kullanıcı oturumu için bir store oluştur; login, logout action’ları, isAuthenticated getter’ı ve ilgili Vitest testlerini yaz.”
• “Mevcut ProductList.vue bileşenini Composition API’ye çevir; API çağrısını bir composable’a taşı, yükleme ve hata durumlarını ref ile yönet.”
• “Bir form bileşeninde v-model kullanan input’ları defineModel ile güncelle; doğrulama hatalarını computed ile göster.”
• “UserCard.vue için Vue Test Utils ile mount testi yaz; prop’ları ve emit olaylarını test et, Pinia store’unu mock’la.”
• “Vitest coverage raporuna göre eksik kalan composable testlerini tamamla; her dal için en az bir assertion ekle.”

Her görevden sonra ajanın ürettiği testlerin gerçekten çalıştığını görün. Test geçmiyorsa hatayı ajana geri verin; bağlamı koruyarak düzeltmesini isteyin. Ayrıca template içindeki değişiklikleri özellikle inceleyin; çünkü ajan bazen görsel bir değişikliği yanlış bileşene uygulayabilir.

Vue.js’te ajanın iyi olduğu işler ve dikkat edilecek tuzaklar

Ajan; SFC oluşturma, Pinia store yazma, composable çıkarma, prop/emit tanımlama ve test taslağı hazırlama konularında hızlıdır. Ancak Vue’nun reaktivite modeli ince ayrıntılar içerir. Aşağıdaki tablo sık karşılaşılan durumları özetler:

Ajanın en sık düştüğü tuzak, kodun çalıştığını test etmeden söylemesidir. Vue projelerinde özellikle reaktivite hataları ancak çalışma zamanında veya testlerde ortaya çıkar. Bu yüzden ajanın önerdiği her değişiklikten sonra ilgili bileşenin mount testini çalıştırın. Ayrıca ajan, yeni bir bileşeni kullanırken import yolunu yanlış yazabilir veya Pinia store’unu main.ts’e kaydetmeyi unutabilir; bu noktaları mutlaka kontrol edin.

Test ve doğrulama: ajanla birlikte Vitest kullanımı

Vue.js projesinde asıl güvence testlerdir. Ajanın ürettiği kodu doğrulamak için npm run test:unit komutunu her küçük adımdan sonra çalıştırın. Testleri ajanın yazmasını isteyin ama çalıştırmayı siz kontrol edin; böylece ajanın test çıktısını okumasını ve hataları düzeltmesini sağlayabilirsiniz. Örneğin önce başarısız bir test yazdırın, sonra implementasyonu yaptırın; bu TDD döngüsü Vue’da ajanın amacını netleştirir.

Vitest’in --coverage parametresiyle eksik dalları görebilirsiniz; ajan bu rapora göre ek testler önerebilir. Linter (npm run lint) ve build (npm run build) komutları da tip hatalarını ve SFC derleme sorunlarını yakalar. Ajanın değiştirdiği dosyaların import yollarını, Pinia store kayıtlarını ve global component tanımlarını ayrıca kontrol edin; çünkü ajan bazen yeni bir dosyayı mevcut yapıya bağlamayı unutabilir. Test yazarken @vue/test-utils içindeki mount, flushPromises ve createTestingPinia gibi yardımcıları kullanmasını net biçimde isteyin.

Paralel ajanlar: AgentVera ile tek Vue.js projesinde çoklu çalışma

AgentVera masaüstü uygulaması, Cursor Agent dahil birden çok kodlama ajanını aynı pencerede kendi gerçek terminal panellerinde çalıştırır. Vue.js projesinde paralel ajan kullanırken en kritik avantaj, her ajanın kendi git worktree’sinde çalışabilmesidir; böylece biri Pinia store’u güncellerken diğeri aynı dosyayı ezmez. Ajanın turu bitince ikinci bir model kodu otomatik inceler ve bulguları file:line olarak gösterir; bu inceleme reaktivite hatalarını yakalar. Ayrıca her turun anlık görüntüsü (checkpoint) alınır; hatalı bir değişiklik tek tıkla geri alınabilir ve oturum adım adım tekrar oynatılabilir. Token bütçeleri ise günlük maliyeti kontrol altında tutar. Paralel kodlama ajanları için en iyi araçlar bağlantısında bu tür araçların karşılaştırması bulunur.

Kapanış

Cursor Agent, Vue.js projelerinde doğru kurallar ve sıkı test döngüsüyle ciddi zaman kazandırır. Ajanın ürettiği kodu her zaman inceleyin, reaktivite ve store bağlantılarını doğrulayın, paralel çalışmada iş bölümünü netleştirin. Böylece ajan, sürdürülebilir Vue uygulamaları geliştirmede güvenilir bir yardımcı olur.