编写新代码

Verdent for VS Code 通过自然语言请求帮助你编写新代码，无需特殊语法。描述你想构建的内容，Verdent 就会在多个文件中创建可用于生产环境的实现，同时保持你项目的模式和约定。

你将学到什么

使用自然语言提示词请求新功能
跨多个文件生成具有正确依赖关系的代码
使用各种编程语言和框架
搭建完整的项目结构
通过对话式精炼迭代生成的代码

前提条件

在使用 Verdent 编写代码之前：

已安装 Verdent 扩展的 Visual Studio Code
拥有可用积分的有效 Verdent 套餐
在 VS Code 中打开的项目工作区（或用于搭建脚手架的空目录）

请求新功能

Verdent 无需特殊命令或语法即可理解自然语言功能请求。只需在输入框中描述你的需求即可。

基本功能请求：

从对所需内容的直接描述开始：

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 会分析你的请求，检查你的项目结构，并生成与现有模式匹配的代码，包括文件组织、命名约定、导入风格和编码实践。

详细的实现请求：

如需更多控制，可以明确指定技术要求：

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.

你提供的上下文越多，实现就越符合你的预期。

对于直接的功能，使用简洁的描述：

Add a search bar to the navigation

Create a footer component with copyright and links

Verdent 会根据你项目中现有的代码模式做出合理的实现选择。

对于多文件功能或架构决策，使用 Plan Mode 在执行前审查方案：

第 1 步： 使用 "Switch Mode" 按钮切换到 Plan Mode

第 2 步： 提交你的功能请求：

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

第 3 步： Verdent 会创建一份详细的方案，展示：

要创建的新文件（搜索组件、筛选 UI、API 端点）
要修改的现有文件（产品目录页、路由、状态管理）
要添加的依赖（如果有）
按逻辑顺序排列的实现步骤

第 4 步： Verdent 可能会提出澄清性问题：

搜索应该是实时的还是按钮触发的？
如何处理空结果？
包含哪些排序选项？

第 5 步： 审查方案并选择你的下一步操作：

选择 Edit 进一步精炼方案
选择 Start Building 开始执行

这种方式可确保在做出更改之前，你的预期与 Verdent 的实现保持一致。

当功能影响多个文件或需要架构决策时，使用 Plan Mode。你可以进行多轮方案审查，在执行前精炼方案。

使用 @ 提及添加上下文

当你想要有针对性地添加功能时，引用特定的文件或组件：

@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

@ 符号后跟文件路径，告诉 Verdent 在实现你的请求时专注于特定代码。这可确保新功能与现有实现无缝集成。

语言和框架支持

Verdent 几乎可以处理任何编程语言，并理解所有主流生态系统中的代码语义、语法模式和常见框架，无需特定语言的插件。

具有出色结果和深度框架理解的语言：

JavaScript & TypeScript - React、Vue、Angular、Node.js、Next.js、现代 async/await 模式、组件分析
Python - Django、Flask、FastAPI、Pandas、NumPy、Jupyter notebook、后端服务、数据分析
Java/Kotlin - Spring Boot、Hibernate、Maven/Gradle 生态系统、企业级开发

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;
}

具有全面框架知识的其他语言：

C++ - 内存管理、性能优化、系统编程
Rust - 内存安全模式、所有权概念、cargo 生态系统
Go - 并发模式、微服务、CLI 工具
C# - .NET 生态系统、LINQ 模式、异步编程
Ruby - Rails 应用、脚本编写
PHP - Laravel、WordPress、Web 应用
Swift/Objective-C - iOS/macOS 开发

Verdent 还支持 Shell 脚本（Bash、Zsh）、SQL、HTML/CSS、Markdown、YAML、JSON 和配置语言。

框架理解

除了语言之外，Verdent 还识别框架特定的模式：

类别	框架与模式
前端	React hooks、Redux、Context API、Vue Composition API、Angular 依赖注入、Next.js 服务端组件
后端	Express 中间件、Django ORM、Spring Boot 微服务、FastAPI 异步端点、Rails Active Record
测试	Jest、Pytest、JUnit、Mocha/Chai、Cypress、React Testing Library
数据库	Prisma、TypeORM、Sequelize、SQLAlchemy、Hibernate、Mongoose

Verdent 会适应你的技术栈，而不是要求使用特定的语言或框架。无论使用何种编程语言，组织良好、关注点清晰分离的代码库都会产生更好的结果。

针对不常见语言的优化：

对于专门的框架或不常见的语言，可以通过以下方式改善结果：

提供展示你想遵循的模式的代码示例
使用 @ 提及包含现有代码库中的代码片段
使用 MCP（Model Context Protocol）服务器注入特定语言的上下文

多文件代码生成

Verdent 在单次请求中创建多个协调一致的文件，自动处理导入、依赖和跨文件引用。

示例：

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 生成：

components/UserDashboard/UserDashboard.tsx - 主组件
components/UserDashboard/useUserData.ts - 自定义 hook
components/UserDashboard/UserDashboard.module.css - 样式
components/UserDashboard/types.ts - TypeScript 接口
components/UserDashboard/UserDashboard.test.tsx - 测试

所有文件都包含正确的导入以及彼此之间的连接。

并行生成与顺序生成：

对于松耦合的文件（独立组件、独立模块、并行测试文件），Verdent 可以使用子智能体并行编写多个文件，提高速度和效率。

对于具有相互依赖关系的紧耦合文件（彼此导入的文件、共享类型、相互依赖的组件），Verdent 会顺序编写，以确保正确的依赖管理和正确的导入。

对于多文件功能，Verdent 会并行生成文件，并自动在所有相关更改间保持一致性。

生成样板代码和脚手架

样板代码生成

Verdent 通过理解项目现有的模式来生成样板代码，并创建遵循相同风格和结构的新代码：

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 会分析你的代码库以匹配约定（命名风格、导入模式、文件夹结构），并生成无缝集成的样板代码，而不是使用通用模板。

使用 Plan Mode 在生成前审查候选样板代码。Verdent 可以就样式方法、验证规则或错误处理策略提出澄清性问题，以确保生成的代码完全符合你的要求。

项目脚手架

Verdent 搭建完整的项目结构，包含完整的文件夹层级、配置文件、依赖和初始代码：

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

Verdent 生成完整的项目结构，包括 package.json、tsconfig.json、组件目录、路由配置、context provider、测试文件和版本控制设置（.gitignore、初始提交）。

脚手架最佳实践：

搭建项目脚手架时使用 Plan Mode。Verdent 将：

就偏好提出澄清性问题（样式方案、组件结构、测试方法）
呈现包含完整文件结构和目录布局的详细方案
允许你在创建前审查和精炼脚手架
生成项目并进行验证，确保所有文件都正确创建

对于复杂的脚手架，Verdent 可能会使用子智能体并行化独立的设置任务（安装依赖、创建配置文件、设置数据库 schema）。对于相互依赖的文件，它会保持顺序写入以保留依赖关系。

搭建脚手架后，Verdent 可以通过运行初始测试和构建命令来验证设置，确保项目结构正常工作。

迭代生成的代码

Verdent 使用对话式工作流，让你在同一聊天会话中通过自然语言后续请求来精炼生成的代码。

基本迭代流程：

Verdent 生成初始代码
你审查输出
你提供反馈或请求更改
Verdent 根据你的反馈更新代码
重复直到满意

迭代示例：

Initial: Create a login form component

Verdent 生成一个基本表单。

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

Verdent 用验证更新组件。

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

Verdent 精炼样式并添加加载行为。

紧密的反馈循环：

Verdent 在整个对话过程中保持上下文，让你能够：

在不重复上下文的情况下请求增量更改
测试代码并报告问题让 Verdent 修复
就实现选择提出"为什么"的问题
通过请求替代方案尝试不同的方法

对于重大更改，请描述哪里有问题或你想要什么不同的效果，而不是如何修复。Verdent 可以分析问题并根据你的项目模式提出最佳解决方案。

最佳实践

根据需要尽可能具体或宽泛

Verdent 能理解各种程度的细节。当你有需求时提供技术细节，或使用宽泛的描述让 Verdent 根据你的项目模式做出明智的选择。

在做出更改前先进行探索

在请求新功能之前，让 Verdent 通过诸如"分析数据库 schema"或"解释身份验证流程"之类的问题来理解你的代码库。这会建立上下文并帮助 Verdent 做出更好的建议。

对复杂或多文件功能使用 Plan Mode

在执行前审查详细的实现方案。Verdent 会提出澄清性问题并创建结构化的方法。生成方案后，选择 Edit 进行精炼或选择 Start Building 执行，确保在做出更改前保持一致。

利用 @ 提及实现有针对性的集成

当你想要将更改与现有代码集成时，引用特定的文件。这可确保新功能与当前实现保持一致。

将复杂任务拆分为增量步骤

对于多步骤功能，逐步进行：先创建数据库表，然后是 API 端点，再然后是 UI 组件。这能保持清晰，并允许在每一步进行验证。

你提供的上下文越多，结果就越契合

包含关于技术选择、设计偏好、验证规则、错误处理策略或任何对你的实现重要的其他需求的细节。

另请参阅

理解代码

了解如何使用 Verdent 探索和分析现有代码库

测试与调试

借助 AI 辅助生成全面的测试并调试问题

View source

编写新代码

理解代码

测试与调试

On this page