知識極客電子報
· 34 min read

VSCode 與 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 的情境：

選擇 Cursor 的情境：

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

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

步驟 1：下載 VSCode

1.1 前往官網下載

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

1.2 版本選擇指南

Windows 使用者：

macOS 使用者：

Linux 使用者：

步驟 2：詳細安裝程序

2.1 Windows 安裝步驟

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

2.2 macOS 安裝步驟

  1. 下載並解壓縮
    • 開啟 Downloads 資料夾
    • 雙擊 VSCode-darwin-universal.zip 進行解壓縮
  2. 安裝應用程式
    • 將解壓縮後的 Visual Studio Code.app 拖曳到 Applications 資料夾
    • 首次開啟時，macOS 會詢問是否要開啟此應用程式，點擊「開啟」
  3. 命令列工具設定（可選但建議）
    • 開啟 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 首次啟動時會提示選擇主題：

3.2 安裝中文語言套件

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

3.3 基本設定最佳化

開啟設定：

建議調整的設定：

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

3.4 必裝擴充套件推薦

基礎開發套件：

前端開發套件：

第二部分：GitHub Copilot 免費版深度設定

步驟 1：GitHub 帳號準備

1.1 確認 GitHub 帳號狀態

在啟動 Copilot 前，請確認：

1.2 檢查 Copilot 資格

Copilot 免費版不適用於以下情況：

步驟 2：在 VSCode 中設定 GitHub Copilot

2.1 安裝 GitHub Copilot 擴充套件

自動安裝（VSCode 17.10+ 版本）：

手動安裝：

  1. 開啟 VSCode
  2. 點擊左側邊欄的擴充套件圖示
  3. 搜尋 GitHub Copilot
  4. 安裝「GitHub Copilot」和「GitHub Copilot Chat」兩個擴充套件

2.2 登入和授權流程

方法一：從 VSCode 內啟動

  1. 安裝完成後，VSCode 右下角會出現 GitHub Copilot 圖示
  2. 點擊圖示選擇「Sign In to GitHub」
  3. 瀏覽器會開啟 GitHub 授權頁面
  4. 點擊「Authorize GitHub Copilot」
  5. 輸入 GitHub 密碼確認
  6. 返回 VSCode，應該會看到「GitHub Copilot 已啟動」訊息

方法二：透過命令面板

  1. 按 Ctrl+Shift+P（macOS：Cmd+Shift+P）
  2. 輸入 GitHub Copilot: Sign In
  3. 按照提示完成登入程序

方法三：透過快捷鍵啟動聊天

  1. 按 Ctrl+\（macOS：Cmd+\）開啟聊天視窗
  2. 選擇「Sign up for Copilot Free」
  3. 如果已有 GitHub 帳號，登入後即可開始使用

2.3 啟動 Copilot 免費版

  1. 前往 GitHub Copilot 設定頁面
  2. 選擇免費版方案
    • 點擊「Get access to GitHub Copilot」
    • 選擇「Copilot Free」
    • 確認啟動免費版
  3. 驗證啟動成功
    • 返回 VSCode
    • 右下角的 Copilot 圖示應該變成綠色
    • 狀態顯示為「GitHub Copilot: Ready」

步驟 3：Copilot 免費版功能與限制詳解

3.1 使用限制說明

每月配額：

可用模型：

達到限制時的行為：

3.2 升級選項比較

方案 價格 程式碼完成 聊天請求 其他功能
Free 免費 2,000/月 50/月 基本功能
Pro $10/月 無限制 無限制 進階模型、Agent 模式
Pro+ 更高價格 無限制 無限制 最大精選請求配額、所有模型

步驟 4：基本功能測試

4.1 測試程式碼自動完成

  1. 觀察 Copilot 建議
    • 開始輸入 function fib
    • Copilot 應該會建議完整的函式實作
    • 按 Tab 接受建議
    • Copilot 應該會建議完整的 React 元件

測試多行建議

// Create a React component for a todo list

建立測試檔案

// 建立新檔案：test.js
// 輸入以下註解：
// function to calculate fibonacci number

4.2 測試聊天功能

  1. 開啟聊天介面
    • 按 Ctrl+Alt+I（macOS：Cmd+Ctrl+I）
    • 或點擊右側邊欄的聊天圖示

測試程式碼解釋

請解釋這段程式碼：
const arr = [1, 2, 3].map(x => x * 2);

測試基本問答

請解釋 JavaScript 中的 Promise 是什麼？

第三部分：Ask 模式完整使用指南

什麼是 Ask 模式

Ask 模式是 GitHub Copilot 的諮詢型互動模式，專門用於快速獲得問題答案。它的核心特色是：

主要特性：

適用情境：

Ask 模式操作詳解

1. 啟動 Ask 模式

方法一：快捷鍵

方法二：介面操作

方法三：命令面板

2. 確認模式設定

開啟聊天視窗後：

  1. 查看視窗下方的模式選單
  2. 確認已選擇「Ask」模式
  3. 如果不是，點擊下拉選單切換到「Ask」

3. 選擇 AI 模型

在聊天介面中可以選擇不同模型：

Ask 模式實戰範例

範例 1：概念學習

輸入提示：

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

典型回應模式：

範例 2：程式碼解釋

輸入提示：

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

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

典型回應內容：

範例 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 模式限制與注意事項

使用限制

最佳實踐建議

提問技巧：

善用追問：

效率建議：

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

Agent 模式核心概念

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

與 Ask 模式的本質差異

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

Agent 模式工作原理

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

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

啟動和使用 Agent 模式

啟動 Agent 模式

方法一：從聊天視窗

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

方法二：從 Copilot Edits 檢視

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

介面元素說明

Agent 模式專有功能：

Agent 模式實戰案例

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

提示範例：

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

Agent 執行過程：

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

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

提示範例：

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

Agent 處理流程：

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

案例 3：新增複雜功能

提示範例：

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

Agent 執行步驟：

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

案例 4：測試和品質保證

提示範例：

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

Agent 模式進階控制

工具授權管理

命令確認機制：

確認選項：

版本控制和撤銷

撤銷功能：

中斷控制：

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 模式的情境：

使用 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 要求：
- 現代化設計
- 深色/淺色主題切換
- 動畫效果
- 行動裝置友善

執行監控重點：

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

演練 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 修改了錯誤的檔案 解決步驟：

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

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

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

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

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

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

自訂指令系統

全域自訂指令

建立使用者層級指令：

  1. 開啟 VSCode 設定（Ctrl+,）
  2. 搜尋 copilot instructions
  3. 在「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 擴充套件組合

基礎開發環境：

{
  "recommendations": [
    "ms-vscode.vscode-typescript-next",
    "bradlc.vscode-tailwindcss",
    "esbenp.prettier-vscode",
    "ms-vscode.vscode-eslint",
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense"
  ]
}

進階開發工具：

{
  "recommendations": [
    "ms-vscode.vscode-jest",
    "ms-playwright.playwright",
    "ms-vscode.vscode-json",
    "redhat.vscode-yaml",
    "ms-vscode.vscode-markdown",
    "gruntfuggly.todo-tree"
  ]
}

設定檔案最佳化

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 使用狀況：

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

最佳化使用效率：

回應品質最佳化

提升 Ask 模式回應品質：

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

提升 Agent 模式執行品質：

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

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

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

安裝和設定問題

問題 1：Copilot 無法登入

症狀：

解決步驟：

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

使用命令列登入

Ctrl+Shift+P → GitHub Copilot: Sign In

檢查網路連線

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

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

可能原因與解決方法：

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

Copilot 設定被停用

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

問題 3：聊天功能無回應

診斷步驟：

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

Agent 模式專用問題

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

症狀：

解決方法：

  1. 立即中斷
    • 點擊「Cancel」按鈕
    • 或使用 Ctrl+C 強制中斷
  2. 重新啟動 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：工具執行權限被拒絕

常見情境：

解決策略：

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

確認 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 效能下降

可能原因：

最佳化步驟：

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

限制檔案監控範圍

{
  "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：間歇性連線中斷

症狀：

排查步驟：

檢查憑證問題

# 更新憑證
# 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：免費版升級到付費版

升級流程：

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

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

從 Cursor 遷移：

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

轉換設定檔案

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

從 Tabnine 遷移：

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

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

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

核心概念回顧

VSCode vs Cursor vs GitHub Copilot 的定位：

兩種核心模式的應用：

實用價值與未來展望

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

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

短期趨勢：

長期影響：

持續學習建議

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

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

Share Share Share Share Share Email