# GitHub Copilot CLI ile SvelteKit Projelerinde Hızlı Geliştirme

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

GitHub Copilot CLI’yi SvelteKit projelerinde etkili kullanmak için kurulum talimatları, çalışma döngüsü, örnek promptlar ve test doğrulama ipuçları.

**Kısaca:**

- GitHub Copilot CLI, terminalden SvelteKit route, load function ve form action geliştirmeyi hızlandırır.
- .github/copilot-instructions.md veya AGENTS.md dosyasına komut ve klasör kurallarını ekleyin.
- Küçük adımlarla çalışıp her değişikliği Vitest ve Playwright ile doğrulayın.

GitHub Copilot CLI, terminal üzerinden SvelteKit projelerinde kod yazmayı hızlandıran bir kodlama ajanıdır; proje klasöründe `copilot` komutuyla başlar. Ajana .github/copilot-instructions.md veya AGENTS.md dosyasıyla proje kurallarınızı verirseniz route dosyalarını, load function’ları ve form action’ları doğru desenlerle üretir. Bu rehber, SvelteKit bilen geliştiriciler için pratik bir çalışma düzeni sunar ve [GitHub Copilot CLI](/ajanlar/copilot-cli/) sayfasındaki temel bilgileri SvelteKit özelinde derinleştirir.

## Neden GitHub Copilot CLI SvelteKit işlerine uyar

SvelteKit’in dosya tabanlı yönlendirme sistemi ve sunucu/istemci ayrımı, ajanın proje ağacını okuyup doğru dosyayı doğru amaçla üretmesini kolaylaştırır. Ajan +page.svelte ile görsel bileşeni, +page.ts ile evrensel load function’ı, +page.server.ts ile sunucu tarafı veri yüklemeyi ve form action’ları aynı SvelteKit desenleriyle yazar. Ayrıca +server.ts endpoint’leri ve `use:enhance` gibi istemci geliştirmelerini de mevcut proje desenlerine uygun biçimde üretir. Derleyici geri bildirimi ve Vitest/Playwright hataları üzerinden iterasyon yapabildiği için, özellikle route ekleme, veri çekme ve form işleme görevlerinde tutarlı sonuç verir.

SvelteKit’in katı dosya adlandırma kuralları, ajan için net bir hedef oluşturur: `src/routes/blog/[slug]/+page.ts` gibi bir dosya yolunun amacı bellidir. Ajan, tip güvenliği sayesinde `PageLoad` ve `Actions` tiplerini kullanarak üretilen kodun doğruluğunu artırabilir. Ayrıca SvelteKit’in adaptör seçimi, SSR/CSR tercihleri ve `+layout.ts` gibi dosyaların etkileşimi, ajanın öğrenmesi gereken ancak projenizde zaten mevcut olan desenlerle kolayca eşleştirilir. Özellikle skeleton projelerden yola çıkıyorsanız, ajan mevcut route yapısını taklit ederek yeni sayfalar ekler.

## Projeyi ajana hazırlamak

GitHub Copilot CLI proje kökündeki .github/copilot-instructions.md veya AGENTS.md dosyasını okur. SvelteKit projesinde bu dosyaya şu bilgileri koyun: build, test ve lint komutları; route ve lib klasör kuralları; SvelteKit’e özgü kurallar (load function’ların serializable veri döndürmesi, form action’ların +page.server.ts içinde `actions` olarak export edilmesi, server tarafında `locals` kullanımı). Talimat dosyası ne kadar net olursa ajan o kadar az yanlış yapar. Örneğin, `redirect` veya `error` yardımcılarının import edilme biçimini, veritabanı erişiminin yalnızca server dosyalarında yapılacağını ve ortam değişkenlerinin nasıl okunacağını belirtebilirsiniz. Ayrıca, projenin belirli bölümlerinde kullanılan `zod` şeması, veritabanı istemcisi ve kimlik doğrulama yardımcıları gibi kütüphanelerin import yollarını ekleyin; bu, ajanın var olan kodu yeniden kullanmasını sağlar.

Dosya önceliği şöyledir: `.github/copilot-instructions.md` varsa önce o okunur; yoksa `AGENTS.md` aranır. İkisini birden tutmanıza gerek yoktur; tek bir dosyayı güncel tutmak yeterlidir. İşte kısa bir örnek:

```markdown
# GitHub Copilot CLI SvelteKit talimatları
## Komutlar
- Dev: npm run dev
- Build: npm run build
- Test: npm run test (Vitest)
- Lint: npm run lint
- E2E: npx playwright test

## Klasör kuralları
- Route dosyaları src/routes altında: +page.svelte, +page.ts, +server.ts
- Paylaşılan kod src/lib altında, import yolu $lib
- Sunucuya özel kod yalnızca +page.server.ts / +server.ts içinde

## SvelteKit kuralları
- load function yalnızca serializable veri döndürsün; fonksiyon veya sınıf örneği döndürme
- Form action’ları +page.server.ts içinde `actions` export ederek yaz
- Kullanıcı oturumu için `locals` üzerinden eriş; `cookies` veya DB okumalarını server tarafında yap
- Yönlendirme için `redirect` ve `error` yardımcılarını kullan
- İstemci tarafında `$app/stores`, `$app/forms`, `$app/navigation` modüllerini kullan
```

Bu talimat dosyasını yazarken [CLAUDE.md rehberine](/blog/claude-md-nasil-yazilir/) göz atabilirsiniz; aynı mantık AGENTS.md için de geçerlidir. Ayrıca, proje içinde kullanılan kütüphanelerin sürüm kısıtları, Node.js sürümü ve test ortamı değişkenleri gibi bilgiler de eklenebilir. Talimat dosyası kısa tutulmalı; 50 satırı aşarsa ajan dikkatini kaybedebilir.

## Çalışma döngüsü ve örnek promptlar

Ajanla çalışırken görevi küçük parçalara bölün. Önce plan isteyin, sonra tek bir route veya fonksiyon üzerinde değişiklik yapmasını söyleyin. Değişiklikten sonra testleri çalıştırın ve `git diff` ile farkı inceleyin. İdeal döngü şöyledir:

1. Ajanın mevcut durumu anlaması için kısa bir açıklama verin; örneğin "Projede src/routes/products/+page.ts var, ürün listesi çekiyor ancak filtreleme eksik."
2. Tek bir SvelteKit dosyası veya route üzerinde değişiklik isteyin; birden fazla dosyayı etkileyen görevleri ayrı isteklere bölün.
3. Ajan kodu yazsın, ardından otomatik olarak ilgili testleri çalıştırmasını isteyin; `npm run test -- --run` gibi komutları siz belirtmeyin, talimat dosyasındaki test komutunu kullanmasını söyleyin.
4. `svelte-check` veya derleyici hatalarını düzeltmesini isteyin; ajan hata çıktısını okuyup düzeltme önerecektir.
5. `git diff` ile inceleyip onaylayın; beğenmediğiniz kısımları ajanın tekrar düzenlemesini isteyin.

SvelteKit projesinde tipik görevler için şu promptları kullanabilirsiniz:

- `src/routes/products/+page.ts` içine, `products` tablosundan stoktaki ürünleri çeken bir load function ekle. Hata durumunda 404 döndür.
- `src/routes/checkout/+page.server.ts` içinde form action olarak `placeOrder` ekle: girişi Zod ile doğrula, `locals.user` kontrolü yap, siparişi veritabanına yaz.
- Yeni `src/routes/dashboard` route’u oluştur: +layout.svelte ile korumalı alan, +page.server.ts load ile oturum kontrolü, yetkisizse redirect.
- Vitest ile `src/lib/cart.ts` için birim testi yaz ve `npm run test` çalıştırıp geçmesini sağla.
- Playwright ile giriş sayfası akışını test et: `tests/login.spec.ts` oluştur, formu doldur, `/dashboard` yönlendirmesini doğrula.

Bu promptlardaki her görev, ajanın tek seferde tamamlayabileceği büyüklüktedir. Eğer ajan birden fazla dosyayı etkileyecekse, route bazında bölmek daha güvenlidir. Ajan işi bitirdiğinde otomatik olarak test çalıştırmasını isteyin; böylece hatalar erkenden yakalanır.

## Hangi işler iyi gider, nelere dikkat etmeli

Ajan route oluşturma, load function yazma, form action ekleme, +server.ts endpoint’leri ve Svelte bileşenleri konusunda iyidir. Ancak SvelteKit’in sunucu/istemci sınırı ve serialization kuralları nedeniyle bazı hatalara düşebilir. Aşağıdaki tablo tipik alanları ve dikkat noktalarını gösterir:

| Alan | Dikkat edilecekler |
|---|---|
| Load function | Dönüş değeri serializable olmalı; fonksiyon, sınıf örneği veya bileşen döndürmeyin. Evrensel load ile server load karışabilir. |
| Form action | `actions` export edilmeli; `use:enhance` kullanılmazsa çift gönderim olabilir. `fail` dönüşlerinde doğru tip kullanılmalı. |
| +server.ts | HTTP metotları `GET`, `POST` gibi adlandırılmış export’lar olmalı; `Request` ve `Response` tiplerine dikkat edilmeli. |
| Bileşenler | `window` veya `document` sunucu tarafında çalışmaz; `onMount` veya `browser` kontrolü gerekir. |
| Testler | Test dosyaları `src` dışında veya `tests` klasöründe olmalı; Playwright için `webServer` ayarı doğru yapılmalı. |

Ajanın ürettiği kodu gözden geçirirken özellikle bu satırlara bakın; çoğu SvelteKit hatası bu sınırlarda ortaya çıkar. Ayrıca, ajan bazen `load` function içinde doğrudan `fetch` çağrısı yapabilir; oysa SvelteKit’te `fetch` kullanmak daha uygun olabilir. Böyle durumlarda projenizin standartlarını hatırlatın. Unutmayın: ajan, SvelteKit’in tüm inceliklerini bilemeyebilir; özellikle `invalidateAll`, `depends` ve `preload` gibi kavramları kullanırken hata yapabilir. Bu nedenle, her değişiklikten sonra route’un gerçek davranışını manuel olarak test edin.

## Test ve doğrulama

Ajan, talimat dosyasındaki komutları kullanarak Vitest birim testlerini ve Playwright uçtan uca testlerini çalıştırabilir. Görevi verirken 'testleri çalıştır ve geçene kadar düzelt' demek yeterlidir; ajan test çıktısını okuyup ilgili dosyaları günceller. SvelteKit projelerinde `svelte-check` veya `npm run check` ile tip hatalarını da kontrol ettirin. Ajan genellikle hata mesajlarını iyi yorumlar ancak bazen yalnızca semptomu düzeltebilir; kök nedeni anlamak için testleri birlikte inceleyin. Ayrıca, `npm run build` çıktısındaki uyarılar da SvelteKit’in derleme aşamasında önemli ipuçları verir.

Vitest kullanıyorsanız, test dosyalarının `src` altında `__tests__` klasöründe veya `.test.ts` uzantılı olduğundan emin olun. Playwright için `playwright.config.ts` içinde `webServer` komutunun SvelteKit dev server’ını başlattığını doğrulayın. Ajan, testleri çalıştırdıktan sonra hataları düzeltmek için gerekli importları ekleyebilir veya test beklentilerini güncelleyebilir; ancak testin amacını değiştirmemesi için talimatlarda "testlerin niyetini koru" gibi bir kural yer alabilir. Tarayıcı testlerini ajanla derinlemesine kullanmak isterseniz [Yapay zekâ ajanıyla tarayıcı testi: Playwright MCP](/blog/yapay-zeka-ajani-tarayici-testi/) başlıklı yazı Playwright MCP kurulumunu anlatır.

## Aynı projede birden fazla ajanla çalışmak

AgentVera üzerinde birden fazla GitHub Copilot CLI ajanını aynı SvelteKit projesinde paralel çalıştırabilirsiniz. Her ajan kendi git worktree’sinde çalıştığı için +page.ts ve +server.ts dosyaları çakışmaz. Bir ajanın turu bittiğinde ikinci model otomatik kod incelemesi yapar ve sorunları dosya:satır olarak işaretler; bu, SvelteKit’in route ve load yapısındaki hataları yakalamak için pratiktir. Checkpoint’ler sayesinde bir deneme geri alınabilir; token bütçeleri ise maliyeti kontrol altında tutar. Özellikle birden çok route’u aynı anda geliştirirken worktree izolasyonu çakışmaları önler ve code review katmanı SvelteKit’in sıkı kurallarına uyumu artırır.

## Özet

GitHub Copilot CLI’yi SvelteKit projenizde talimat dosyası hazırlayıp küçük adımlarla çalıştırarak verimli kullanabilirsiniz. Route, load function, form action ve test görevlerinde güçlü sonuç verir; sunucu/istemci sınırındaki kuralları gözden geçirmeyi unutmayın. Testleri ajanın döngüsüne dahil ederek daha güvenli ilerlersiniz. Proje büyüdükçe birden fazla ajanı git worktree’leriyle paralel çalıştırmak da uygulanabilir bir seçenektir.

## Sık sorulanlar

**GitHub Copilot CLI SvelteKit projesinde nasıl başlatılır?** Proje klasöründe terminalden copilot komutunu çalıştırın. Ajan repoyu analiz eder, .github/copilot-instructions.md veya AGENTS.md dosyasındaki talimatları okur ve komutları kullanarak görevleri yerine getirir.

**GitHub Copilot CLI SvelteKit route ve load function yazabilir mi?** Evet, +page.svelte, +page.ts, +page.server.ts ve +server.ts dosyalarını oluşturup düzenleyebilir. Talimat dosyasında belirtilen desenlere göre load function ve form action ekler.

**GitHub Copilot CLI ile testleri nasıl çalıştırırım?** Ajana 'Vitest birim testlerini çalıştır ve hataları düzelt' gibi bir görev verebilirsiniz. Ajan talimatlardaki komutları kullanarak testleri çalıştırır, sonuçları yorumlar ve gerekli düzeltmeleri yapar.

**Birden fazla GitHub Copilot CLI ajanı aynı SvelteKit projesinde çalışabilir mi?** Evet, her ajanı kendi git worktree’sinde veya AgentVera gibi bir araçla paralel çalıştırabilirsiniz. Böylece dosya çakışmaları önlenir ve ajanlar aynı anda farklı route’lar üzerinde ilerleyebilir.

---

**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/