---
title: 多步驟任務範例
description: 使用 Verdent 處理複雜的多步驟任務
---

Verdent for VS Code 擅長自主拆解複雜的多步驟任務。本指南提供常見多步驟情境的逐步工作流程，精確說明 Verdent 如何處理任務拆解、相依性管理與漸進式執行。

---

## 使用 Plan Mode 處理複雜實作

假設你想在 Verdent 對程式碼庫進行任何變更前，先審視一份詳細的計畫。

<Steps>
  <Step title="切換到 Plan Mode">
    點選介面中的「Switch Mode」按鈕，並選擇「Plan Mode」。

    Plan Mode 為唯讀模式：Verdent 可以分析程式碼、進行研究並建立計畫，但不會修改檔案或執行命令。
  </Step>

  <Step title="提交你的複雜請求">
    ```
    Refactor this codebase to replace our custom authentication with OAuth 2.0
    ```

    Verdent 會徹底分析你目前的實作。
  </Step>

  <Step title="回答釐清問題">
    Verdent 可能會提出問題以消除不確定性：
    - 我們應該使用哪一個 OAuth 提供者？
    - Token 應該儲存在 localStorage 還是 cookies？
    - 我們是否需要支援多個 OAuth 提供者？

    回答這些問題以完善計畫。
  </Step>

  <Step title="審視詳細計畫">
    Verdent 會提出一份完整的計畫，內容包含：
    - 要建立的檔案
    - 要修改的既有檔案
    - 依邏輯順序排列的實作步驟
    - 步驟之間的相依性

    在繼續前請仔細審視這份計畫。
  </Step>

  <Step title="選擇你的下一步動作">
    在審視計畫後，Verdent 會提供兩個選項：
    - 選擇 **Edit** 來請求修改或提出釐清問題
    - 選擇 **Start Building** 切換到 Agent Mode 並開始執行

    在開始建置前，你可以視需要多次反覆調整計畫。
  </Step>
</Steps>

<Tip>
  **提示：**
  - 對於影響多個檔案的功能，使用 Plan Mode
  - 進行多輪計畫審視以完善方法
  - 將計畫儲存為檔案，供團隊在執行前討論
  - Plan Mode 有助於確保你的期望與 Verdent 提出的解決方案保持一致
  - **自訂計畫格式：** 進入 **Settings → Rules → Plan Rules** 以控制計畫結構、詳細程度與格式偏好
</Tip>

***

## 拆解大型功能請求

假設你正在建置一個包含多個整合元件的複雜電子商務結帳系統。

<Steps>
  <Step title="提供高層次目標">
    ```
    Build a complete checkout system with cart management, payment processing, order confirmation, and inventory updates
    ```

    Verdent 會分析需要完成哪些工作。
  </Step>

  <Step title="Verdent 建立邏輯子任務">
    系統會自主將其拆解為：
    1. 建立購物車資料模型與 API
    2. 建置購物車 UI，支援新增／移除／更新商品
    3. 實作含運送地址表單的結帳頁面
    4. 整合支付閘道（Stripe 或設定的提供者）
    5. 建立訂單確認頁面
    6. 新增庫存更新邏輯
    7. 實作電子郵件確認系統
    8. 撰寫整合測試

    每個子任務都會在待辦清單中以清楚的描述顯示。
  </Step>

  <Step title="Verdent 自動處理相依性">
    Verdent 會以正確的順序執行子任務：
    - 在使用資料模型的 API 端點之前先建立資料模型
    - 在呼叫後端端點的前端元件之前先建置後端端點
    - 在新增測試之前先實作核心功能

    相依性會自動管理，無需手動介入。
  </Step>

  <Step title="即時監控進度">
    在 Verdent 處理每個子任務時，觀察待辦清單即時更新。待辦項目會從待處理 → 進行中 → 已完成依序轉換。
  </Step>
</Steps>

<Tip>
  **提示：**
  - 對於大多數任務，讓 Verdent 自主進行拆解
  - 如果你想在執行前審視拆解結果，請使用 Plan Mode
  - 當 Verdent 遇到邊界情況或新需求時，會調整其做法
  - 可見的待辦清單為多步驟執行提供了透明度
</Tip>

***

## 多階段重構專案

假設你正在重構一個大型程式碼庫，並希望以可管理的階段方式進行。

<Steps>
  <Step title="定義多階段方法">
    ```
    In Plan Mode: Refactor this codebase to replace our custom authentication with OAuth 2.0. I want this done in phases so we can test incrementally.
    ```
  </Step>

  <Step title="Verdent 提出階段拆解">
    Verdent 會建議一份多階段計畫：
    - **階段 1**：新增 OAuth 函式庫並設定端點
    - **階段 2**：更新使用者模型與資料庫結構
    - **階段 3**：遷移既有的驗證邏輯
    - **階段 4**：移除已棄用的驗證程式碼
    - **階段 5**：更新測試與文件

    每個階段都可獨立測試。
  </Step>

  <Step title="逐階段執行">
    核准階段 1，讓 Verdent 執行它，然後進行測試：

    ```
    npm test
    ```

    一旦階段 1 經驗證可正常運作，即可進入階段 2。
  </Step>

  <Step title="視需要調整後續階段">
    根據你在階段 1 學到的內容，你可以調整剩餘階段的做法：

    ```
    For Phase 2, let's also add user role migration to the database schema changes
    ```
  </Step>

  <Step title="逐步完成所有階段">
    在每個階段之間進行測試與驗證，逐一完成所有階段，確保安全並允許過程中修正。
  </Step>
</Steps>

<Tip>
  **提示：**
  - 多階段重構透過支援漸進式測試來降低風險
  - 每個階段都應讓程式碼庫保持在可運作的狀態
  - 每個階段後進行提交，以便在需要時輕鬆回滾
  - 根據前面階段的學習成果調整後續階段
</Tip>

***

## 協調後端與前端變更

假設你正在新增一項功能，需要同步更新後端 API 與前端元件。

<Steps>
  <Step title="描述全端功能">
    ```
    Add a commenting system where users can add comments to blog posts. Include backend API, database schema, and frontend UI
    ```
  </Step>

  <Step title="Verdent 採用後端優先的協調方式">
    對於全端功能，Verdent 通常採用後端優先的方式：
    1. 為留言資料表建立資料庫遷移
    2. 新增建立留言的 API 端點
    3. 新增擷取留言的 API 端點
    4. 為留言資料定義 TypeScript 介面
    5. 建置前端留言表單元件
    6. 建立留言顯示元件
    7. 將前端連接到 API 端點
  </Step>

  <Step title="Verdent 確保一致性">
    Verdent 會確保：
    - 前端 TypeScript 介面與後端資料結構相符
    - API 端點 URL 在前端程式碼中被正確引用
    - 請求／回應格式在後端與前端之間保持一致
    - 錯誤處理在整個技術堆疊中保持一致
  </Step>

  <Step title="整合測試">
    ```
    Write integration tests for the commenting system covering the full stack
    ```

    Verdent 會建立測試，驗證後端與前端能正確協同運作。
  </Step>
</Steps>

<Tip>
  **提示：**
  - 後端優先的方式可確保前端有可運作的 API 可供整合
  - Verdent 會自動維持後端與前端程式碼之間的一致性
  - TypeScript 介面有助於在編譯時捕捉整合問題
  - 整合測試可驗證完整功能能端對端正常運作
</Tip>

***

## 使用子代理進行平行執行

假設你有多個可以同時進行的獨立任務。

<Steps>
  <Step title="識別可平行處理的任務">
    ```
    Generate unit tests for all service classes in the src/services directory
    ```

    這些測試檔案彼此獨立，可以平行建立。
  </Step>

  <Step title="Verdent 委派給多個子代理">
    Verdent 會自動使用多個子代理同時處理獨立任務：
    - 子代理 1：為 UserService 建立測試
    - 子代理 2：為 PaymentService 建立測試
    - 子代理 3：為 NotificationService 建立測試
    - 子代理 4：為 AuthService 建立測試

    所有工作平行進行，節省時間。
  </Step>

  <Step title="整合結果">
    每個子代理都會回傳其結果。Verdent 會將所有測試檔案以適當的命名與結構整合進專案。
  </Step>

  <Step title="循序驗證">
    在平行建立後，循序執行測試以驗證它們全部正常運作：

    ```
    npm test
    ```
  </Step>
</Steps>

<Tip>
  **提示：**
  - Verdent 會使用子代理自動平行化獨立任務
  - 鬆耦合的工作（獨立的測試檔案、獨立的元件）可受益於平行化
  - 緊耦合的工作（有相依性的檔案）會循序執行以確保正確性
  - 平行執行能大幅加快大規模變更的速度
</Tip>

***

## 常見問題

<Accordion title="我可以在多步驟任務進行到一半時停止 Verdent 嗎？">
可以。你可以隨時中斷執行。Verdent 會完成目前正在處理的步驟，然後停止。到該時間點為止的進度會被保留。你可以審視已完成的工作、進行調整，然後選擇繼續或採用不同的做法。
</Accordion>

<Accordion title="在長時間任務中，我該如何知道 Verdent 目前正在做什麼？">
觀察待辦清單。它會顯示即時狀態，任何時刻都有一個項目標記為「進行中」。該作用中的項目會精確顯示 Verdent 目前正在處理的內容。已完成的項目會標記為完成，待處理的項目則顯示剩餘工作。
</Accordion>

<Accordion title="如果我不同意 Verdent 拆解任務的方式怎麼辦？">
使用 Plan Mode 在執行前審視並調整拆解結果。在 Plan Mode 中，你可以提供回饋，例如「將前端工作拆分成獨立的元件」或「合併那兩個步驟」。Verdent 會在撰寫任何程式碼前，根據你的意見修改計畫。
</Accordion>

<Accordion title="我是否應該對每個多步驟任務都使用 Plan Mode？">
不一定。對於影響許多檔案的複雜功能、大型重構，或當你想先審視做法時，使用 Plan Mode。對於熟悉、直接的任務，Verdent 可以直接執行，並提供即時的待辦清單可見度。Plan Mode 為風險較高的變更增加了一個審視步驟。
</Accordion>

<Accordion title="執行開始後我可以修改 Verdent 的計畫嗎？">
你可以在 Verdent 工作時提供修正指引。例如說「其實，API 整合請改用不同的做法」，Verdent 就會調整剩餘的步驟。對於重大的計畫變更，較好的做法是停止、提交已完成的部分，並以修訂後的做法開始新的工作階段。
</Accordion>

***

## 另請參閱

<CardGroup cols={2}>
  <Card title="撰寫新程式碼" icon="code" href="/docs/verdent-for-vscode/task-based-guides/writing-code">
    使用 Verdent 建立新功能與元件
  </Card>

  <Card title="最佳實踐" icon="star" href="/docs/verdent-for-vscode/best-practices/prompts">
    有效的提示詞撰寫與工作流程策略
  </Card>
</CardGroup>