--- title: Yeni kod yazma description: Yeni özellikler, bileşenler ve işlevler yazmak için Verdent'i kullanma kılavuzu --- Verdent for VS Code, doğal dildeki isteklerinizle yeni kod yazmanıza yardımcı olur; özel bir söz dizimi gerekmez. Ne oluşturmak istediğinizi açıklayın, Verdent de projenizin desenlerine ve geleneklerine bağlı kalarak birden fazla dosyada üretime hazır uygulamalar oluştursun. ### Neler öğreneceksiniz - Doğal dil istemleriyle yeni özellikler isteme - Uygun bağımlılıklarla birden fazla dosyada kod üretme - Çeşitli programlama dilleri ve çerçeveleriyle çalışma - Eksiksiz proje yapılarını oluşturma - Üretilen kodu sohbet yoluyla iyileştirme ### Ön koşullar Verdent ile kod yazmadan önce: - Verdent uzantısı yüklü Visual Studio Code - Kullanılabilir kredisi olan aktif bir Verdent aboneliği - VS Code'da açık bir proje çalışma alanı (veya oluşturma için boş bir dizin) --- ## Yeni özellikler isteme Verdent, özel komutlara veya söz dizimine gerek olmadan doğal dildeki özellik isteklerini anlar. Giriş Kutusu'na ne istediğinizi açıklamanız yeterli. **Temel özellik istekleri:** İhtiyacınız olan şeyin basit açıklamalarıyla başlayın: ``` Create a UserProfile component that shows the user's avatar image, name as a heading, and email below it. Make the avatar circular. ``` ``` Add a login form with email and password fields to the authentication page ``` ``` Build a notification system that displays toast messages for success and error events ``` Verdent isteğinizi analiz eder, proje yapınızı inceler ve dosya organizasyonu, adlandırma gelenekleri, içe aktarma biçimleri ve kodlama uygulamaları dahil mevcut desenlerinizle eşleşen kod üretir. **Ayrıntılı uygulama istekleri:** Daha fazla denetim için teknik gereksinimleri açıkça belirtin: ``` Add a dark mode toggle to the settings page using React Context API. Store the theme preference in localStorage and apply CSS variables for light and dark themes across all components. ``` ``` Create a POST /api/users/register endpoint that validates email format, password strength (min 8 chars, uppercase, number, special char), and checks for duplicate emails before creating the user in the database. ``` ``` Implement pagination for the blog posts list with 10 posts per page. Add Previous/Next buttons and page number indicators. Update the URL query params (?page=2) and fetch data from /api/posts?page=X&limit=10. ``` Ne kadar çok bağlam sağlarsanız, uygulama beklentilerinizle o kadar uyumlu olur. Sade özellikler için kısa açıklamalar kullanın: ``` Add a search bar to the navigation ``` ``` Create a footer component with copyright and links ``` Verdent, projenizin mevcut kod desenlerine dayanarak makul uygulama seçimleri yapar. Birden fazla dosyalı özellikler veya mimari kararlar için, yürütmeden önce yaklaşımı gözden geçirmek amacıyla **Plan Mode**'u kullanın: **Adım 1:** "Switch Mode" düğmesini kullanarak Plan Mode'a geçin **Adım 2:** Özellik isteğinizi gönderin: ``` Add a search feature to the product catalog with filtering by category and price range ``` **Adım 3:** Verdent şunları gösteren ayrıntılı bir plan oluşturur: - Oluşturulacak yeni dosyalar (arama bileşenleri, filtre arayüzü, API uç noktaları) - Değiştirilecek mevcut dosyalar (ürün kataloğu sayfası, yönlendirme, durum yönetimi) - Eklenecek bağımlılıklar (varsa) - Mantıksal sırayla uygulama adımları **Adım 4:** Verdent açıklayıcı sorular sorabilir: - Arama gerçek zamanlı mı yoksa düğmeyle mi tetiklensin? - Boş sonuçlar nasıl ele alınsın? - Hangi sıralama seçenekleri eklensin? **Adım 5:** Planı gözden geçirin ve sonraki eyleminizi seçin: - Planı daha da iyileştirmek için **Edit**'i seçin - Yürütmeye başlamak için **Start Building**'i seçin Bu yaklaşım, değişiklik yapmadan önce beklentileriniz ile Verdent'in uygulaması arasında uyum sağlar. Özellikler birden fazla dosyayı etkilediğinde veya mimari kararlar gerektirdiğinde Plan Mode'u kullanın. Yürütmeden önce yaklaşımı iyileştirmek için birden fazla tur plan incelemesi yapabilirsiniz. --- ## @-bahsetmelerle bağlam ekleme Hedefli özellik eklemeleri istediğinizde belirli dosyalara veya bileşenlere atıfta bulunun: ``` @auth.js Add password reset functionality to this authentication module ``` ``` @components/Dashboard.js Add a statistics widget showing user activity for the past 30 days ``` Bir dosya yolunun izlediği `@` simgesi, Verdent'e isteğinizi uygularken belirli koda odaklanmasını söyler. Bu, yeni özelliklerin mevcut uygulamalarla sorunsuz biçimde bütünleşmesini sağlar. --- ## Dil ve çerçeve desteği Verdent neredeyse her programlama diliyle çalışır ve dile özgü eklentilere gerek kalmadan tüm büyük ekosistemlerdeki kod anlamlarını, söz dizimi desenlerini ve yaygın çerçeveleri anlar. Üstün sonuçlar ve derin çerçeve anlayışı sunan diller: - **JavaScript & TypeScript** - React, Vue, Angular, Node.js, Next.js, modern async/await desenleri, bileşen analizi - **Python** - Django, Flask, FastAPI, Pandas, NumPy, Jupyter not defterleri, arka uç hizmetleri, veri analizi - **Java/Kotlin** - Spring Boot, Hibernate, Maven/Gradle ekosistemi, kurumsal geliştirme ```jsx "React Component" function UserProfile({ user }) { return (

{user.name}

{user.email}

); } ``` ```vue "Vue Component" ``` ```tsx "Angular Component" @Component({ selector: 'user-profile', template: `

{{ user.name }}

{{ user.email }}

` }) export class UserProfileComponent { @Input() user!: User; } ``` Kapsamlı çerçeve bilgisi sunan ek diller: - **C++** - Bellek yönetimi, performans optimizasyonu, sistem programlama - **Rust** - Bellek güvenliği desenleri, sahiplik kavramları, cargo ekosistemi - **Go** - Eşzamanlılık desenleri, mikro hizmetler, CLI araçları - **C#** - .NET ekosistemi, LINQ desenleri, asenkron programlama - **Ruby** - Rails uygulamaları, betik yazımı - **PHP** - Laravel, WordPress, web uygulamaları - **Swift/Objective-C** - iOS/macOS geliştirme Verdent ayrıca Shell betik yazımını (Bash, Zsh), SQL, HTML/CSS, Markdown, YAML, JSON ve yapılandırma dillerini de destekler. #### Çerçeve anlayışı Verdent, dillerin ötesinde çerçeveye özgü desenleri de tanır: | Kategori | Çerçeveler ve desenler | |----------|----------------------| | **Ön uç** | React hooks, Redux, Context API, Vue Composition API, Angular bağımlılık enjeksiyonu, Next.js sunucu bileşenleri | | **Arka uç** | Express middleware, Django ORM, Spring Boot mikro hizmetleri, FastAPI asenkron uç noktaları, Rails Active Record | | **Test** | Jest, Pytest, JUnit, Mocha/Chai, Cypress, React Testing Library | | **Veritabanı** | Prisma, TypeORM, Sequelize, SQLAlchemy, Hibernate, Mongoose | Verdent belirli dilleri veya çerçeveleri gerektirmek yerine teknoloji yığınınıza uyum sağlar. Sorumlulukların net biçimde ayrıldığı iyi organize edilmiş kod tabanları, programlama dilinden bağımsız olarak daha iyi sonuçlar üretir. **Daha az yaygın diller için optimizasyon:** Özel çerçeveler veya daha az yaygın diller için sonuçları şu yollarla iyileştirin: - İzlenmesini istediğiniz desenleri gösteren kod örnekleri sağlayarak - @-bahsetmeleri kullanarak mevcut kod tabanından parçalar ekleyerek - Dile özgü bağlamı enjekte etmek için MCP (Model Context Protocol) sunucularını kullanarak --- ## Çok dosyalı kod üretimi Verdent tek bir istekte birden fazla koordineli dosya oluşturur ve içe aktarmaları, bağımlılıkları ile dosyalar arası referansları otomatik olarak yönetir. **Örnek:** ``` Create a UserDashboard component with a separate hooks file for data fetching, a styles file, a types file for TypeScript interfaces, and a test file ``` Verdent şunları üretir: - `components/UserDashboard/UserDashboard.tsx` - Ana bileşen - `components/UserDashboard/useUserData.ts` - Özel hook - `components/UserDashboard/UserDashboard.module.css` - Stiller - `components/UserDashboard/types.ts` - TypeScript arabirimleri - `components/UserDashboard/UserDashboard.test.tsx` - Testler Tüm dosyalar aralarındaki doğru içe aktarmaları ve bağlantıları içerir. **Paralel ve sıralı üretim:** **Gevşek bağlı dosyalar** için (bağımsız bileşenler, ayrı modüller, paralel test dosyaları), Verdent birden fazla dosyayı paralel olarak yazmak için alt aracılar kullanabilir; bu da hız ve verimliliği artırır. Birbirine bağımlı **sıkı bağlı dosyalar** için (birbirinden içe aktaran dosyalar, paylaşılan türler, bağımlı bileşenler), Verdent uygun bağımlılık yönetimini ve doğru içe aktarmaları sağlamak için sıralı yazar. Çok dosyalı özellikler için Verdent dosyaları paralel olarak üretir ve ilgili tüm değişiklikler arasında tutarlılığı otomatik olarak korur. --- ## Şablon ve iskelet kodu üretme #### Şablon kodu üretimi Verdent, projenizin mevcut desenlerini anlayarak ve aynı stil ile yapıyı izleyen yeni kod oluşturarak şablon kodu üretir: ``` Create a new ProductCard component with props for title, price, and image ``` ``` Write an Express route handler for user registration with validation ``` ``` Generate unit tests for the authentication service using Jest ``` Verdent, gelenekleri (adlandırma stilleri, içe aktarma desenleri, klasör yapısı) eşleştirmek için kod tabanınızı analiz eder ve genel şablonlar kullanmak yerine sorunsuz bütünleşen şablon kodu üretir. Üretimden önce aday şablon kodunu gözden geçirmek için Plan Mode'u kullanın. Verdent, üretilen kodun tam gereksinimlerinizle eşleşmesini sağlamak için stil yaklaşımı, doğrulama kuralları veya hata işleme stratejisi hakkında açıklayıcı sorular sorabilir. #### Proje iskeleti oluşturma Verdent, eksiksiz klasör hiyerarşileri, yapılandırma dosyaları, bağımlılıklar ve başlangıç koduyla tüm proje yapılarının iskeletini oluşturur: ``` Create a new React application with TypeScript, React Router, Context API for state management, and Jest testing setup ``` Verdent, `package.json`, `tsconfig.json`, bileşen dizinleri, yönlendirme yapılandırması, context sağlayıcıları, test dosyaları ve sürüm denetimi kurulumu (`.gitignore`, ilk commit) dahil eksiksiz proje yapısını üretir. **İskelet oluşturma için en iyi uygulama:** Proje iskeleti oluştururken Plan Mode'u kullanın. Verdent şunları yapar: 1. Tercihler hakkında açıklayıcı sorular sorar (stil çözümü, bileşen yapısı, test yaklaşımı) 2. Eksiksiz dosya yapısı ve dizin düzeniyle ayrıntılı bir plan sunar 3. Oluşturmadan önce iskeleti gözden geçirip iyileştirmenize olanak tanır 4. Tüm dosyaların doğru oluşturulduğundan emin olmak için doğrulamayla projeyi üretir Karmaşık iskelet oluşturma için Verdent, bağımsız kurulum görevlerini paralelleştirmek amacıyla alt aracılar kullanabilir (bağımlılıkları yükleme, yapılandırma dosyaları oluşturma, veritabanı şemalarını kurma). Birbirine bağımlı dosyalar için bağımlılıkları korumak amacıyla sıralı yazmayı sürdürür. İskelet oluşturulduktan sonra Verdent, proje yapısının doğru çalıştığından emin olmak için başlangıç testlerini ve derleme komutlarını çalıştırarak kurulumu doğrulayabilir. --- ## Üretilen kodu iyileştirme Verdent, aynı sohbet oturumunda doğal dildeki takip istekleriyle üretilen kodu iyileştirdiğiniz konuşma temelli bir iş akışı kullanır. **Temel iyileştirme akışı:** 1. Verdent başlangıç kodunu üretir 2. Çıktıyı gözden geçirirsiniz 3. Geri bildirim sağlar veya değişiklik istersiniz 4. Verdent kodu geri bildiriminize göre günceller 5. Memnun olana kadar tekrarlayın **Örnek iyileştirme:** ``` Initial: Create a login form component ``` Verdent temel bir form üretir. ``` Follow-up: Add email validation and show error messages below each field ``` Verdent bileşeni doğrulamayla günceller. ``` Follow-up: Style it with Tailwind CSS and add a loading state for the submit button ``` Verdent stili iyileştirir ve yükleme davranışı ekler. **Sıkı geri bildirim döngüleri:** Verdent konuşma boyunca bağlamı korur, böylece şunları yapabilirsiniz: - Bağlamı tekrarlamadan artımlı değişiklikler isteme - Kodu test edip Verdent'in düzeltmesi için sorunları bildirme - Uygulama seçimleri hakkında "neden" soruları sorma - Alternatifler isteyerek farklı yaklaşımlar deneme Önemli değişiklikler için, nasıl düzeltileceğini değil, neyin yanlış olduğunu veya farklı olarak ne istediğinizi açıklayın. Verdent sorunu analiz edip proje desenlerinize dayanarak en iyi çözümü önerebilir. --- ## En iyi uygulamalar Verdent çeşitli ayrıntı düzeylerini anlar. Gereksinimleriniz olduğunda teknik ayrıntıları sağlayın ya da genel açıklamalar kullanıp Verdent'in proje desenlerinize dayanarak bilinçli seçimler yapmasına izin verin. Yeni özellikler istemeden önce, "Veritabanı şemasını analiz et" veya "Kimlik doğrulama akışını açıkla" gibi sorularla Verdent'in kod tabanınızı anlamasını sağlayın. Bu, bağlam oluşturur ve Verdent'in daha iyi öneriler sunmasına yardımcı olur. Yürütmeden önce ayrıntılı uygulama planlarını gözden geçirin. Verdent açıklayıcı sorular sorar ve yapılandırılmış yaklaşımlar oluşturur. Planı ürettikten sonra, değişiklik yapmadan önce uyumu sağlamak için iyileştirmek üzere **Edit**'i ya da yürütmek üzere **Start Building**'i seçin. Değişikliklerin mevcut kodla bütünleştirilmesini istediğinizde belirli dosyalara atıfta bulunun. Bu, yeni özelliklerin mevcut uygulamalarla uyumlu olmasını sağlar. Çok adımlı özellikler için artımlı çalışın: önce veritabanı tablosu, ardından API uç noktası, sonra arayüz bileşeni oluşturun. Bu, netliği korur ve her adımda doğrulamaya olanak tanır. Teknoloji seçimleri, tasarım tercihleri, doğrulama kuralları, hata işleme stratejileri veya uygulamanız için önemli olan diğer gereksinimler hakkında ayrıntılar ekleyin. --- ## Ayrıca bakın Mevcut kod tabanlarını Verdent ile keşfetmeyi ve analiz etmeyi öğrenin Yapay zeka yardımıyla kapsamlı testler üretin ve sorunları ayıklayın