Part 7 - Copilot Chat 基礎
🏠 課程首頁 📘 FB 🎥 YT

GitHub Copilot 完整教學

Part 7：Copilot Chat 基礎

與 AI 對話，用聊天的方式寫程式

對話式開發 Chat 面板 程式碼解釋

🎯 本單元學習目標

完成這個單元後，你將能夠：

1. 了解 Chat 與補全的差異

知道什麼時候用自動補全、什麼時候用 Chat

2. 開啟 Chat 面板

學會多種開啟 Copilot Chat 的方法

3. 基本對話操作

用自然語言請 AI 幫你寫程式、解釋程式

4. 程式碼插入與解釋

將 Chat 產生的程式碼插入編輯器，或請 AI 解釋現有程式

🔄 自動補全 vs Copilot Chat

比較項目 自動補全（Part 4-6） Copilot Chat（本單元）
互動方式 被動提示（自動出現灰色建議） 主動對話（你問它答）
適合場景 短程式碼、補全當前行 長程式碼、解釋、重構、除錯
操作位置 直接在編輯器中 獨立的 Chat 面板
回應形式 程式碼建議 程式碼 + 文字解釋
使用建議：
  • 寫程式時 → 用自動補全（快速、不中斷）
  • 需要解釋、除錯、大改 → 用 Chat（詳細、互動）

💬 開啟 Copilot Chat 面板

有多種方式可以開啟 Chat：

1

方法一：點擊側邊欄圖示（推薦）

在 VS Code 左側找到 Copilot Chat 圖示（對話泡泡或 Copilot 標誌）

2

方法二：快捷鍵

Ctrl + Alt + I

3

方法三：命令面板

Ctrl + Shift + P → 輸入 Copilot Chat

Chat 圖示位置

左側側邊欄的 Copilot Chat 圖示位置

📋 Chat 面板介面說明

Chat 面板介面

開啟後的 Copilot Chat 面板

介面組成：
  • 對話歷史區：顯示你與 Copilot 的對話紀錄
  • 輸入框：在底部輸入你的問題或需求
  • 新對話按鈕：開始新的對話主題

🗣️ 基本對話示範：請 AI 寫程式

幫我寫一個計算 BMI 的 Python 函式
好的！這是一個計算 BMI 的函式...
def calculate_bmi(weight, height):
    return weight / (height ** 2)
BMI 對話

詢問 Copilot 寫一個計算 BMI 的函式

📥 將程式碼插入編輯器

Chat 產生的程式碼，可以輕鬆插入到編輯器中：

Insert at Cursor

程式碼區塊上方的「Insert at Cursor」和「Copy」按鈕

📋 Insert at Cursor

直接將程式碼插入到編輯器中游標的位置

📄 Copy

複製程式碼到剪貼簿，自己決定貼在哪裡

🔀 Chat 的兩種回應模式

Copilot Chat 會根據你的問題，選擇不同的回應方式：

🟢 模式 A：純 Chat 回應

  • Chat 中顯示程式碼區塊
  • 上方有 Insert at Cursor / Copy 按鈕
  • 程式碼還沒進入編輯器，由你決定

🔵 模式 B：Agent 工具模式

  • Chat 顯示「已建立 xxx.py」或「已修改 xxx.py」
  • 程式碼直接進入編輯器
  • 編輯器顯示綠色區塊 + Keep / Undo 按鈕
教學重點：「如果 Copilot 已經幫你把程式碼放進檔案，那就不會再出現 Insert at Cursor，因為它已經幫你插好了。」

🖱️ 右鍵選單：快速操作

選取程式碼後，按右鍵可以快速存取 Copilot 功能：

右鍵選單

選取程式碼後，右鍵選單顯示 Copilot 選項

常用右鍵選項：
  • Explain：解釋這段程式碼在做什麼
  • Fix：修復程式碼中的問題
  • Optimize：優化程式碼效能
  • Generate Docs：產生文件/註解

📖 請 AI 解釋程式碼

看不懂某段程式碼？讓 Copilot 幫你解釋：

1

選取程式碼

用滑鼠反白選取你想了解的程式碼

2

在 Chat 中提問

輸入「解釋這段程式碼」然後送出

解釋程式碼

Copilot 詳細解釋程式碼的功能

💡 Chat 常用提問範例

目的 提問範例
寫新程式 「幫我寫一個計算陣列平均值的函式」
解釋程式 「解釋這段程式碼在做什麼」
找 Bug 「這段程式碼有什麼 bug？」
優化程式 「如何優化這段程式碼的效能？」
修改程式 「幫我把這個函式改成用遞迴」
加入功能 「幫這段程式加上錯誤處理」
產生測試 「幫這個函式寫單元測試」

🏋️ 實作練習

練習目標：熟悉 Copilot Chat 的基本操作

練習步驟

  1. 開啟 Copilot Chat 面板
  2. 輸入：「幫我寫一個判斷質數的 Python 函式」
  3. 觀察回應，點擊「Insert at Cursor」插入程式碼
  4. 選取插入的程式碼，在 Chat 問：「解釋這段程式碼」
  5. 再問：「這個函式有什麼可以改進的地方？」
注意：如果 Chat 直接建立了檔案（顯示「已建立 xxx.py」），那是正常的，這是 Agent 模式自動幫你處理了。

📝 隨堂測驗

問題 1：Copilot Chat 和自動補全最大的差異是什麼？

A. Chat 只能用英文
B. Chat 是主動對話，補全是被動提示
C. Chat 比較慢
D. Chat 需要付費

問題 2：如何讓 Copilot 解釋一段程式碼？

A. 按 Tab
B. 選取程式碼後在 Chat 問「解釋這段程式碼」
C. 按 Ctrl + Enter
D. 重新安裝 Copilot

問題 3：Chat 回應中的「Insert at Cursor」按鈕有什麼功能？

A. 刪除程式碼
B. 將程式碼插入到編輯器游標位置
C. 複製到剪貼簿
D. 開啟新檔案

✅ 測驗解答

問題 1 答案：B

Copilot Chat 是主動對話模式，你問它答；自動補全是被動提示，在你輸入時自動出現建議。

問題 2 答案：B

選取程式碼後，在 Chat 輸入「解釋這段程式碼」或使用右鍵選單的 Explain 功能。

問題 3 答案：B

「Insert at Cursor」會將 Chat 產生的程式碼直接插入到編輯器中游標所在的位置。

🎉 Part 7 重點回顧

Chat vs 補全

Chat 主動對話、詳細解釋
補全被動提示、快速補完

開啟 Chat

側邊欄圖示
或 Ctrl + Alt + I

程式碼插入

Insert at Cursor
或 Copy 複製貼上

解釋程式碼

選取 → Chat 問
「解釋這段程式碼」

核心觀念

「Chat 是你的 AI 程式助教，有問題就問它！」

下一單元預告

Part 8：Copilot Chat 進階技巧
學習更多 Chat 的進階用法！