新手教學

VSCode、GitHub CLI（gh）與 GitHub Copilot 免費版完整使用教學

前言：

理解 VSCode、GitHub Copilot 與 Cursor 的關係。在開始教學之前，先讓我們了解這三個工具之間的關係與定位。

VSCode (Visual Studio Code)

定位：微軟 (Microsoft) 開發的免費、開源程式碼編輯器
特色：輕量、快速、擴充性強，支援幾乎所有程式語言
使用方式：可安裝各種擴充套件來增強功能

GitHub Copilot

定位：AI 程式設計助手，以擴充套件形式存在
特色：Microsoft 的 AI 優先、內建解決方案
使用方式：可安裝在多種 IDE 中，包括 VSCode、JetBrains IDEs、Visual Studio 等

Cursor

定位：基於 VSCode 的 AI 優先獨立 IDE
特色：VSCode 的分支版本，內建進階 AI 功能
使用方式：完整的獨立程式碼編輯器，不需要額外安裝擴充套件

關鍵差異對比

特性	VSCode + GitHub Copilot	Cursor
基礎架構	原版 VSCode + AI 擴充套件	VSCode 分支 + 深度整合 AI
AI 整合程度	外掛式整合	AI 整合深度運行，超越擴充套件層級
專案上下文理解	專注於當前檔案和少量最近寫的程式碼	可索引並考慮整個工作區，提供跨檔案建議
多檔案操作	有限的多檔案感知	適合跨多檔案重構和新增功能
IDE 相容性	支援多種 IDE：VSCode、JetBrains、Visual Studio、Vim 等	僅 Cursor 自身
模型選擇	GitHub 託管的模型	原生支援更多模型：OpenAI、Claude、Gemini、Grok、DeepSeek
入門門檻	低（使用熟悉的 VSCode）	中等（需學習新的 AI 工作流程）
成本	個人版：每月 $10 美元	專業版：每月 $20 美元

如何選擇

選擇 VSCode + GitHub Copilot 的情境：

已經熟悉 VSCode 或其他支援的 IDE
希望在現有工作流程中加入 AI 助手
需要跨多個 IDE 使用相同的 AI 功能
預算考量（成本較低）
重視企業級合規性（SOC 2 合規、企業就緒）

選擇 Cursor 的情境：

需要複雜專案的進階 AI 功能和細緻控制
希望 AI 能理解整個專案脈絡
偏好更深度的 AI 協作體驗
重視專案全域重構和多檔案同步修改
不介意學習新的開發環境

本教學專注於 VSCode + GitHub Copilot 的組合，這是目前最多開發者使用的選擇，也是進入 AI 輔助程式設計最平緩的學習路徑。

第一部分：VSCode 詳細安裝教學

步驟 1：下載 VSCode

1.1 前往官網下載

開啟瀏覽器，前往 Visual Studio Code 官網
自動偵測系統：網站會自動偵測你的作業系統並顯示對應的下載按鈕
手動選擇版本：點擊下載按鈕旁的下拉箭頭可選擇其他版本

1.2 版本選擇指南

Windows 使用者：

User Installer (64-bit)：建議選擇，安裝到使用者資料夾
System Installer (64-bit)：需要管理員權限，安裝到系統資料夾
ZIP Archive：免安裝版本，適合隨身碟使用

macOS 使用者：

Universal：同時支援 Intel 和 Apple Silicon (M1/M2) 晶片
Intel Chip：僅適用於 Intel 處理器的 Mac
Apple Silicon：僅適用於 M1/M2 處理器的 Mac

Linux 使用者：

.deb：適用於 Ubuntu、Debian 及其衍生版本
.rpm：適用於 Red Hat、SUSE 及其衍生版本
Snap：通用套件格式
tar.gz：通用壓縮檔

步驟 2：詳細安裝程序

2.1 Windows 安裝步驟

執行安裝程式
- 雙擊下載的 VSCodeUserSetup-{version}.exe 檔案
- 如果出現 Windows 防護提示，點擊「仍要執行」
安裝精靈設定
- 授權合約：閱讀並接受 MIT 授權合約
- 安裝位置：建議使用預設路徑 %LOCALAPPDATA%\Programs\Microsoft VS Code
重要選項設定（強烈建議全部勾選）
- 建立桌面圖示
- 新增到 PATH 環境變數（重要：讓你可以在命令列使用 code 命令）
- 註冊為支援檔案類型的編輯器
- 新增「使用 Code 開啟」到檔案總管右鍵選單
- 新增「使用 Code 開啟」到資料夾總管右鍵選單
完成安裝
- 點擊「安裝」等待安裝完成
- 勾選「啟動 Visual Studio Code」

2.2 macOS 安裝步驟

下載並解壓縮
- 開啟 Downloads 資料夾
- 雙擊 VSCode-darwin-universal.zip 進行解壓縮
安裝應用程式
- 將解壓縮後的 Visual Studio Code.app 拖曳到 Applications 資料夾
- 首次開啟時，macOS 會詢問是否要開啟此應用程式，點擊「開啟」
命令列工具設定（可選但建議）
- 開啟 VSCode
- 按 Cmd+Shift+P 開啟命令面板
- 輸入 shell command: install
- 選擇「Shell Command: Install 'code' command in PATH」
- 這樣就可以在終端機使用 code 命令

2.3 Linux 安裝步驟（Ubuntu/Debian）

方法一：使用官方儲存庫（建議）

# 更新套件列表
sudo apt update

# 安裝必要的相依套件
sudo apt install software-properties-common apt-transport-https wget

# 新增 Microsoft GPG 金鑰
wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -

# 新增 VSCode 儲存庫
sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/code stable main"

# 安裝 VSCode
sudo apt update
sudo apt install code

方法二：下載 .deb 套件

# 下載 .deb 檔案
wget -O code_latest_amd64.deb https://go.microsoft.com/fwlink/?LinkID=760868

# 安裝套件
sudo dpkg -i code_latest_amd64.deb

# 修復相依性問題（如果有的話）
sudo apt-get install -f

步驟 3：VSCode 初始設定和最佳化（選填）

3.1 選擇佈景主題

VSCode 首次啟動時會提示選擇主題：

Dark+ (default dark)：深色主題，適合長時間程式設計
Light+ (default light)：淺色主題，適合明亮環境
High Contrast：高對比主題，適合視覺需求特殊的使用者

3.2 安裝中文語言套件

開啟擴充套件商店
- 點擊左側邊欄的擴充套件圖示（四個方塊）
- 或按 Ctrl+Shift+X（macOS：Cmd+Shift+X）
搜尋中文語言套件
- 在搜尋框輸入 Chinese
- 找到「Chinese (Traditional) Language Pack for Visual Studio Code」
- 點擊「Install」安裝
套用語言設定
- 安裝完成後，右下角會出現「Change Language and Restart」提示
- 點擊重新啟動 VSCode
- 如果沒有自動切換，按 Ctrl+Shift+P，輸入 Configure Display Language

3.3 基本設定最佳化

開啟設定：

按 Ctrl+,（macOS：Cmd+,）
或 檔案 → 喜好設定 → 設定

建議調整的設定：

自動儲存
- 搜尋 auto save
- 設定為 afterDelay（自動儲存）
字型大小
- 搜尋 editor.fontSize
- 建議設定為 14-16（依個人喜好）
縮排設定
- 搜尋 editor.tabSize
- 設定為 2 或 4（依專案需求）
- 搜尋 editor.insertSpaces
- 建議啟用（使用空格而非 Tab）
自動換行
- 搜尋 editor.wordWrap
- 設定為 on（長行自動換行）

3.4 必裝擴充套件推薦

基礎開發套件：

Prettier - Code formatter：程式碼格式化
ESLint：JavaScript/TypeScript 程式碼檢查
Auto Rename Tag：自動重命名 HTML 標籤
Bracket Pair Colorizer：括號配對著色

前端開發套件：

Live Server：本地開發伺服器
HTML CSS Support：HTML 中的 CSS 自動完成
JavaScript (ES6) code snippets：ES6 程式碼片段

第二部分：GitHub CLI 安裝與設定

步驟 1：安裝 GitHub CLI

1.驗證安裝

gh --version

應該會顯示類似 gh version 2.x.x 的版本資訊。如果沒有會出現 not found等字樣。

macOS 用戶

使用 Homebrew 安裝

brew install gh

安裝可能會需要一些時間需要等一下。

安裝完會出現。

Windows (WSL/Ubuntu) 用戶

於wsl的環境內

更新套件列表並安裝

sudo apt update
sudo apt install gh

再次驗證安裝

gh --version

應該會顯示類似 gh version 2.x.x 的版本資訊。

GitHub CLI 認證設定

步驟 1：登入 GitHub 帳號

gh auth login

步驟 2：選擇認證方式

執行上述命令後，會出現以下選項：

選擇 GitHub 服務

選擇 GitHub.com（一般用戶）

選擇認證協定

選擇 HTTPS

輸入y按下enter

選擇認證方式

選擇Login with a web browser：透過瀏覽器登入

步驟 3：完成瀏覽器認證

選擇 "Login with a web browser"
系統會顯示一組驗證碼
按下 Enter 鍵，系統會嘗試開啟瀏覽器
在瀏覽器中：

輸入顯示的驗證碼

使用你的 GitHub 帳號登入

授權 GitHub CLI 存取你的帳號

驗證設定是否成功

gh auth status

設定 Git 配置

雖然已經設定了 GitHub CLI，但仍需要配置 Git 的使用者資訊：

設定你的姓名（可以是真名或暱稱）

git config --global user.name "你的姓名"

設定你的 GitHub 註冊email

git config --global user.email "你的GitHub註冊email"

為什麼要設定配置？

如果沒有設定， Git 會在第一次 commit 時顯示警告訊息，要求你設定身份資訊。

驗證 Git 配置

檢查所有配置

git config --list

檢查特定配置

git config user.name
git config user.email

均設定完成後，就可以請Claude Code幫您管理github了喔。

注意：

請他幫您管理時，

需密切留意是否將您的密碼、金鑰等機密資料上傳。

常用 GitHub CLI 命令

克隆倉庫

gh repo clone 使用者名稱/倉庫名稱

例如：

gh repo clone luka/unit1

我的使用者名稱為luka 倉庫名稱，也就是repo的名稱為 unit1

創建新倉庫

gh repo create 倉庫名稱 --public

查看 issue

gh issue list

第三部分：GitHub Copilot 免費版在 VS Code 的安裝指南

安裝步驟

1. 安裝 VS Code 擴充功能

打開 VS Code
點擊左側活動欄的擴充功能圖示（或按 Ctrl+Shift+X）

搜尋並安裝以下兩個擴充功能：
- 「GitHub Copilot」 - 提供程式碼自動補全
- 「GitHub Copilot Chat」 - 提供對話式程式設計協助

2. 登入 GitHub 帳號

安裝後會提示登入 GitHub
點擊「Sign in to GitHub」
在瀏覽器中完成授權

3. 啟用免費版

GitHub Copilot 現在提供免費方案，每月有一定的使用額度
首次使用會自動套用免費方案

4. 開始使用

程式碼補全：直接在編輯器中輸入程式碼，Copilot 會自動建議
Chat 功能：按 Ctrl+Shift+I 開啟聊天面板，或點擊左側的 Chat 圖示

安裝後就像平常和gpt聊天即可。

Ask 模式實戰範例

範例 1：概念學習

輸入提示：

什麼是 JavaScript 閉包 (Closure)？請用簡單易懂的方式解釋，並提供實際範例。

典型回應模式：

概念定義解釋
工作原理說明
實際程式碼範例
常見使用情境

範例 2：程式碼解釋

輸入提示：

請解釋這段 React Hook 程式碼的作用：

useEffect(() => {
  const subscription = api.subscribe(data => setData(data));
  return () => subscription.unsubscribe();
}, []);

典型回應內容：

逐行程式碼解釋
Hook 的生命週期說明
清理函式的重要性
相關最佳實踐

範例 3：最佳實踐諮詢

輸入提示：

在 React 專案中，什麼時候應該使用 useState，什麼時候應該使用 useReducer？

典型回應結構：

兩者的差異比較
使用時機指導
程式碼範例對比
效能考量說明

範例 4：除錯協助

輸入提示：

我的 async/await 函式沒有正確等待，可能的原因有哪些？

async function fetchData() {
  const result = getData();
  console.log(result); // 顯示 Promise 物件
}

典型回應方向：

問題診斷分析
常見錯誤模式
修正方式建議
相關注意事項

範例 5：API 使用查詢

輸入提示：

如何使用 Fetch API 發送 POST 請求並處理 JSON 回應？請包含錯誤處理。

回應會包含：

完整程式碼範例
參數設定說明
錯誤處理模式
實際使用建議

Ask 模式進階技巧

1. 上下文參考

檔案參考：

請解釋 #file:src/components/Header.js 中的 props 傳遞方式

特定程式碼段落：

關於這段程式碼：
```選中的程式碼```
為什麼使用 useCallback Hook？

2. 漸進式提問

第一次提問：

什麼是 Redux？

追問深化：

Redux 和 React Context API 相比有什麼優缺點？

實作相關：

在小型專案中，是否值得使用 Redux？

3. 特定情境諮詢

效能最佳化：

如何最佳化包含大量資料的 React 列表元件效能？

架構設計：

建立可維護的大型 React 應用程式有哪些最佳實踐？

工具選擇：

TypeScript vs PropTypes，哪個更適合 React 專案的型別檢查？

Ask 模式限制與注意事項

使用限制

免費版每月限制 50 次聊天請求
不會直接修改你的程式碼檔案
回應長度有限制（需要分多次提問深入討論）

最佳實踐建議

提問技巧：

具體明確地描述問題
提供相關的程式碼上下文
說明你的技術背景水準
指定偏好的解釋深度

善用追問：

如果回答太簡略，可以要求更詳細的解釋
如果回答太複雜，可以要求簡化說明
針對特定部分提出進一步問題

效率建議：

將複雜問題拆分成多個簡單問題
優先處理最重要的疑問
善用免費版的 50 次額度

第四部分：Agent 模式深度實戰指南

Agent 模式核心概念

Agent 模式代表了 AI 輔助程式設計的進階階段，它是一個自主的、能動的即時同步協作者，基於自然語言提示執行多步驟程式設計任務。

與 Ask 模式的本質差異

特性層面	Ask 模式	Agent 模式
互動性質	被動回答問題	主動解決問題並執行任務
程式碼修改	絕不修改檔案	自動跨多檔案編輯
工作範圍	單一問答互動	多步驟任務執行
上下文理解	當前對話上下文	自動找到精確上下文並設定檔案工作集
錯誤處理	提供除錯建議	監控錯誤並自動修正
工具使用	不使用外部工具	可執行終端命令和呼叫工具

Agent 模式工作原理

Agent 模式的工作流程包括以下步驟：

任務解析：解析你的提示並請 AI 語言模型決定如何解決任務
上下文分析：分析程式碼庫以掌握完整上下文
多步驟規劃：規劃並執行多步驟解決方案
錯誤監控：監控第一次迭代的錯誤並決定如何修正
自我修正：回應編譯和檢查錯誤，監控終端和測試輸出，並在迴圈中自動修正直到任務完成

啟動和使用 Agent 模式

啟動 Agent 模式

方法一：從聊天視窗

開啟聊天視窗（Ctrl+Alt+I）
點擊下方的模式選單
從「Ask」切換到「Agent」

方法二：從 Copilot Edits 檢視

在 VS Code Insiders 中，開啟 Copilot Edits 檢視
從模式下拉選單選擇 Agent
輸入你的提示

介面元素說明

Agent 模式專有功能：

工具設定圖示：可設定 Agent 可使用的工具
暫停/繼續按鈕：控制 Agent 執行狀態
撤銷控制：使用聊天檢視標題欄的「Undo Last Edit」控制

Agent 模式實戰案例

案例 1：從零建立完整應用程式

提示範例：

建立一個待辦事項 (Todo) 網頁應用程式，要求：
1. 使用 React 18 和 TypeScript
2. 包含新增、刪除、編輯、標記完成功能
3. 使用 CSS Modules 進行樣式設計
4. 資料持久化到 localStorage
5. 響應式設計，支援手機版面

Agent 執行過程：

分析需求並建立專案結構
初始化 React TypeScript 專案
建立元件檔案：TodoApp, TodoItem, TodoList
實作狀態管理和業務邏輯
新增 CSS Modules 樣式檔案
實作 localStorage 持久化
新增響應式設計媒體查詢
測試功能並修正錯誤

案例 2：程式碼重構和現代化

提示範例：

重構這個專案中的所有 JavaScript 檔案：
1. 轉換為 TypeScript
2. 將類別元件改為函式元件和 Hooks
3. 新增適當的型別定義
4. 使用現代 ES6+ 語法
5. 新增 ESLint 和 Prettier 設定
6. 確保所有功能正常運作

Agent 處理流程：

掃描專案中的所有 JS 檔案
逐一轉換為 TypeScript
重構類別元件為函式元件
新增型別定義檔案
設定 TypeScript 組態
安裝和設定 ESLint/Prettier
執行型別檢查和程式碼檢查
修正發現的問題

案例 3：新增複雜功能

提示範例：

為現有的電商網站新增使用者認證系統：
1. 使用 JWT 令牌機制
2. 包含註冊、登入、登出功能
3. 新增受保護的路由
4. 使用 React Context 管理認證狀態
5. 新增密碼加密（bcrypt）
6. 包含忘記密碼功能
7. 新增使用者個人資料頁面

Agent 執行步驟：

分析現有專案結構
安裝相關相依套件
建立認證相關元件
實作 JWT 令牌處理
建立受保護路由高階元件
新增 Context Provider
實作後端 API 呼叫
新增表單驗證和錯誤處理
測試整個認證流程

案例 4：測試和品質保證

提示範例：

為這個 React 專案新增完整的測試覆蓋：
1. 設定 Jest 和 React Testing Library
2. 為所有元件新增單元測試
3. 新增整合測試
4. 實作端對端測試（Cypress）
5. 設定測試覆蓋率報告
6. 新增 CI/CD 管道中的測試步驟

Agent 模式進階控制

工具授權管理

命令確認機制：

執行終端命令或非內建工具前，Copilot 會要求確認
使用「繼續」按鈕下拉選項可自動確認特定工具

確認選項：

當前會話自動確認
工作區自動確認
所有未來呼叫自動確認

版本控制和撤銷

撤銷功能：

Undo Last Edit：撤銷最後的編輯並回到傳送最後請求前的狀態
Redo Last Edit：執行撤銷後可以重做這些編輯
Undo Edits (Delete)：撤銷從該請求開始的所有編輯

中斷控制：

暫停：暫停請求時，Copilot 停止處理並等待輸入
取消：取消請求時，Copilot 中斷並結束請求

Agent 模式最佳實踐

1. 有效的提示撰寫

結構化需求：

建立一個部落格系統，包含：

技術棧：
- 前端：React + TypeScript + Tailwind CSS
- 後端：Node.js + Express + MongoDB
- 認證：JWT

功能需求：
1. 使用者管理（註冊、登入、個人資料）
2. 文章管理（CRUD 操作）
3. 評論系統
4. 標籤和分類
5. 搜尋功能

技術要求：
- 響應式設計
- API 錯誤處理
- 表單驗證
- SEO 最佳化

2. 分階段任務執行

階段式提示：

第一階段：建立基本專案結構和使用者認證
第二階段：實作文章 CRUD 功能
第三階段：新增評論和互動功能
第四階段：最佳化和部署準備

3. 上下文提供

檔案參考：

參考 #file:package.json 和 #file:src/App.tsx 的現有架構，
新增路由系統使用 React Router v6

專案約定：

遵循專案的現有模式：
- 使用 functional components
- 遵循 src/components 資料夾結構
- 使用 CSS Modules 命名約定

4. 自訂指令整合

建立指令檔案：在專案根目錄建立 .github/copilot-instructions.md：

## React 18 開發約定
* 使用函式元件和 Hooks
* 狀態管理使用 useState 和 useReducer
* 使用 TypeScript 確保型別安全

## 程式碼風格
* 使用 2 空格縮排
* 物件屬性簡寫：const obj = { name, age }
* 避免 any 型別

## 測試要求
* 每個元件都要有對應測試檔案
* 使用 React Testing Library
* 覆蓋率要求 >80%

Agent 模式常見問題解決

問題 1：Agent 執行偏離預期方向

解決方法：

立即點擊「暫停」按鈕
檢視已完成的修改
提供更具體的指導
使用「撤銷」回到安全狀態

問題 2：工具執行失敗

檢查項目：

確認相依套件已正確安裝
檢查終端錯誤訊息
驗證專案設定檔案
確認檔案權限正確

問題 3：效能問題

最佳化建議：

將大型任務分解為小步驟
明確指定要修改的檔案範圍
避免一次處理過多檔案
定期檢查和確認進度

第五部分：模式選擇策略與實戰演練

如何選擇適當的模式

決策流程圖

是否需要修改程式碼？
├─ 否 → 使用 Ask 模式
└─ 是 → 繼續判斷
    │
    是否為複雜的多檔案任務？
    ├─ 否 → 考慮使用 Edits 模式
    └─ 是 → 使用 Agent 模式
        │
        是否需要執行命令或工具？
        ├─ 是 → 確定使用 Agent 模式
        └─ 否 → 可考慮 Edits 模式

詳細選擇指南

使用 Ask 模式的情境：

學習新技術概念
了解程式碼運作原理
尋求程式設計建議
除錯思路指導
API 文件查詢
最佳實踐諮詢

使用 Agent 模式的情境：

重構程式碼庫的部分功能
規劃和實作新功能
遷移程式碼到新框架
產生複雜任務的實作計畫
定義高層次需求
需要執行終端命令的任務
跨多檔案的大型重構

實戰演練專案

演練 1：Ask 模式 - 技術學習

目標：深入學習 React Hooks

步驟：

最佳實踐

在 React 函式元件中，有哪些常見的效能最佳化技巧？

實際應用

如何使用 useReducer 來管理複雜的表單狀態？請提供實際範例。

深入理解

useEffect 的依賴陣列是如何運作的？請解釋不同情況下的行為差異。

基礎概念

什麼是 React Hooks？為什麼要使用 Hooks 而不是類別元件？

演練 2：Agent 模式 - 完整專案開發

目標：建立天氣查詢應用程式

專案需求：

建立一個天氣查詢應用程式：

技術規格：
- React 18 + TypeScript
- 使用 OpenWeatherMap API
- Tailwind CSS 樣式
- 響應式設計

功能需求：
1. 城市搜尋功能
2. 顯示當前天氣
3. 5天天氣預報
4. 收藏城市功能（localStorage）
5. 地理位置自動偵測
6. 錯誤處理和載入狀態

UI 要求：
- 現代化設計
- 深色/淺色主題切換
- 動畫效果
- 行動裝置友善

執行監控重點：

觀察 Agent 如何分解任務
檢查檔案建立順序
注意錯誤處理和自我修正
確認功能實作完整性

演練 3：混合模式 - 學習與實作結合

情境：學習並實作 GraphQL

第一階段 - Ask 模式學習：

1. GraphQL 與 REST API 的主要差異是什麼？
2. GraphQL 的 Query、Mutation、Subscription 分別用於什麼？
3. Apollo Client 在 React 中如何使用？

第二階段 - Agent 模式實作：

基於剛才學到的 GraphQL 概念，建立一個書籍管理系統：

後端：
- Node.js + Apollo Server
- GraphQL schema 設計
- 資料庫整合（MongoDB）

前端：
- React + Apollo Client
- GraphQL 查詢和變更
- 快取管理

功能：
1. 書籍列表查詢
2. 新增/編輯/刪除書籍
3. 作者管理
4. 搜尋和過濾功能

效率最佳化技巧

1. Ask 模式效率技巧

集中提問：

關於 React 效能最佳化，請一次回答：
1. memo 和 useMemo 的差異
2. useCallback 的使用時機
3. 虛擬化長列表的方法
4. 程式碼分割的最佳實踐

上下文累積：

基於前面討論的 React 效能最佳化技巧，
現在請解釋如何在實際專案中應用這些技術。

2. Agent 模式效率技巧

明確範圍界定：

修改 src/components 資料夾中的元件：
1. 僅更新 Header.tsx 和 Navigation.tsx
2. 新增 TypeScript 介面定義
3. 不要修改其他檔案

階段性確認：

第一步：新增基本路由結構
完成後請暫停，讓我確認再繼續下一步

故障排除指南

Ask 模式常見問題

問題：回答太簡略解決：

請提供更詳細的解釋，包含：
1. 具體程式碼範例
2. 實際應用場景
3. 常見陷阱和注意事項

問題：回答太複雜解決：

請簡化剛才的解釋，適合 React 初學者理解

Agent 模式常見問題

問題：Agent 修改了錯誤的檔案 解決步驟：

立即點擊「暫停」
使用「Undo Last Edit」撤銷
提供更明確的檔案指定
重新開始任務

問題：執行陷入無限迴圈 解決步驟：

點擊「取消」停止執行
檢查錯誤訊息
簡化任務範圍
分階段執行

問題：工具權限被拒絕 解決步驟：

檢查終端錯誤訊息
確認必要的相依套件已安裝
檢查檔案權限設定
手動執行失敗的命令以確認問題

第六部分：進階功能與最佳化設定

自訂指令系統

全域自訂指令

建立使用者層級指令：

開啟 VSCode 設定（Ctrl+,）
搜尋 copilot instructions
在「GitHub Copilot: Instructions」中新增：

## 程式碼風格偏好
- 使用 2 空格縮排
- 函式優先使用箭頭函式語法
- 物件和陣列使用尾隨逗號
- 字串統一使用單引號

## React 開發約定
- 優先使用函式元件和 Hooks
- Props 型別使用 TypeScript interface
- 狀態更新使用 functional updates
- 副作用處理使用 useEffect

## 命名約定
- 檔案名稱使用 kebab-case
- 元件名稱使用 PascalCase
- 變數和函式使用 camelCase
- 常數使用 UPPER_SNAKE_CASE

專案層級指令

建立專案指令檔案：在專案根目錄建立 .github/copilot-instructions.md：

## 專案架構
這是一個 React + TypeScript 專案，使用以下技術棧：
- React 18 with Hooks
- TypeScript 4.9+
- Tailwind CSS
- React Router v6
- Zustand for state management

## 資料夾結構

src/ ├── components/ # 可重用元件 ├── pages/ # 頁面元件 ├── hooks/ # 自訂 hooks ├── stores/ # Zustand stores ├── utils/ # 工具函式 ├── types/ # TypeScript 型別定義 └── styles/ # 全域樣式


## 開發規範
- 每個元件都要有對應的 .test.tsx 檔案
- 使用 absolute imports with path mapping
- API 呼叫統一放在 src/api/ 目錄
- 環境變數統一使用 VITE_ 前綴

## 測試要求
- 單元測試覆蓋率 > 80%
- 使用 React Testing Library
- E2E 測試使用 Playwright

模型選擇與最佳化

可用模型比較

模型	特色	適用情境	免費版可用
GPT-4o	平衡速度與品質	一般開發任務	✅
Claude 3.5 Sonnet	優秀程式碼理解	複雜邏輯分析	✅
GPT-4	高品質輸出	複雜問題解決	❌ (付費版)
o1-mini	推理能力強	演算法設計	❌ (付費版)

模型切換策略

GPT-4o 適用場景：

快速程式碼生成
日常開發任務
簡單重構工作
文檔撰寫

Claude 3.5 Sonnet 適用場景：

複雜程式碼分析
架構設計討論
效能最佳化建議
詳細的程式碼解釋

擴充套件整合最佳化

設定檔案最佳化

VSCode 工作區設定（.vscode/settings.json）：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  "typescript.preferences.quoteStyle": "single",
  "javascript.preferences.quoteStyle": "single",
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  },
  "github.copilot.enable": {
    "*": true,
    "yaml": false,
    "plaintext": false,
    "markdown": false
  }
}

團隊協作最佳化

共享設定標準化

專案配置檔案：

.prettierrc：

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

eslint.config.js：

export default [
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    rules: {
      'prefer-const': 'error',
      'no-unused-vars': 'warn',
      'no-console': 'warn'
    }
  }
];

Git 整合最佳化

建議的 Git hooks（使用 husky）：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  }
}

效能監控與最佳化

使用量監控

檢查 Copilot 使用狀況：

點擊右下角的 GitHub Copilot 圖示
選擇「Settings」
查看使用統計和配額狀態

最佳化使用效率：

優先處理重要任務
避免重複詢問相似問題
善用 Agent 模式的自動修正能力
合理分配 Ask 模式的聊天配額

回應品質最佳化

提升 Ask 模式回應品質：

請基於以下上下文回答問題：
專案：React + TypeScript 電商網站
技術背景：中級前端開發者
問題：如何實作購物車狀態管理？
要求：請提供具體程式碼範例和最佳實踐建議

提升 Agent 模式執行品質：

專案背景：
- 現有的 React 專案使用 Context API
- 專案規模：中型（20+ 元件）
- 效能需求：高（需要最佳化）

任務：將狀態管理從 Context 遷移到 Zustand
要求：
1. 保持現有功能不變
2. 漸進式遷移
3. 新增型別安全
4. 效能最佳化

第七部分：疑難排解與常見問題

安裝和設定問題

問題 1：Copilot 無法登入

症狀：

點擊登入按鈕沒有反應
瀏覽器開啟但授權失敗
顯示「未授權」錯誤

解決步驟：

清除 VSCode 快取
- 關閉 VSCode
- 刪除 ~/.vscode/extensions/github.copilot-* 資料夾
- 重新安裝 GitHub Copilot 擴充套件
檢查防火牆設定
- 確認允許 VSCode 存取網路
- 新增 *.github.com 到防火牆白名單

使用命令列登入

Ctrl+Shift+P → GitHub Copilot: Sign In

檢查網路連線

# 測試 GitHub 連線
ping github.com
curl -I https://api.github.com

問題 2：程式碼建議不出現

可能原因與解決方法：

已達免費版限制
- 檢查配額使用狀況
- 等待每月重置或考慮升級
檔案類型不支援
- 確認檔案副檔名正確
- 檢查語言模式設定
擴充套件衝突
- 暫時停用其他 AI 程式碼助手
- 重新啟動 VSCode

Copilot 設定被停用

// 檢查設定檔案
{
  "github.copilot.enable": {
    "*": true
  }
}

問題 3：聊天功能無回應

診斷步驟：

檢查模式設定
- 確認已選擇正確模式（Ask/Agent）
- 檢查聊天視窗是否正確開啟
清除聊天歷史
- 點擊聊天視窗的清除按鈕
- 重新開始對話
模型切換測試
- 嘗試切換到不同的 AI 模型
- 測試簡單的問候語

Agent 模式專用問題

問題 4：Agent 執行陷入錯誤迴圈

症狀：

Agent 不斷嘗試修正同一個錯誤
終端輸出重複相同的錯誤訊息
CPU 使用率持續偏高

解決方法：

立即中斷
- 點擊「Cancel」按鈕
- 或使用 Ctrl+C 強制中斷
重新啟動 Agent
- 使用更具體的指令
- 限制修改範圍

手動修正基礎問題

# 清除 node_modules 重新安裝
rm -rf node_modules package-lock.json
npm install

# 檢查 TypeScript 設定
npx tsc --noEmit

分析錯誤根因

# 檢查專案依賴
npm list

# 檢查 Node.js 版本相容性
node --version
npm --version

問題 5：工具執行權限被拒絕

常見情境：

npm install 權限不足
檔案寫入權限問題
系統命令執行失敗

解決策略：

使用相對路徑
- 避免使用絕對路徑
- 確保工作目錄正確

確認 npm 權限

# 設定 npm 全域安裝路徑
npm config set prefix ~/.npm-global

# 或使用 npx 替代全域安裝
npx create-react-app my-app

檢查檔案權限

# Linux/macOS
ls -la
chmod 755 script.sh

# Windows (PowerShell)
Get-Acl filename.txt

效能和品質問題

問題 6：建議品質不佳

症狀：

程式碼建議不符合專案風格
產生的程式碼有語法錯誤
建議與上下文不符

改善方法：

使用檔案參考

參考 #file:src/types/Product.ts 中的介面定義，
建立產品列表元件

提供更多上下文

// 在檔案開頭新增註解
/**
 * 這個檔案包含購物車相關的 React 元件
 * 使用 Zustand 進行狀態管理
 * 遵循專案的 TypeScript 嚴格模式
 */

優化提示品質

// 不好的提示
"新增按鈕"

// 好的提示
"新增一個 React 按鈕元件，使用 TypeScript，
包含 onClick 處理函式和可自訂的樣式 props"

問題 7：VSCode 效能下降

可能原因：

Copilot 背景處理佔用資源
大型專案索引佔用記憶體
多個擴充套件衝突

最佳化步驟：

停用不必要的擴充套件
- 定期檢查已安裝的擴充套件
- 停用不常用的功能

限制檔案監控範圍

{
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/.git/**": true,
    "**/dist/**": true,
    "**/build/**": true
  }
}

調整 Copilot 設定

{
  "github.copilot.advanced": {
    "length": 300,
    "temperature": 0.1,
    "top_p": 1.0
  }
}

網路和連線問題

問題 8：間歇性連線中斷

症狀：

Copilot 圖示時而變紅
程式碼建議時有時無
聊天功能偶爾無回應

排查步驟：

檢查憑證問題

# 更新憑證
# Windows
certlm.msc

# macOS
sudo security update-ca-trust

# Linux
sudo update-ca-certificates

設定代理伺服器（如果使用公司網路）

{
  "http.proxy": "http://proxy.company.com:8080",
  "http.proxyStrictSSL": false
}

檢查網路穩定性

# 持續 ping 測試
ping -c 100 api.github.com

# 測試 DNS 解析
nslookup copilot-proxy.githubusercontent.com

升級和遷移問題

問題 9：免費版升級到付費版

升級流程：

評估使用需求
- 檢查目前配額使用狀況
- 確認需要的進階功能
選擇合適方案
- Copilot Pro：$10/月，適合個人開發者
- Copilot Pro+：更高價格，適合重度使用者
執行升級
- 前往 GitHub Copilot 設定
- 選擇付費方案
- 完成付款設定
驗證升級成功
- 檢查 VSCode 中的 Copilot 狀態
- 測試無限制功能

問題 10：從其他 AI 工具遷移

從 Cursor 遷移：

匯出設定
- 備份 Cursor 的自訂指令
- 記錄常用的工作流程
適應差異
- 學習 VSCode + Copilot 的工作流程
- 熟悉不同的快捷鍵組合

轉換設定檔案

// Cursor 指令轉換為 VSCode Copilot 指令
// .cursor-settings → .github/copilot-instructions.md

從 Tabnine 遷移：

停用 Tabnine
- 移除 Tabnine 擴充套件
- 清除相關設定
安裝 Copilot
- 按照本教學安裝 GitHub Copilot
- 匯入程式碼風格偏好
功能對比
- Tabnine 的本地處理 vs Copilot 的雲端處理
- 隱私設定差異

總結：邁向 AI 輔助程式設計的未來

經過這份詳細的教學，你現在已經掌握了 VSCode 與 GitHub Copilot 免費版的完整使用方法。讓我們回顧關鍵要點：

核心概念回顧

VSCode vs Cursor vs GitHub Copilot 的定位：

VSCode：穩定可靠的基礎程式碼編輯器
GitHub Copilot：強大的 AI 程式設計助手，具有廣泛的 IDE 支援
Cursor：專門為 AI 優先開發設計的獨立 IDE

兩種核心模式的應用：

Ask 模式：你的 AI 導師，專注於學習和諮詢
Agent 模式：你的 AI 協作夥伴，專注於執行和實作

實用價值與未來展望

GitHub Copilot 免費版提供的功能已經足以大幅提升日常開發效率。每月 2,000 次程式碼完成和 50 次聊天請求對大多數開發者來說是合理的起點。

隨著 AI 技術的快速發展，我們正見證程式設計領域的重大變革：

短期趨勢：

AI 輔助程式設計成為標準工作流程
更多 IDE 和編輯器整合 AI 功能
程式碼品質和開發速度同步提升

長期影響：

開發者角色從「程式碼撰寫者」轉向「系統設計者」
更多時間投入創意和架構思考
降低程式設計入門門檻

持續學習建議

保持實驗精神：嘗試不同的提示技巧和工作流程
關注更新：GitHub Copilot 功能持續演進，定期查看官方文檔
社群參與：加入相關技術社群，分享經驗和最佳實踐
平衡使用：在享受 AI 協助的同時，保持獨立思考和問題解決能力

記住，GitHub Copilot 是你的協作夥伴，而不是替代品。最好的程式設計體驗來自人類創意與 AI 效率的完美結合。現在就開始你的 AI 輔助程式設計之旅吧！

新手教學