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

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 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:

# 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 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:

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 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.