Vue.js projesinde opencode’u doğrudan proje klasöründe opencode komutuyla başlatırsınız. Ajan, AGENTS.md dosyanızı okur ve verdiğiniz göreve göre tek dosyalı bileşenleri, Pinia store’larını ve testleri düzenler. Verimli çalışmak için ajanın proje yapısını net tanıması ve her değişiklikten sonra testleri çalıştırması gerekir.
Neden opencode Vue.js işlerine uygun?
Vue.js projeleri tek dosyalı bileşenler, Composition API ve Pinia store’ları gibi birbirine bağlı katmanlardan oluşur. opencode, proje dosyalarını okuyup çok adımlı değişiklikleri planlayabildiği için bir bileşeni oluşturmak, bağlı store’u güncellemek ve testini yazmak gibi işleri tek oturumda yönetebilir. SFC’lerde template, script ve style aynı dosyada olduğundan ajan; emit, prop ve scoped CSS ilişkisini birlikte değerlendirir. Composition API kurallarını ve mevcut koddaki desenleri takip etmesini istediğinizde tekrar eden görevlerde tutarlı sonuç verir. Yine de reaktivite ve async testler gibi Vue’ya özgü noktalarda ürettiği kodu mutlaka gözden geçirmek gerekir; bu konuda opencode mu Claude Code mu? Dürüst bir karşılaştırma yazısı ajan seçiminde yardımcı olur.
Projeyi ajan için hazırlama
opencode, proje kökündeki AGENTS.md dosyasını talimat kaynağı olarak kullanır. Vue.js projenizde ajanın doğru komutları çalıştırması ve kod stiline uyması için bu dosyaya kısa, uygulanabilir kurallar yazın. Paket yöneticisi, test, lint ve build komutları ile klasör yapısı ve Vue’ya özgü kurallar en kritik bölümlerdir. Aşağıdaki örnek, Vite + Pinia + Vitest tabanlı bir proje için başlangıç niteliğindedir:
# AGENTS.md
## Komutlar
- install: npm install
- dev: npm run dev
- build: npm run build
- test: npm run test:unit
- lint: npm run lint
- format: npm run format
## Klasör yapısı
- src/components: yeniden kullanılabilir SFC'ler
- src/views: sayfa düzeyindeki bileşenler
- src/stores: Pinia store'ları
- src/composables: Composition API composable'ları
- src/**/__tests__: bileşen ve store testleri (*.spec.ts)
## Vue.js kuralları
- Composition API kullan; `<script setup>` tercih et.
- `defineProps` ve `defineEmits` ile çalış; props'u asla doğrudan değiştirme.
- İlkel değerler için `ref`, nesneler için `reactive`; türetilmiş değerler için `computed`.
- Karmaşık template ifadelerini `computed` veya composable'a taşı.
- Pinia store'larını setup store olarak yaz; state destruct ederken `storeToRefs` kullan.
- Testlerde `@vue/test-utils` ile mount et; async işlemlerde `flushPromises` kullan.
- Yeni test eklemeden mevcut testleri bozma; ilgili test dosyasını her değişiklikten sonra çalıştır.Bu dosya güncel kaldıkça ajan, paket yöneticisi karışıklığı veya yanlış test komutu gibi sorunları daha az yaşar. AGENTS.md hazırlamanın genel adımları için opencode nasıl kullanılır? Adım adım rehber içeriğine bakabilirsiniz.
Çalışma döngüsü
Vue.js projesinde opencode ile en iyi sonuç, büyük bir hedefi küçük ve doğrulanabilir adımlara bölmekten geçer. Önce ajanın mevcut dosyaları ve store yapısını özetlemesini isteyin; sonra tek bir bileşen veya store görevi verin. Ajan kodu ürettikten sonra mutlaka ilgili testleri çalıştırmasını söyleyin ve oluşan diff’i inceleyin. Başarısız test varsa hata çıktısını tekrar ajanla paylaşıp düzeltme isteyin. Aşağıdaki prompt’lar tipik Vue.js görevleri için başlangıç noktasıdır:
- “Proje yapısını incele; package.json script’lerini, mevcut Pinia store’larını ve Router kurulumunu özetle. Sonra ProductFilter bileşeninde fiyat aralığı filtresini computed ile düzelt.”
- “src/components/UserList.vue için Vitest + Vue Test Utils ile test yaz. API çağrısını mock’la; yükleniyor, başarı ve hata durumlarını test et.”
- “Yeni bir Pinia setup store’u oluştur: cart.
addItem,removeItemvetotalPricegetter’ı ekle. Aynı zamanda store için test yaz.” - “Mevcut tüm testleri çalıştır. Başarısız olanları sırayla düzelt; her düzeltmeden sonra sadece ilgili test dosyasını tekrar çalıştır ve sonucu özetle.”
- “Kod tabanındaki tüm SFC’leri tara. Props’u mutate eden veya
definePropsdönen nesneyi destructure edip reaktiviteyi bozan yerleri Composition API kurallarına göre düzelt.”
Ajanı her seferinde tek bir amaca yönlendirmek, diff’in küçük kalmasını ve hataların kaynağının kolay bulunmasını sağlar. Çalışma döngüsünün sonunda npm run test:unit, npm run lint ve gerekiyorsa npm run build komutlarını da ajan aracılığıyla çalıştırıp tüm projeyi doğrulayın.
Hangi görevlerde iyi, nerelerde dikkatli olmalı?
opencode, Vue.js projelerinde özellikle yeni SFC bileşeni oluşturma, Composition API ile refactor, Pinia store ekleme ve test iskeleti çıkarma işlerinde hızlıdır. Mevcut bileşenlerdeki desenleri taklit edebilir ve script setup içinde tip güvenli kod üretebilir. Ancak Vue’ya özgü bazı tuzaklarda üretilen kodu dikkatle incelemek gerekir.
| Görev | Örnek prompt | Neden dikkat |
|---|---|---|
| Yeni SFC bileşeni | “CartItem.vue’yi Composition API ile oluştur; prop’ları doğrula, kaldırma olayını emit ile gönder.” | Ajan props’u doğrudan değiştirebilir veya emit adını yanlış yazabilir. |
| Pinia store | “User store’unu setup store olarak oluştur; async fetch ile state yönet, testlerini yaz.” | Store dışından state’i destructure etmek reaktiviteyi bozar; storeToRefs gerekir. |
| Test ekleme | “UserList için mock API ile başarı ve hata durumlarını test et.” | flushPromises unutulursa async test yanlış geçer veya asılı kalır. |
| Mevcut kodu refactor | “Bu bileşendeki computed mantığı composable’a taşı ve testleri güncelle.” | Auto-import kullanan projede import eklemeyi unutabilir veya yanlış dosya yolu kullanabilir. |
Ajanın ürettiği kodda özellikle şu noktaları kontrol edin: reactive ile ref karışıklığı, defineProps dönen nesnenin doğrudan destructure edilmesi, v-model kullanan özel bileşenlerde defineModel eksikliği ve Pinia store’da state’i modül düzeyinde tutma eğilimi. Ajan bazen gereksiz watch ekleyebilir veya computed yerine method kullanabilir; bu da kararlılığı azaltır.
Test ve doğrulama
Vue.js projesinde ajanın ürettiği kodu doğrulamak için birincil komut npm run test:unit olmalıdır. Vitest, SFC ve Pinia store testlerini hızlı çalıştırdığı için ajanı her değişiklikten sonra ilgili test dosyasını çalıştırmaya yönlendirin. Test çıktısını yalnızca “başarılı” veya “başarısız” olarak özetlemesini değil, hata mesajını ve dosya:satır bilgisini paylaşmasını isteyin. Böylece ajan hatayı daha doğru düzeltebilir. Eğer projede TypeScript kullanılıyorsa vue-tsc --noEmit ile tip kontrolü yapın; lint için npm run lint komutunu da ekleyin.
Vue Test Utils ile test yazarken ajanın mount çağrısına Pinia veya Router plugin’lerini eklemesi gerekebilir. Örneğin bir store kullanan bileşen testi için createTestingPinia veya gerçek Pinia instance’ı oluşturup global.plugins içinde vermek gerekir. Ajan bu bağlamı atladığında testler çalışmayabilir. Bu nedenle AGENTS.md’ye test kurulumuyla ilgili bir not eklemek faydalıdır. Ayrıca ajanın yalnızca kendi ürettiği testleri değil, değiştirdiği bileşenin mevcut testlerini de çalıştırmasını isteyin; regresyonlar erken yakalanır.
Birden fazla ajanı paralel çalıştırmak
Aynı Vue.js reposunda birden çok opencode ajanı kullanırken AgentVera’nın worktree desteği önemlidir: her ajan kendi dalında çalıştığı için SFC ve store dosyaları birbirinin üzerine yazılmaz. Ajan turu bitince devreye giren otomatik kod incelemesi, Pinia reaktivite hatalarını veya eksik flushPromises çağrılarını dosya:satır bilgisiyle gösterir. Checkpoint’ler ise bozulan bir bileşen refactor’ünü tek tıkla geri almayı ve oturumu adım adım yeniden izlemeyi sağlar; token bütçeleri de uzun test düzeltme turlarında kullanımı sınırlandırır.
Sonuç
opencode, Vue.js projelerinde doğru AGENTS.md, küçük görevler ve düzenli test döngüsüyle ciddi zaman kazandırır. Ajanın ürettiği diff’i ve test çıktılarını her adımda inceleyin; reaktivite, props ve async test hatalarına karşı tetikte olun. Gerektiğinde paralel ajanlar için worktree ve checkpoint imkânı sunan bir ortamla çakışma riskini azaltın. Böylece opencode, Vue.js geliştirme sürecinin doğal bir parçası haline gelir.