# 编写新代码 (/zh-CN/docs/verdent-for-vscode/task-based-guides/writing-code)
> 使用 Verdent 编写新功能、新组件和新特性的指南
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 生态系统、企业级开发
```jsx "React Component"
function UserProfile({ user }) {
return (
);
}
```
```vue "Vue Component"
{{ user.name }}
{{ user.email }}
```
```tsx "Angular Component"
@Component({
selector: 'user-profile',
template: `
{{ user.name }}
{{ user.email }}
`
})
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 将：
1. 就偏好提出澄清性问题（样式方案、组件结构、测试方法）
2. 呈现包含完整文件结构和目录布局的详细方案
3. 允许你在创建前审查和精炼脚手架
4. 生成项目并进行验证，确保所有文件都正确创建
对于复杂的脚手架，Verdent 可能会使用子智能体并行化独立的设置任务（安装依赖、创建配置文件、设置数据库 schema）。对于相互依赖的文件，它会保持顺序写入以保留依赖关系。
搭建脚手架后，Verdent 可以通过运行初始测试和构建命令来验证设置，确保项目结构正常工作。
***
## 迭代生成的代码 [#迭代生成的代码]
Verdent 使用对话式工作流，让你在同一聊天会话中通过自然语言后续请求来精炼生成的代码。
**基本迭代流程：**
1. Verdent 生成初始代码
2. 你审查输出
3. 你提供反馈或请求更改
4. Verdent 根据你的反馈更新代码
5. 重复直到满意
**迭代示例：**
```
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 做出更好的建议。
在执行前审查详细的实现方案。Verdent 会提出澄清性问题并创建结构化的方法。生成方案后，选择 **Edit** 进行精炼或选择 **Start Building** 执行，确保在做出更改前保持一致。
当你想要将更改与现有代码集成时，引用特定的文件。这可确保新功能与当前实现保持一致。
对于多步骤功能，逐步进行：先创建数据库表，然后是 API 端点，再然后是 UI 组件。这能保持清晰，并允许在每一步进行验证。
包含关于技术选择、设计偏好、验证规则、错误处理策略或任何对你的实现重要的其他需求的细节。
***
## 另请参阅 [#另请参阅]
了解如何使用 Verdent 探索和分析现有代码库
借助 AI 辅助生成全面的测试并调试问题