Neuen Code schreiben

Verdent for VS Code hilft Ihnen, neuen Code über Anfragen in natürlicher Sprache zu schreiben – keine spezielle Syntax erforderlich. Beschreiben Sie, was Sie erstellen möchten, und Verdent erstellt produktionsreife Implementierungen über mehrere Dateien hinweg, wobei die Muster und Konventionen Ihres Projekts eingehalten werden.

Das lernen Sie

• Neue Features mit Prompts in natürlicher Sprache anfordern
• Code über mehrere Dateien mit korrekten Abhängigkeiten generieren
• Mit verschiedenen Programmiersprachen und Frameworks arbeiten
• Ganze Projektstrukturen aufsetzen
• Generierten Code durch dialogbasierte Verfeinerung iterieren

Voraussetzungen

Bevor Sie mit Verdent Code schreiben:

• Visual Studio Code mit installierter Verdent-Erweiterung
• Aktives Verdent-Abonnement mit verfügbaren Credits
• Ein geöffneter Projekt-Arbeitsbereich in VS Code (oder ein leeres Verzeichnis zum Aufsetzen)

Neue Features anfordern

Verdent versteht Feature-Anfragen in natürlicher Sprache, ohne dass spezielle Befehle oder Syntax nötig sind. Beschreiben Sie einfach, was Sie brauchen, im Eingabefeld.

Einfache Feature-Anfragen:

Beginnen Sie mit unkomplizierten Beschreibungen dessen, was Sie benötigen:

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 analysiert Ihre Anfrage, untersucht Ihre Projektstruktur und generiert Code, der zu Ihren vorhandenen Mustern passt – einschließlich Dateiorganisation, Namenskonventionen, Import-Stilen und Coding-Praktiken.

Detaillierte Implementierungsanfragen:

Für mehr Kontrolle geben Sie technische Anforderungen explizit an:

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.

Je mehr Kontext Sie liefern, desto besser entspricht die Implementierung Ihren Erwartungen.

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

Kontext mit @-Erwähnungen hinzufügen

Verweisen Sie auf bestimmte Dateien oder Komponenten, wenn Sie gezielte Feature-Ergänzungen wünschen:

@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

Das Symbol @, gefolgt von einem Dateipfad, weist Verdent an, sich bei der Umsetzung Ihrer Anfrage auf bestimmten Code zu konzentrieren. Dies stellt sicher, dass neue Features nahtlos mit vorhandenen Implementierungen integriert werden.

Unterstützung von Sprachen und Frameworks

Verdent funktioniert mit praktisch jeder Programmiersprache und versteht Code-Semantik, Syntaxmuster und gängige Frameworks in allen wichtigen Ökosystemen, ohne sprachspezifische Plugins zu benötigen.

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 unterstützt außerdem Shell-Skripting (Bash, Zsh), SQL, HTML/CSS, Markdown, YAML, JSON und Konfigurationssprachen.

Framework-Verständnis

Über Sprachen hinaus erkennt Verdent framework-spezifische Muster:

Optimierung für weniger verbreitete Sprachen:

Bei speziellen Frameworks oder weniger verbreiteten Sprachen verbessern Sie die Ergebnisse durch:

• Bereitstellung von Codebeispielen, die die gewünschten Muster zeigen
• Einbindung von Ausschnitten aus der vorhandenen Codebasis über @-Erwähnungen
• Verwendung von MCP (Model Context Protocol)-Servern, um sprachspezifischen Kontext einzubringen

Codegenerierung über mehrere Dateien

Verdent erstellt in einer einzigen Anfrage mehrere koordinierte Dateien und handhabt Importe, Abhängigkeiten und dateiübergreifende Verweise automatisch.

Beispiel:

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

• components/UserDashboard/UserDashboard.tsx – Hauptkomponente
• components/UserDashboard/useUserData.ts – Custom Hook
• components/UserDashboard/UserDashboard.module.css – Styles
• components/UserDashboard/types.ts – TypeScript-Interfaces
• components/UserDashboard/UserDashboard.test.tsx – Tests

Alle Dateien enthalten korrekte Importe und Verbindungen untereinander.

Parallele vs. sequenzielle Generierung:

Bei losen gekoppelten Dateien (unabhängige Komponenten, separate Module, parallele Testdateien) kann Verdent Subagents nutzen, um mehrere Dateien parallel zu schreiben und so Geschwindigkeit und Effizienz zu steigern.

Bei eng gekoppelten Dateien mit gegenseitigen Abhängigkeiten (Dateien, die sich gegenseitig importieren, gemeinsame Typen, abhängige Komponenten) schreibt Verdent sequenziell, um korrektes Abhängigkeitsmanagement und richtige Importe sicherzustellen.

Boilerplate-Code und Projektstrukturen generieren

Generierung von Boilerplate-Code

Verdent generiert Boilerplate-Code, indem die vorhandenen Muster Ihres Projekts verstanden und neuer Code erstellt wird, der demselben Stil und derselben Struktur folgt:

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 analysiert Ihre Codebasis, um Konventionen (Namensstile, Import-Muster, Ordnerstruktur) abzugleichen, und generiert Boilerplate, der sich nahtlos einfügt, statt generische Vorlagen zu verwenden.

Projektstrukturen aufsetzen

Verdent setzt ganze Projektstrukturen mit vollständigen Ordnerhierarchien, Konfigurationsdateien, Abhängigkeiten und initialem Code auf:

Create a new React application with TypeScript, React Router, Context API for state management, and Jest testing setup

Verdent generiert die vollständige Projektstruktur einschließlich package.json, tsconfig.json, Komponentenverzeichnissen, Routing-Konfiguration, Context-Providern, Testdateien und Versionskontroll-Setup (.gitignore, initialer Commit).

Best Practice zum Aufsetzen von Projekten:

Verwenden Sie Plan Mode beim Aufsetzen von Projekten. Verdent wird:

1. Klärende Fragen zu Ihren Präferenzen stellen (Styling-Lösung, Komponentenstruktur, Testansatz)
2. Einen detaillierten Plan mit der vollständigen Dateistruktur und dem Verzeichnislayout präsentieren
3. Ihnen ermöglichen, das Grundgerüst vor der Erstellung zu prüfen und zu verfeinern
4. Das Projekt mit Verifizierung generieren, um sicherzustellen, dass alle Dateien korrekt erstellt werden

Bei komplexen Projektstrukturen kann Verdent Subagents verwenden, um unabhängige Setup-Aufgaben zu parallelisieren (Installieren von Abhängigkeiten, Erstellen von Konfigurationsdateien, Einrichten von Datenbankschemata). Bei voneinander abhängigen Dateien behält es sequenzielles Schreiben bei, um Abhängigkeiten zu bewahren.

Nach dem Aufsetzen kann Verdent das Setup verifizieren, indem erste Tests und Build-Befehle ausgeführt werden, um sicherzustellen, dass die Projektstruktur korrekt funktioniert.

Generierten Code iterieren

Verdent verwendet einen dialogbasierten Workflow, bei dem Sie generierten Code durch Folgeanfragen in natürlicher Sprache innerhalb derselben Chat-Sitzung verfeinern.

Grundlegender Iterationsablauf:

1. Verdent generiert initialen Code
2. Sie prüfen die Ausgabe
3. Sie geben Feedback oder fordern Änderungen an
4. Verdent aktualisiert den Code basierend auf Ihrem Feedback
5. Wiederholen, bis Sie zufrieden sind

Beispiel-Iteration:

Initial: Create a login form component

Verdent generiert ein einfaches Formular.

Follow-up: Add email validation and show error messages below each field

Verdent aktualisiert die Komponente mit Validierung.

Follow-up: Style it with Tailwind CSS and add a loading state for the submit button

Verdent verfeinert das Styling und fügt Ladeverhalten hinzu.

Enge Feedback-Schleifen:

Verdent behält den Kontext während des gesamten Gesprächs bei, sodass Sie:

• Inkrementelle Änderungen anfordern können, ohne den Kontext zu wiederholen
• Den Code testen und Probleme melden können, damit Verdent sie behebt
• "Warum"-Fragen zu Implementierungsentscheidungen stellen können
• Verschiedene Ansätze ausprobieren können, indem Sie nach Alternativen fragen

Best Practices

Siehe auch