Gemini CLI ile Vue.js Projelerinde Verimli Çalışma

Gemini CLI, Vue.js projelerinde terminalden çalışan bir kodlama ajanıdır: dosya okur, düzenler, npm komutlarını çalıştırır ve test çıktılarına göre düzeltme yapar. Proje kökündeki GEMINI.md dosyası ajanın Vue.js kararlarınızı öğrenmesini sağlar. Bu rehberde Composition API, SFC, Pinia, Vite ve Vitest odaklı pratik bir çalışma düzeni anlatıyorum. Genel kurulum ve temel kullanım için Gemini CLI sayfasına bakabilirsiniz.

Neden Gemini CLI Vue.js işlerine uygun

Vue.js projelerinde ajanın değeri, tek dosyalı bileşenlerin (SFC) bağlamını korumasından gelir. template, script setup ve style scoped blokları arasında gezinirken prop adlarını, emit tanımlarını ve reaktif değişkenleri birlikte değerlendirir. Böylece ProductList.vue içinde products dizisini dolaşırken aynı dosyada tanımlı defineProps ile uyumu kontrol eder. Pinia store’ları ve composable’lar arası bağımlılıkları da görebildiği için useCartStore içindeki bir action’ın bileşenlerde nasıl çağrıldığını izler. Vite dev server hatalarını veya Vitest çıktısını okuduğunda sorunu dosya satırına kadar indirger; bu, hızlı geri bildirim sağlar. Ayrıca büyük refactor’lar yerine küçük adımlar önerir; bu da Vue reactivity kurallarına uyumu kolaylaştırır. Örneğin, bir bileşende reactive nesneyi destructure edip reaktiviteyi bozan bir değişiklik yaptığınızda ajan, test çıktısındaki undefined hatasını görüp toRefs kullanımını önerebilir. Benzer şekilde, defineEmits dizisini unuttuğunuz bir child bileşende emit çağrısının çalışmadığını fark edip düzeltme yapar. Bu sayede Vue.js’in ince ayrıntılarında hızlı ve doğru müdahale sağlar.

Projeyi ajan için hazırlama

Ajanın Vue.js projenizde doğru çalışması için kök dizine kısa bir GEMINI.md dosyası ekleyin. Bu dosya, ajanın her turda okuyacağı proje bağlamıdır; komutlar, klasör yapısı ve Vue.js’e özgü kurallar içerir. İşte gerçekçi bir örnek:

# Vue 3 + Vite + Pinia projesi

## Komutlar
- Geliştirme: `npm run dev`
- Build: `npm run build`
- Test: `npm run test:unit`
- Lint: `npm run lint`

## Klasör yapısı
- `src/components/` ortak bileşenler, PascalCase dosya adı
- `src/views/` sayfa bileşenleri, route başına bir dosya
- `src/stores/` Pinia store'ları, her store ayrı dosya
- `src/composables/` yeniden kullanılabilir composable'lar

## Vue.js kuralları
- Composition API zorunlu; `<script setup>` kullan.
- SFC sırası: template, script, style scoped.
- Prop ve emit tanımlarını TypeScript ile yaz.
- Reaktif state için `ref` veya `reactive`; store dışında global state kullanma.
- Test dosyaları `src/**/__tests__/*.spec.ts` altında olsun.
- Değişiklik sonrası `npm run test:unit` ve `npm run lint` çalıştır, hata varsa düzelt.

Bu dosyayı başlangıç noktası olarak kullanın; projeye özel ek kuralları (örneğin vue-router kullanımı veya vuetify bileşen kuralları) ekleyebilirsiniz. Ajan, GEMINI.md’yi her komuttan önce okur ve bu bağlamı korur. Örneğin, <script setup> zorunluluğu sayesinde ajan Options API çözümleri önermez; test dosyası konumu sayesinde yeni testleri doğru klasöre koyar. Ayrıca npm run lint komutunu bildiği için stil hatalarını sormadan düzeltir. Daha ayrıntılı kullanım için Gemini CLI nasıl kullanılır? Adım adım rehber yazısına göz atın.

Çalışma döngüsü

Güvenli bir döngü şöyle kurulur: önce ajanla planı netleştirin, sonra tek bir küçük görevi verin. Ajan kod yazar, testleri ve lint’i çalıştırır, sonra git diff ile değişikliği inceleyin. Beklenmedik bir reactivity hatası varsa geri alıp daha küçük adım isteyin. Aşağıdaki promptlar tipik Vue.js görevleri için başlangıç noktasıdır:

• “Mevcut ProductCard.vue bileşenini incele ve Pinia’daki useCartStore içine addToCart(product) metodunu ekle; bileşende bu metodu tetikleyen bir buton oluştur. Değişiklik sonrası ilgili testleri çalıştır.”
• “LoginForm.vue içinde form doğrulamasını Composition API ile yaz; email ve password alanları için hata mesajlarını reactive bir nesnede tut. submit fonksiyonu geçersizse hataları göstersin.”
• “UserList.vue için Vitest ile mount testi yaz; API çağrısını vi.mock ile mockla ve kullanıcı listesinin render edildiğini doğrula. Test dosyasını __tests__/UserList.spec.ts altına koy.”
• “Pinia’da yeni bir useAuthStore oluştur; isLoggedIn, token state’leri ile login ve logout action’larını ekle. Mevcut testleri çalıştırıp geçtiğinden emin ol.”
• “Vite build sırasında çıkan 'X' is not exported hatasını çöz ve npm run lint çıktısındaki tüm uyarıları temizle.”
• “useFetchData adında bir composable oluştur; ref ile data, error ve loading state’lerini yönet, onMounted içinde fetch çağrısı yap ve hata durumunda error döndür. Bir bileşende bu composable’ı kullan.”

Her promptta ajanın önce planı özetlemesini isteyebilirsiniz; böylece yanlış dosyaya müdahale riski azalır. Diff incelemesinde özellikle .vue dosyalarındaki değişikliklere bakın: template içindeki yanlış direktif kullanımı, script setup bloğundaki importların eksikliği veya style scoped’ta gereksiz global stil kalıntıları olabilir. git diff --check ile boşluk hatalarını da yakalayabilirsiniz. Prompt yazımıyla ilgili daha fazla teknik için Kodlama ajanları için prompt nasıl yazılır? sayfasına bakın.

Tipik Vue.js görevleri ve dikkat edilmesi gerekenler

Gemini CLI, şu görevlerde genellikle iyi sonuç verir: yeni SFC oluşturma, prop ve emit tanımlarını TypeScript ile tamamlama, Options API’den Composition API’ye dönüştürme, Pinia store taslağı çıkarma, Vitest testleri yazma ve template içindeki binding hatalarını düzeltme. Ancak Vue.js’e özgü birkaç tuzakta dikkatli olun.

• Reactivity kaybı: Ajan reactive bir nesneyi destructure ederek kullanabilir; bu, reaktiviteyi öldürür. Böyle bir değişiklikte toRefs kullanmasını veya nesneyi bütün olarak tutmasını açıkça isteyin. Örneğin const { name } = user yerine const name = computed(() => user.name) tercih edilmelidir.
• Prop mutasyonu: Ajan bazen child bileşende prop’a doğrudan atama yapabilir. Bunu yakalarsanız, değişikliği emit veya computed getter/setter ile yeniden yazdırın. Vue devtools veya konsol uyarısı genellikle bunu işaret eder.
• Aşırı mühendislik: Küçük bir form için gereksiz composable veya store katmanı önerebilir. Kod incelemesinde sadeleştirme isteyin; özellikle tek kullanımlık bir state için Pinia store oluşturmasını engelleyin.
• Yanlış test stratejisi: Shallow mount kullanarak child bileşenlerin entegrasyonunu gözden kaçırabilir. Kritik akışlarda tam mount veya mount tercih edin. Ajan bazen yalnızca snapshot testi yazıp davranışı doğrulamadan geçebilir; her testin gerçek kullanıcı etkileşimini kapsamasını isteyin.
• Yaşam döngüsü: Async işlemlerde onMounted içinde başlatılan abonelikleri temizlemeyi unutabilir; bunu kontrol edin. Özellikle setInterval veya WebSocket bağlantısı kullanılan bileşenlerde onUnmounted temizliği şarttır.
• Tip güvenliği: defineProps ve defineEmits için TypeScript tip tanımı eklemek yerine basit array syntax’i kullanabilir. Bu, IDE ve derleyici uyarılarına yol açar; ajanın tip tanımını zorunlu kılmasını sağlayın.

Vue.js için test ve doğrulama

Ajanın en büyük avantajı, test ve lint komutlarını sizin için çalıştırıp çıktıyı okuyabilmesidir. Her önemli değişiklikten sonra aşağıdaki komutları çalıştırmasını isteyin:

Testleri ajanın çalıştırmasına izin verin, ancak nihai kararı siz verin. git diff çıktısını incelemeden merge etmeyin. Özellikle Pinia store’larda testlerin gerçek state değişimlerini doğruladığından emin olun; ajan bazen mock’ları aşırı kullanıp gerçek davranışı test etmeyebilir. Yeni bir test yazarken ajanın @vue/test-utils ile await flushPromises() çağırmasını isteyin; böylece asenkron state güncellemeleri tamamlanır. Ayrıca kapsam raporu (npm run test:unit -- --coverage) çalıştırıp kritik bileşenlerin şube kapsamını kontrol edebilirsiniz.

Birkaç ajanı aynı Vue.js projesinde çalıştırma

Birden fazla Gemini CLI ajanını aynı Vue.js projesinde çalıştırırken AgentVera işleri kolaylaştırır. Her ajan kendi git worktree’sinde çalıştığı için aynı bileşenleri ezmez; paralel görevler güvenle ilerler. Bir ajanın sırası bittiğinde ikinci model otomatik kod incelemesi yapar ve bulguları file:line ile gösterir; böylece ref/reactive hatalarını erkenden yakalarsınız. Her turun checkpoint’i tek tıkla geri alınabilir, token bütçeleri ise maliyeti kontrol altında tutar. Bu paralel çalışma düzenini Windows’ta kodlama ajanlarını yönetmek: paralel ajanlar yazısında da görebilirsiniz.

Sonuç

Gemini CLI, Vue.js projelerinde düzenli bir GEMINI.md ve disiplinli test döngüsü ile güvenilir bir yardımcı haline gelir. Büyük refactor’lar yerine küçük adımlar, git diff incelemesi ve ajanın çalıştırdığı testler projenin sağlıklı kalmasını sağlar. Vue.js’e özgü reactivity ve prop kurallarını ajanla açıkça paylaştığınızda hata oranı düşer. Özellikle Composition API ve Pinia store’larda ajanın önerilerini her zaman kendi proje bağlamınızla doğrulayın. Paralel işler için AgentVera gibi bir düzenleyici, aynı anda birden çok ajanı yönetmenizi kolaylaştırır ve kod incelemesi adımını otomatikleştirir. Unutmayın: ajan bir araçtır; nihai kontrol sizdedir.