Yeni kod yazma

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.

Add a search bar to the navigation

Create a footer component with copyright and links

Add a search feature to the product catalog with filtering by category and price range

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

function UserProfile({ user }) {
  return (
    <div className="profile">
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

<template>
  <div class="profile">
    <h1>{{ user.name }}</h1>
    <p>{{ user.email }}</p>
  </div>
</template>

<script setup>
defineProps(['user']);
</script>

@Component({
  selector: 'user-profile',
  template: `
    <div class="profile">
      <h1>{{ user.name }}</h1>
      <p>{{ user.email }}</p>
    </div>
  `
})
export class UserProfileComponent {
  @Input() user!: User;
}

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:

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.

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

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

En iyi uygulamalar

Ayrıca bakın