Kerwin AI Information

標籤: Roo Code

  • 把 VS Code 變成自動寫程式助手：cline 實戰

    把 VS Code 變成自動寫程式助手：cline 實戰

    📌 本文重點

    • cline 是裝在 VS Code 裡的自主程式碼 Agent
    • 可批次改檔、跑指令、查文件，但每步都需授權
    • 搭配版本控制與測試，可成為安全的半自動 pair programmer

    cline 要解決的問題很直接：讓一個「在你本機 IDE 裡跑的自主程式碼 Agent」，幫你改檔、跑指令、查文件，但所有動作都要你按下同意鍵才會執行。

    專案連結：github.com/cline/cline

    cline 是什麼？一句話定位

    cline = 安裝在 VS Code 裡的自主程式碼 Agent，可以：

    • 建立 / 編輯專案檔案
    • 執行終端機指令（build、test、lint 等）
    • 啟動瀏覽器幫你查文件
    • 但每一步都會先列出具體操作，等你按「允許」才真的動手

    它的定位不是「幫你寫一個函式就結束」的 Copilot，而是能帶著你一步步完成一個功能或重構任務的半自動 pair programmer。

    核心功能：它到底能幹嘛？

    1. 批次改檔、搭 scaffold

    適合情境：

    • 重構一個舊專案，把同樣的 pattern 套到多個檔案
    • 快速搭一個新專案的骨架（資料夾結構、基本檔案）

    你可以這樣用：

    1. 在 VS Code 裡打開專案資料夾。
    2. 開啟 cline 面板，輸入指令，例如：

      幫我把 src/ 底下所有 React class component 改成 function component，並保留原本 props 型別。

    3. cline 會：
    4. 先掃專案，列出會動到的檔案
    5. 給你一份「變更計畫」與 diff 預覽
    6. 每個檔案修改前都問你要不要執行

    效果：一次性重構多個檔案，但仍保留「你是 code review 者」的掌控感。

    💡 關鍵： 用 cline 做批次重構時，每個變更都先 review，再執行，可以同時兼顧效率與安全。

    2. 查 bug、跑測試、看 log

    適合情境：

    • 接手別人寫的遺留專案
    • 單元測試一堆紅字懶得一個個追

    操作步驟：

    1. 把錯誤訊息貼給 cline，例如：

      Jest 測試 UserService 全掛了，請找出原因並修正。

    2. cline 會：
    3. 根據錯誤訊息定位到相關檔案
    4. 提出一個修正方案（含預計修改的檔案列表）
    5. 要你確認後才修改
    6. 自動幫你呼叫 npm test 或 pnpm test，再讀測試結果

    你可以要求它：

    每一次修正只改一小步，測試通過後再進下一步。

    這樣你就得到一個測試驅動的 AI 助手，不會一次改爆整個 codebase。

    3. 幫你查文件、Google / Docs 查詢

    cline 內建「用瀏覽器查資料」的能力（具體依你設定的模型與工具支援而定），常見用法：

    • 不熟的框架 API
    • 某個 CLI 旗標
    • 某個錯誤碼

    例子：

    有一段 webpack 設定報 deprecated 警告，請幫我找到官方文件，並提供對應的 config 調整建議，改動前先給我 diff。

    cline 會：

    1. 打開瀏覽器工具查官方文件
    2. 摘要關鍵片段
    3. 提出「建議改法 + diff」
    4. 再次問你要不要套用

    關鍵點：所有網頁行為和檔案修改，都會顯示在面板上，必須經你同意。

    安全設計：每一步都要你確認

    agent 工具最怕兩件事：

    • 誤刪 / 誤改檔案
    • 執行奇怪的 shell 指令

    cline 的設計剛好反過來：

    • 每次改檔會顯示 diff，你可以逐行檢查
    • 每次跑指令會顯示 完整命令，例如 rm -rf 這種你一看就會擋
    • 每次讀/寫新檔案，會明確說明路徑

    使用時務必做到：

    • 只把權限給當前專案資料夾
    • 不要在有機敏資料（憑證、prod config）的 repo 直接放手讓它改
    • 先在一個「測試用 repo」練習上述流程

    💡 關鍵： 把 cline 當成需要你簽名才能動手的助手，用「授權前必看 diff / 指令」這個習慣來降低風險。

    適合誰用？三種常見場景

    1. 中小專案重構 / 遺留專案接手

    典型痛點：

    • 接手一個 1–3 年歷史的 Node / Django 專案
    • 設計不統一，命名風格混亂
    • 文件過時

    cline 可以幫你：

    • 產生一份「現有結構地圖」：掃描目錄，生成 docs/ARCHITECTURE.md
    • 逐步統一命名規則（例如全部改用 camelCase）
    • 把散落在 code 的註解整理成文件

    行動建議：

    1. 開一個新 branch（例如 refactor/with-cline）。
    2. 讓 cline 先生成「重構計畫」，內容包含：
    3. 優先修哪些模組
    4. 預計拆出哪些共用函式
    5. 需要補哪些測試
    6. 你確認計畫後，再讓它照計畫一項項執行。

    2. 日常重複開發工作

    常見重複工作：

    • 每次新專案都要搭一套相同骨架
    • CRUD api 的樣板重複貼
    • 測試檔案格式一樣，只是名字和 case 不同

    cline 的價值在於：

    • 把這些「手很痠的工作」變成一段腳本
    • 你只要給它「任務描述 + 確認」，不用自己一檔檔複製

    建議做法：

    • 為你的團隊定義一份「標準專案骨架」描述，像：

      對新的 React 專案：使用 Vite、設定 ESLint + Prettier、建立 src/components, src/hooks, src/pages 目錄，並生成基本範例檔案。

    • 之後每一次開新 repo 直接把這段 prompt 丟給 cline，讓它自動完成。

    3. 半自動 pair programming（搭配本地 / 雲端模型）

    在 Reddit 上有不少人分享，把本地模型（例如 Qwen3.6 35B）搭配 agent 框架（如 little-coder、PI Coding Agent），透過「plan-first」工作流，讓本地模型在 Polyglot benchmark 上接近雲端模型表現。

    參考：
    – Qwen3.6-35B + little-coder 實測
    – PI Coding Agent + Qwen3.6 35B 實戰心得

    cline 做的是類似事情：

    • 把「計畫 → 分解任務 → 執行」這套流程搬進 IDE
    • 你可以接雲端模型（例如 Claude、OpenAI），也可以接本地模型（透過 OpenAI 相容 API）

    這樣你得到的是一個永遠不搶鍵盤、每步先跟你報告的 pair programmer。

    跟其他 VS Code Agent 工具怎麼選？

    名稱 核心功能 免費方案 適合誰
    cline (GitHub) 單一自主程式碼 Agent，內建檔案操作、終端機、瀏覽器，強調「每步需授權」 工具本身開源；需自備模型 API（金鑰可用免費額度） 想要在現有 VS Code 工作流中加一個安全的半自動助手
    Roo Code (GitHub) 多 Agent 協作，模擬「一整個開發團隊」，支援自動化測試、部署 開源；同樣需自備模型 API 想要嘗試多代理協作、較複雜工作流的進階使用者
    claude-context (GitHub) 把整個 codebase 變成 Claude 的上下文（MCP 工具） 開源；需有 Claude 帳號 重度使用 Claude Code，希望提升大專案上下文理解的人

    如果你只是想讓自己的 IDE 多一個「會聽話的 AI 助手」，cline 的上手成本最低。

    💡 關鍵： 已有模型 API 的使用者，只要裝好 cline，就能用很低成本把 IDE 升級成具備自主能力的開發環境。

    怎麼開始？最快上手路徑

    步驟一：安裝 cline

    最簡單方式是從 VS Code Extension 安裝：

    1. 打開 VS Code 的 Extensions 面板。
    2. 搜尋 cline，作者為 cline。
    3. 點選 Install。

    也可以從 GitHub 直接找到相關安裝說明：https://github.com/cline/cline

    （若未來提供 npm/CLI 版本，可以在 README 看到詳細指引。）

    步驟二：連接你的模型 API

    cline 不自帶模型，你需要自己準備一個：

    常見選項：

    • Claude（Anthropic）
    • OpenAI
    • 本地模型（透過 OpenAI 相容 API，如 Ollama、自架伺服器）

    設定方式（概念流程）：

    1. 在 cline 設定面板填入：
    2. API Base URL（例如 https://api.openai.com/v1 或你的本地 endpoint）
    3. API Key
    4. 模型名稱（例如 gpt-4.1、claude-3.5、或你自訂的本地模型名）
    5. 測試一個簡單 prompt：

      嗨，幫我列出這個專案的主要資料夾結構。

    6. 確認能讀到檔案與回覆，表示連線成功。

    步驟三：直接可用的「plan-first」工作流程 Prompt

    下面這段可以直接複製，當成你和 cline 的標準開場白，每次要做較大的變更都先貼一次：

    你是一個在 VS Code 裡運行的程式碼 Agent，請嚴格遵守以下工作流程：

1. 先閱讀專案的主要檔案與目錄，理解目前架構。
2. 針對我提出的需求，先幫我：
   - 列出最多 5 個澄清問題（如果有疑慮）。
   - 擬一份分步計畫（Step 1, Step 2...），每步不超過 2–3 個具體修改。
3. 把這份計畫寫成 `TODO.md` 放在專案根目錄，內容包含：
   - 任務描述
   - 預計修改檔案清單
   - 預計需要執行的指令（例如 test、build）。
4. 在我明確回覆「同意計畫」之前，不要修改任何程式碼。
5. 執行時：
   - 每次只完成 `TODO.md` 中的一個步驟。
   - 修改前先顯示預期變更與影響檔案。
   - 修改後自動幫我執行對應測試指令（若有），並總結結果。
6. 任務結束後，更新 `TODO.md`（標記完成項目），並用要點方式總結你做了什麼。

請先確認你理解上述流程，然後問我：這次要你幫忙的任務是什麼？

    有了這個「plan-first」腳本，你可以避免 Agent 一上來就亂改，先把計畫談好再動手。

    風險控管與實務建議

    最後幾個實際上很重要、但容易被忽略的點：

    • 權限只開專案資料夾：不要在整個 ~/ 或公司共用資料夾上跑；只針對單一 repo。
    • 先在測試 repo 試玩：隨便開一個 new repo，隨便寫一些 demo code，先讓 cline 練習跑 2–3 個任務，熟悉它的行為再用在正式專案。
    • 搭配版本控制：每個大任務都在新 branch 上跑，結束後自己再做一次 diff review。
    • 敏感資訊避免暴露：若你用雲端模型，注意不要讓它讀到含憑證 / 密鑰的設定檔，必要時把這些檔案加入 .gitignore 和 cline 的忽略清單。

    只要這幾個基本安全習慣有做到，cline 就可以很自然地變成你日常開發裡的「安全自動化助手」，從重構到寫測試，幫你把那些重複又耗時間的工作交給 Agent 處理。

    🚀 你現在可以做的事

    • 打開 VS Code 安裝 cline 擴充套件，並在一個測試用 repo 裡試跑 1–2 個小任務
    • 準備好你的模型 API（金鑰與 API Base URL），在 cline 設定面板完成連線測試
    • 建立一個標準的「plan-first」prompt 檔案，之後在每個新專案開頭都先貼給 cline 使用