編輯現有程式碼
精準修改你的專案
⏱ 預估 ~7 分鐘
01 · 讀一讀
建新檔很厲害，但大部分真實開發是編輯現有程式碼。在 app 加功能、修 bug、改設計、重構函式。
這裡 Claude Code 真的會發光。因為它能讀你整個專案，它了解上下文。你叫它加 footer，它知道有什麼 HTML 結構。你叫它改樣式，它知道要改哪個 CSS 檔。
Claude 不從零開始 — 它外科手術式地改剛好需要改的，其他不動。
💡 想像一下想像你叫包商在你家加蓋一個房間。爛包商可能會隨便砸牆。好包商會研究藍圖、了解結構、把房間加在剛好對的位置。Claude Code 是好包商。
02 · Prompt 範本
叫 Claude 在你上一課做的 HTML 加 footer。明確說要放什麼。
在 index.html 加上頁尾，內容包含 copyright 2024 和一個指向 GitHub 的連結
03 · Prompt 範本
現在叫 Claude 改 CSS。這是精準改動 — Claude 應該只更新相關的樣式規則。
把導覽列改成 sticky，捲動時固定在頂端
04 · 真機練習
現在用你 Level 4 學的工具 — git diff。它顯示 Claude 確切改了什麼。綠色是新增，紅色是刪除。
git diff
05 · 讀一讀
這是關鍵習慣：commit 前永遠檢查改動。Claude 強大但不完美。你應該永遠：- 讀過 diff 了解改了什麼 - 在瀏覽器或跑程式碼測試改動 - 滿意才 commit
git diff 是你最好的朋友。它一行一行告訴你什麼被加、刪、改。
重點整理
- Commit 前永遠檢查改動
- git diff 告訴你 Claude 改了什麼
- 綠色（+）= 新增，紅色（-）= 刪除
- Claude 外科手術式編輯 — 只改需要的
06 · 選擇題
Claude 編輯你程式碼後，什麼指令告訴你確切改了什麼？
- git status
- git log
- git diff
- git show
07 · 填空
Commit 前要看 Claude 確切改了哪幾行，跑 git ___。
⚠ 完整互動體驗需要 JavaScript。請啟用 JavaScript 後重新整理。
※ 本站為獨立繁中教學專案，非 Anthropic 官方產品。Claude™ 為 Anthropic, PBC 商標。