# GitHub Copilot CLI ile Vue.js projelerinde verimli çalışma

Adres: https://agentvera.dev/blog/copilot-cli-ile-vue/ · Yayın: 2026-11-01

GitHub Copilot CLI ile Vue.js projelerinde Composition API, Pinia, Vite ve Vitest kullanımı: ajanı yönlendirme, kurulum ve doğrulama ipuçları.

**Kısaca:**

- GitHub Copilot CLI, Vue.js SFC’lerini Composition API ve Pinia ile birlikte düzenleyebilir; talimat dosyası proje komutlarını ve kurallarını içermelidir.
- Görevleri küçük tutup her değişiklikten sonra Vitest ve lint çalıştırarak ajanın ürettiği kodu doğrulayın.
- Paralel ajan kullanımı için ayrı git worktree’leri ve otomatik kod incelemesi, SFC çakışmalarını önler.

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](/ajanlar/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`:

```markdown
# 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.vue` dosyasındaki kullanıcı listesini, `useUserStore` Pinia store’undan besleyecek şekilde yeniden yaz; loading ve error durumlarını da ekle.'
- 'Yeni `src/components/ProductCard.vue` bileşeni oluştur; `product` prop’u alsın, `<script setup lang='ts'>` kullansın, fiyatı `Intl.NumberFormat` ile biçimlendirsin.'
- '`src/stores/cart.ts` içindeki `addItem` aksiyonuna 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 sonra `npm run test` ile doğrula.'
- '`src/composables/useDebounce.ts` dosyasını oluştur; arama inputunda kullanılmak üzere `ref` ve `watch` ile 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](/blog/spec-odakli-gelistirme/) 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](/blog/yapay-zeka-ajani-tarayici-testi/) 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.

## Sık sorulanlar

**GitHub Copilot CLI Vue.js projesinde nasıl başlatılır?** Proje klasöründe terminalde copilot komutunu çalıştırın. Ajan, proje kökündeki .github/copilot-instructions.md veya AGENTS.md dosyasını okur; Vue.js komutlarınızı ve kurallarınızı burada tanımlayın.

**GitHub Copilot CLI için Vue.js talimat dosyasına hangi bilgiler yazılmalı?** Build, test ve lint komutlarını; src/components, src/stores, src/composables gibi klasör düzenini; Composition API ve script setup zorunluluğunu; Pinia kullanımını ve test dosyası konvansiyonlarını ekleyin.

**GitHub Copilot CLI Vue single-file component’larını düzenleyebilir mi?** Evet, SFC’lerin template, script ve style bölümlerini bütün olarak okuyup düzenleyebilir. Ancak reactive state ve scoped style gibi Vue’ya özgü detayları kontrol etmeniz gerekir.

**GitHub Copilot CLI ile Vue testlerini nasıl çalıştırırım?** Ajan, npm run test komutunu çalıştırabilir ve hataları okuyabilir. Vitest ve Vue Test Utils kullanıyorsanız, Pinia test kurulumu ve nextTick çağrılarının doğru olduğundan emin olun.

---

**AgentVera hakkında.** AgentVera, Solviera Teknoloji tarafından geliştirilen macOS, Windows ve Linux masaüstü uygulamasıdır. 18 yapay zeka kodlama ajanını (Claude Code, Codex, Gemini CLI, Copilot, Cursor, Antigravity, opencode, Hermes, Qwen Code, Kimi Code, Kiro, Amp, Droid, Goose, Vibe, Crush, Aider, Cline) proje bazında, gerçek terminallerde ve kullanıcının kendi CLI kurulum ve girişleriyle yan yana çalıştırır. Ücretsiz planda sınırsız ajan vardır. İndir: https://agentvera.dev/indir/ · Fiyatlar: https://agentvera.dev/fiyatlar/