xDev Asia

使用 Vibe Coding 時確保程式碼品質。程式碼審查人工智慧產生的程式碼。語法檢查、格式化、型別安全。指標和 KPI。應避免反模式。 Vibe Coding 工作流程中程式碼品質的最佳實務。

使用 GitHub Copilot 進行 Vibe 編碼：從基礎知識到高級

第 6 部分：專業 Vibe 編碼 — 品質、安全與生產

亞洲開發網

1. Vibe Coding 的品質問題

Andrej Karpathy 在介紹 Vibe Coding 時說： 「我只是看東西、說東西、運行東西、複製貼上東西，而且大部分都有效。” 但是 “大部分有效” 不足以用於生產代碼。

實際數據（2025-2026）：

來源	偵測
亞特清除 (2025)	應用人工智慧後「程式碼流失」增加——編寫更多程式碼，然後編輯/刪除
維拉代碼 (2026)	72% 使用人工智慧產生程式碼的應用程式至少存在 1 個安全漏洞
碼兔 (2026)	人工智慧程式碼審查可以檢測人類審查人員遺漏的錯誤

2. 如何檢視人工智慧產生的程式碼

2.1. AI 程式碼檢查清單審查

✅ 邏輯正確性: 代碼能滿足要求嗎？
✅ 邊緣情況：AI常會漏掉null、empty、邊界情況
✅ 錯誤處理: 捕獲錯誤是否合適？
✅ 安全性：輸入驗證、驗證檢查、SQL 注入
✅ 效能：N+1次查詢，不必要的重新渲染
✅ 命名：變數、函數有意義嗎？
✅ 重複：人工智慧經常產生而不是重複使用現有程式碼

2.2.使用Copilot檢視自己的程式碼

// Prompt: Review this code for: 1. Security vulnerabilities 2. Performance issues 3. Edge cases not handled 4. Code that doesn't follow our project conventions 5. Potential bugs

Be critical and thorough. List every issue found.

2.3.反模式在人工智慧程式碼中很常見

反模式	例如	修復
神功能	一個 200 行的函數可以完成所有事情	分成更小的功能
複製貼上程式碼	重複邏輯而不是提取	提取共享實用程式
硬編碼值	神奇數字、程式碼中的 URL	移至配置/環境
錯誤處理能力弱	無提示捕獲或一般錯誤	具體錯誤處理
缺少驗證	完全信任使用者輸入	在邊界處驗證
過度設計	抽象太早，工廠模式1個案例	YAGNI — 僅在需要時構建

3. 自動化品質門

3.1. ESLint + Prettier + Copilot Hooks

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "github.copilot.chat.hooks": {
    "postSave": [
      {
        "command": "npx eslint --fix ${file}",
        "pattern": "**/*.{ts,tsx}"
      }
    ]
  }
}

3.2.預提交掛鉤

// package.json
{
  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "npm test"
    }
  }
}

3.3. CI/CD 品質檢查

# .github/workflows/quality.yml
name: Code Quality
on: [pull_request]
jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      - run: npx tsc --noEmit          # Type check
      - run: npx eslint .              # Lint
      - run: npm test -- --coverage    # Tests + coverage
      - run: npx knip                  # Dead code detection

4. 類型安全－第一道防線

TypeScript 嚴格模式捕捉了 AI 創建的許多錯誤：

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitReturns": true,
    "exactOptionalPropertyTypes": true
  }
}

// Prompt mẫu yêu cầu type safety:
Ensure all functions have explicit return types.
Use discriminated unions for API responses.
No 'any' types — use 'unknown' with type guards instead.

5. 測試覆蓋率策略

需要AI程式碼 測試更多，不少於：

// Prompt:
Write tests for the TaskService focusing on:
1. Happy path for each method
2. Edge cases: empty input, null values, max length
3. Authorization: user can only access own projects
4. Concurrent modifications
5. Database constraint violations

最低覆蓋目標：

圖層	目標	原因
業務邏輯	90%+	核心域需要準確
API端點	80%+	合約整合測試
使用者介面組件	70%+	使用者體驗互動測試
公用事業	95%+	純函數易於測試

6. Vibe 編碼的指標和 KPI

公制	測量什麼？	目標
錄取率	接受人工智慧建議的百分比	30-40%（太高=沒審查）
程式碼流失	兩週內編輯/刪除的程式碼百分比	<25%
蟲子密度	每 1000 個 LOC 的錯誤	與AI之前相比減少或保持不變
審核意見	審閱者要求修復 AI 代碼的次數	隨著時間的推移而減少
PR 合併時間	從 PR 建立到合併的時間	減少但不是因為跳過審核

7. 最佳實務總結

不要盲目接受：讀取每個AI生成的行
請AI解釋一下：“解釋一下你為什麼選擇這種方法”
盡可能先測試：先寫測試，用AI來實現
增量生成：產生每個小部分，在繼續之前檢查一下
客製說明：透過強制執行編碼標準 副駕駛指令.md
自動門：CI/CD 捕捉人類審閱者錯過的錯誤
衡量品質：追蹤指標以了解人工智慧是有幫助還是有害

八、總結

負責任地進行 Vibe 編碼 =利用人工智慧的速度+維持人體工學的品質。

產生的AI程式碼需要審核 更仔細地 人類編寫的程式碼，因為：

人工智慧不理解業務背景
人工智慧優先考慮「看起來正確」的程式碼而不是「運行正確」的程式碼
AI不知道專案中目前有哪些程式碼

下一篇： Vibe 編碼的安全性 — 常見的安全漏洞以及如何避免它們。

第 17 課：程式碼品質與審查 — Vibe Responsible Coding