Part 5 - 多種建議與快速鍵操作
🏠 課程首頁 📘 FB 🎥 YT

GitHub Copilot 完整教學

Part 5：多種建議與快速鍵操作

掌握 Copilot 的多種選擇，讓 AI 聽你的

多種建議 快速鍵 部分接受

🎯 本單元學習目標

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

1. 了解多種建議

知道 Copilot 對同一段程式碼會產生多個不同的建議

2. 開啟建議面板

學會用 Ctrl + Enter 一次查看所有建議選項

3. 切換建議

熟練使用 Alt + ] 和 Alt + [ 快速切換不同建議

4. 部分接受

掌握 Ctrl + → 逐字接受，精細控制建議內容

🤔 為什麼 Copilot 會有多種建議？

重要觀念：AI 不是只有一個「標準答案」，而是提供多種可能讓你選擇！

🧠 同一問題，多種解法

例如排序函式，可以用 bubble sort、quick sort、或內建方法，各有優缺點

✍️ 不同寫法風格

有人喜歡簡潔、有人喜歡易讀，Copilot 會提供不同風格的程式碼

🎯 讓開發者做主

AI 是輔助工具，最終選擇權在你手上

📚 學習不同寫法

透過比較不同建議，可以學到新的程式寫法

教學重點：「不是 AI 給你一個答案，是你用快速鍵在不同答案之間做選擇。」

📋 開啟建議面板：一次看所有建議

開啟 Copilot 建議面板

Ctrl + Enter

Mac 使用者：Cmd + Enter

操作步驟

1

輸入程式碼開頭

例如：function sortArray(arr) {

2

按 Enter 換行

游標停在新的一行

3

按 Ctrl + Enter

開啟建議面板，一次看到所有可用的建議！

📸 建議面板實際畫面

Copilot 建議面板

按 Ctrl + Enter 後出現的 Copilot 建議面板

畫面說明：
  • 獨立的建議面板會出現在編輯器中
  • 顯示多個程式碼建議（每個是一整段程式）
  • 可以點選「Accept」按鈕接受選中的建議

🔄 多個不同的建議選項

多個建議選項

同一個函式，Copilot 提供多種不同的實作方式

教學重點：這張圖證明了 Copilot 不是只有一個答案！
「原來同一個排序函式，可以有這麼多種寫法讓我選。」

⬅️ ➡️ 切換建議：不開面板的快速方法

如果你不想開啟面板，可以直接在編輯器中切換不同建議：

切換到下一個建議

Alt + ]

Mac 使用者：Option + ]

切換到上一個建議

Alt + [

Mac 使用者：Option + [

優點：不用開面板，直接在編輯器中即時預覽不同建議，速度更快！

📸 內嵌建議：灰色提示

內嵌灰色建議

編輯器中的灰色建議（尚未接受）

畫面說明：
  • 灰色文字 = Copilot 的建議（還沒接受）
  • 游標在建議前方
  • 可以按 Alt + ] 切換到其他建議

📸 按 Alt + ] 後：切換到另一個建議

切換後的建議

按 Alt + ] 後，建議內容已經改變

觀察重點：
  • 灰色建議的「內容已經不同」
  • 可能是不同寫法、不同演算法
  • 繼續按 Alt + ] 可以看到更多選項

⌨️ 快速鍵總整理（必背！）

功能 Windows / Linux Mac
接受建議 Tab Tab
拒絕建議 Esc Esc
下一個建議 Alt + ] Option + ]
上一個建議 Alt + [ Option + [
開啟建議面板 Ctrl + Enter Cmd + Enter
部分接受（逐字） Ctrl + → Cmd + →
重點：這些快速鍵一定要熟練！用 Copilot 的效率差別就在這裡。

✂️ 部分接受：逐字接受建議

進階技巧：Copilot 不是只能「全收」或「全不要」，你可以只接受一部分！

逐字接受建議

Ctrl + →

Mac 使用者：Cmd + →

使用情境

  • 建議的前半段很好，但後半段不太對
  • 想要逐步確認每個部分
  • 需要更精細的控制
操作方式：每按一次 Ctrl + →，就會接受一個詞（Word）

📸 部分接受實際效果

部分接受建議

只接受建議的一部分，前半段已變正式顏色，後半段仍是灰色

畫面說明：
  • 前半段：已變成正式程式碼顏色（已接受）
  • 後半段：仍然是灰色建議（尚未接受）
  • 可以繼續按 Ctrl + → 接受更多，或按 Esc 取消剩餘部分

⚙️ 確認 Copilot 設定狀態

如果 Copilot 沒有反應，可以到設定頁面確認：

1

開啟設定

Ctrl + ,

2

搜尋 Copilot

在搜尋框輸入 copilot

Copilot 設定

VS Code 設定中的 Copilot 相關選項

💡 獲得更好建議的小技巧

1. 清楚的函式名稱

用 calculateTotalPrice 而不是 calc，讓 AI 更懂你的意圖

2. 提供足夠上下文

檔案中已有的程式碼會影響建議品質

3. 有意義的變數名稱

用 userAge 而不是 x

4. 加入註解說明

用中文或英文註解描述你想要的功能

重要觀念：如果建議都不滿意，試著自己先輸入幾個字，讓 Copilot 根據你的開頭重新生成建議。

❓ 常見問題 Q&A

問題 解答
為什麼有時只有一個建議？ 簡單的程式碼可能只有一種最佳解法，這是正常的
建議都不滿意怎麼辦？ 自己先輸入幾個字，讓 Copilot 根據你的開頭重新生成
Alt + ] 沒反應？ 確認畫面中有灰色建議，且游標在建議前方
Ctrl + Enter 沒開面板？ 可能該位置沒有建議，試著換個位置或重新輸入

🏋️ 實作練習

練習目標：熟悉所有快速鍵操作

練習步驟

  1. 建立新檔案 practice5.js
  2. 輸入：function sortArray(arr) { 然後按 Enter
  3. 按 Ctrl + Enter 開啟建議面板，觀察有幾種建議
  4. 按 Esc 關閉面板
  5. 等待灰色建議出現，按 Alt + ] 切換建議
  6. 按 Ctrl + → 逐字接受部分建議
// 練習用程式碼
function sortArray(arr) {
    // 在這裡等待 Copilot 建議
}

📝 隨堂測驗

問題 1：如何開啟 Copilot 建議面板？

A. Tab
B. Ctrl + Enter
C. Alt + ]
D. Ctrl + →

問題 2：如何切換到下一個建議（不開面板）？

A. Tab
B. Ctrl + Enter
C. Alt + ]
D. Esc

問題 3：如何只接受建議的一部分（逐字接受）？

A. Tab
B. Ctrl + →
C. Alt + [
D. Ctrl + Enter

✅ 測驗解答

問題 1 答案：B

Ctrl + Enter 可以開啟 Copilot 建議面板，一次查看所有可用的建議。

問題 2 答案：C

Alt + ] 可以在編輯器中直接切換到下一個建議，不需要開啟面板。

問題 3 答案：B

Ctrl + → 是「逐字接受」功能，每按一次接受一個詞。

🎉 Part 5 重點回顧

多種建議

Copilot 會提供多種不同的程式碼建議，讓你選擇最適合的

建議面板

Ctrl + Enter
一次查看所有建議

切換建議

Alt + ] 下一個
Alt + [ 上一個

部分接受

Ctrl + →
逐字接受，精細控制

核心觀念

「不是 AI 給你一個答案，是你用快速鍵在不同答案之間做選擇。」

下一單元預告

Part 6：註解驅動開發 - 用中文寫程式
學會用中文註解讓 Copilot 幫你寫程式！