GitHub Copilot CLI, terminalde copilot komutuyla çalışan bir kodlama ajanıdır; Vue.js projelerinde single-file component’leri, Composition API mantığını, Pinia store’larını ve testleri doğrudan düzenleyebilir. Bu rehberde Vite, Vitest ve Vue Test Utils kullanan bir projede ajanı nasıl yönlendireceğinizi, hangi talimatları vereceğinizi ve nerelerde dikkatli olmanız gerektiğini anlatıyorum. Genel CLI kurulumu için GitHub Copilot CLI sayfasına bakabilirsiniz.
GitHub Copilot CLI neden Vue.js işlerine uygun?
Vue.js tek dosyalı bileşenler (SFC) üzerine kuruludur; template, script ve style aynı dosyada bulunur. Bu yapı, ajanın bir bileşeni bütün olarak okuyup tutarlı değişiklikler yapmasını kolaylaştırır. <script setup> ile Composition API kullanıldığında kod daha kısa ve tahmin edilebilir olur; ajan ref, computed, watch ve onMounted gibi import gerektirmeyen makrolarla çalışabilir.
Pinia store’ları da ayrı modüller olduğu için ajan state mantığını izole edebilir. Vite’ın hızlı dev server’ı ve Vitest’in anlık test çıktıları sayesinde ajanın ürettiği kodu siz de hızla doğrulayabilirsiniz. TypeScript kullanıyorsanız, ajan prop ve emit tiplerini otomatik çıkarabilir; bu da refactor sırasında hata riskini azaltır. Örneğin, UserList.vue içindeki filteredUsers computed değerini ajan, store’dan gelen users dizisi ve bir searchQuery ref’i üzerinden doğru şekilde oluşturabilir; tek dosyada tüm bağımlılıkları görebildiği için mantık hatası olasılığı düşer.
Projeyi ajan için hazırlamak
GitHub Copilot CLI, proje kökündeki .github/copilot-instructions.md dosyasını veya AGENTS.md dosyasını okuyarak bağlam kazanır. Bu dosya; kullanılan komutları, klasör düzenini, Vue’ya özgü kuralları ve test beklentilerini içermelidir. Ajanın yanlış komutlar çalıştırmasını önlemek için package.json’daki script’leri net yazın.
Örnek bir .github/copilot-instructions.md:
# Vue.js proje talimatları
- Paket yöneticisi: npm
- Geliştirme: npm run dev
- Test: npm run test
- Lint: npm run lint
- Build: npm run build
## Klasör yapısı
- `src/components/` : yeniden kullanılabilir SFC bileşenler
- `src/views/` : sayfa düzeyinde bileşenler
- `src/stores/` : Pinia store'ları
- `src/composables/` : composition function'ları
- `src/utils/` : saf yardımcılar
## Vue.js kuralları
- Yeni bileşenleri `<script setup lang='ts'>` ile Composition API kullanarak yaz.
- Options API kullanma.
- Bileşen adları PascalCase, dosya adları kebab-case olsun.
- State yönetimi için Pinia kullan; yalnızca yerel UI state için component ref'i kullan.
- Testleri `*.spec.ts` olarak bileşenin yanındaki `__tests__/` klasörüne koy.
- Tek bir bileşeni 300 satırın altında tut; gerekirse composable çıkar.
- İçe aktarmalarda önce Vue, sonra diğer kütüphaneler, en sonda yerel dosyalar gelsin.
- Stillerde `scoped` kullan; global stilleri `src/assets` altında tut.Bu talimatlar, ajanın hangi komutları çalıştıracağını bilmesini sağlar ve klasör yapısına uymasını zorlar. Composition API ve script setup zorunluluğu, ajanın eski Options API pattern’leri üretmesini engeller. Ayrıca SFC boyut sınırı, ajanı tek bir dev bileşen yazmak yerine composable’lara bölmeye teşvik eder. Ekip içinde ortak bir AGENTS.md kullanıyorsanız aynı kuralları orada da tanımlayabilirsiniz; bu şekilde diğer CLI ajanları da aynı bağlamı paylaşır.
Çalışma döngüsü ve örnek komutlar
Ajanla verimli çalışmanın yolu, her seferinde tek bir küçük görev verip sonucu incelemektir. Önce copilot başlatın, görevi net tanımlayın ve kabul kriterlerini belirtin; ajan değişiklikleri yaptıktan sonra git diff ile değişiklikleri okuyun, ardından testleri ve lint’i çalıştırın. Kabul etmeden önce SFC içindeki reactive bağımlılıkları ve Pinia bağlantılarını kontrol edin.
Vue.js projelerinde tipik görevler için örnek komutlar:
- ‘
src/components/UserList.vuedosyasındaki kullanıcı listesini,useUserStorePinia store’undan besleyecek şekilde yeniden yaz; loading ve error durumlarını da ekle.’ - ‘Yeni
src/components/ProductCard.vuebileşeni oluştur;productprop’u alsın,<script setup lang='ts'>kullansın, fiyatıIntl.NumberFormatile biçimlendirsin.’ - ‘
src/stores/cart.tsiçindekiaddItemaksiyonuna stok kontrolü ekle; yetersiz stokta hata fırlatsın. Vitest testini de yaz.’ - ‘
npm run lintçıktısındaki hataları oku, ilgili Vue dosyalarını düzelt ve sonranpm run testile doğrula.’ - ‘
src/composables/useDebounce.tsdosyasını oluştur; arama inputunda kullanılmak üzererefvewatchile debounce uygulasın.’
Her görevden sonra ajanın değiştirdiği dosyaları git diff --stat ile görüntüleyip, SFC içindeki defineProps ve defineEmits tiplerini, ref ile sarılmış reactive değerleri ve scoped stil özniteliğini kontrol edin.
Ajanın iyi yaptığı işler ve dikkat edilecek noktalar
Copilot CLI, Vue.js projelerinde en çok şu işlerde başarılıdır: SFC içinde props ve emits tanımlarını TypeScript ile yazmak, Pinia store’larına aksiyon ve getter eklemek, mevcut bileşeni Composition API’ye taşımak, Vitest ve Vue Test Utils ile test şablonu üretmek. Ancak bazı tuzaklara karşı dikkatli olun.
| Görev | Dikkat edilecek nokta |
|---|---|
| SFC düzenleme | Ajan bazen <script setup> içine Options API sözdizimi karıştırabilir; defineProps ve defineEmits kullanımını kontrol edin. |
| Reactive state | ref yerine düz değişken kullanırsa reactivity kaybolur; mutlaka ref veya reactive ile sarıldığını doğrulayın. |
| Stil | scoped özniteliğini unutabilir veya global stil ekleyebilir; SFC içindeki <style scoped> bekliyorsanız belirtin. |
| Pinia testi | Testlerde storeu createTestingPinia ile kurmazsa gerçek storea bağlanabilir; test izolasyonunu kontrol edin. |
| Asenkron güncelleme | Vue Test Utils’te await nextTick() çağrısını atlayabilir; testlerin kararlı çalıştığından emin olun. |
| Slot ve scoped slot | Ajan slot adlarını yanlış yazabilir; v-slot kullanımını ve kapsam değişkenlerini kontrol edin. |
| Watch ve computed | computed yazarken bağımlılıkları atlayabilir; performans için computed’u tercih edin, watch kullanımını sınırlayın. |
| Template refs | ref ile template elemanına erişirken ref(null) başlatmayı unutabilir; onMounted sonrası null kontrolünü yapın. |
Bu tür sorunları azaltmak için ajanın ürettiği kodu gözden geçirmeden kabul etmeyin. Özellikle refactor görevlerinde ajan tüm dosyayı yeniden yazabilir; bunun yerine ‘yalnızca ilgili fonksiyonu değiştir’ gibi kısıtlar verin. Ayrıca ajanın eklediği yeni bağımlılıkları package.json üzerinden denetleyin; gereksiz kütüphaneler eklemesini önlemek için talimatlarda ‘ek bağımlılık ekleme’ maddesi bulundurabilirsiniz.
Test ve doğrulama
Ajanın ürettiği her değişiklikten sonra npm run test komutunu çalıştırın. Vue.js projelerinde Vitest, bileşen testleri için Vue Test Utils ile birlikte kullanılır; ajan bu ikiliyi tanır ama yine de test kodunun doğru mount edildiğini, Pinia storeunun test ortamında izole edildiğini ve asenkron DOM güncellemelerinin await nextTick() ile beklendiğini gözden geçirin. Ajan bir hata aldığında aynı komutu kendisi de çalıştırabilir; siz de çıktıyı onaylamadan önce kırık testleri tek tek inceleyin.
Pinia ile test yazarken ajan createTestingPinia kullanmalıdır; örneğin mount(Component, { global: { plugins: [createTestingPinia()] } }) kalıbı, storeun gerçek API’ye vurmasını engeller. API çağrılarını vi.mock ile mock’lamasını isteyebilirsiniz. Test odaklı bir akış için ajanla önce testi yazmasını konuşabilirsiniz; böylece bileşenin sözleşmesi netleşir ve ajan uygulamayı ona göre yapar. Bu yaklaşıma dair genel adımlar için Yapay zekâ ajanlarıyla spec odaklı geliştirme rehberi yazısındaki prensipleri Vue.js bileşenlerine uyarlayabilirsiniz. Uçtan uca tarayıcı testleri gerekiyorsa, ajanı Playwright MCP ile yönlendirmeyi düşünebilirsiniz; bu konuda Yapay zekâ ajanıyla tarayıcı testi: Playwright MCP yazısındaki adımlar Vue.js uygulamaları için de uygundur.
Birden çok ajanı Vue.js projesinde çalıştırmak
Aynı projede birden fazla ajanı paralel çalıştırmak isterseniz AgentVera, her ajanı kendi gerçek terminal panelinde yöneten bir masaüstü uygulamasıdır. Vue.js için en kritik olan şey, ajanların ayrı git worktree’lerinde çalışarak aynı SFC dosyalarını ezmesini önlemesidir. Ayrıca her ajanın sırası bittiğinde ikinci bir model otomatik kod incelemesi yapar; bulgular dosya:satır biçiminde gösterilir ve bu, ref veya computed gibi gözden kaçan hataları yakalamayı kolaylaştırır. Her turun anlık görüntüsü alınır; hatalı bir değişikliği tek tıkla geri alabilir ve oturumu adım adım yeniden oynatabilirsiniz. Token bütçeleri de ajan başına, tur başına ve günlük olarak sınırlandığı için uzun Vue.js görevlerinde maliyet kontrol altında kalır.
Özet
GitHub Copilot CLI, Vue.js projelerinde Composition API, SFC, Pinia ve Vite ekosistemiyle iyi çalışır; başarılı olmak için proje talimatlarını net yazın, görevleri küçük tutun ve her değişikliği testlerle doğrulayın. Ajanın ürettiği kodun Vue reactivity kurallarına uyduğunu, Pinia stateini doğru bağladığını ve testlerin kararlı olduğunu kontrol edin. Paralel çalışma gerektiğinde ayrı worktreeler ve otomatik inceleme sunan bir ortam, SFC odaklı iş akışını bozmadan ölçeklenmenizi sağlar.