今日目標
• 學習在 VS Code 中使用 Git
• 掌握 IDE 的 Git 視覺化功能
• 提升日常開發效率
• 結合命令列與圖形介面的優勢
為什麼要使用 IDE 整合？
命令列 vs 圖形介面：
命令列（Terminal）：
✅ 強大且完整
✅ 適合複雜操作
✅ 腳本自動化
❌ 需要記指令
❌ 不夠直覺

圖形介面（IDE）：
✅ 視覺化清楚
✅ 容易上手
✅ 快速操作
❌ 功能可能受限
❌ 不夠彈性

最佳策略：兩者結合！
職場實況：
❌ 只會命令列：

• 簡單操作也要打一堆指令
• 看 diff 很累
• 解衝突眼花

✅ IDE + 命令列：

• 日常操作用 IDE（快速）
• 複雜操作用命令列（強大）
• 效率提升 3 倍！

操作步驟
步驟1：VS Code Git 基礎操作
開啟專案：

在命令列開啟專案

cd company-website
code .
VS Code Git 介面介紹：
左側邊欄：
📁 檔案總管
🔍 搜尋
🌿 Git 分支圖示（Source Control）
🐛 偵錯
🧩 擴充功能

Git 區域功能：

• 查看變更檔案
• 暫存/取消暫存
• 提交
• 推送/拉取
• 分支切換
  步驟2：基本 Git 操作（視覺化）
  查看變更：

1. 修改檔案（例如 index.html）

2. 點擊左側 Git 圖示（或 Ctrl+Shift+G）

3. 看到變更檔案列表：
   M index.html（M = Modified）

4. 點擊檔案名稱 → 自動顯示 diff
   左邊：舊版本
   右邊：新版本
   綠色：新增
   紅色：刪除
   暫存檔案（git add）：
   方法1：點擊檔案旁的 + 號
   方法2：右鍵 → Stage Changes
   方法3：點擊上方 + 號（全部暫存）

快捷鍵：無（建議用滑鼠）
提交變更（git commit）：

1. 在上方訊息框輸入 commit 訊息
   例如：feat: 更新首頁內容

2. 按 Ctrl+Enter（或點擊 ✓ 勾勾）

3. 提交完成！
   推送到遠端（git push）：
   方法1：點擊底部狀態列的 ↑ 圖示
   方法2：點擊 ... 選單 → Push
   方法3：Ctrl+Shift+P → Git: Push

快捷鍵：Ctrl+Shift+P 輸入 push
步驟3：分支管理（視覺化）
查看和切換分支：
底部狀態列左側顯示目前分支
例如：🌿 main

點擊分支名稱 → 彈出分支列表

• 選擇分支 → 快速切換
• 輸入新名稱 → 建立新分支
  建立新分支：
  方法1：

1. 點擊底部分支名稱
2. 選擇 "Create new branch"
3. 輸入分支名稱（例如 feature/new-page）
4. 按 Enter

方法2：

1. Ctrl+Shift+P
2. 輸入 "Git: Create Branch"
3. 輸入分支名稱
   合併分支：
4. 切換到目標分支（例如 main）
5. Ctrl+Shift+P
6. 輸入 "Git: Merge Branch"
7. 選擇要合併的分支
8. 完成合併
   步驟4：解決衝突（視覺化）
   當發生衝突時：
   VS Code 會自動標記衝突區域：

<<<<<<< HEAD (Current Change)
你的修改內容

別人的修改內容

feature-branch (Incoming Change)

VS Code 提供按鈕：
[Accept Current Change] # 保留你的
[Accept Incoming Change] # 保留別人的
[Accept Both Changes] # 都保留
[Compare Changes] # 比較差異
解決步驟：

1. 檔案會標記為 C（Conflict）
2. 點擊檔案查看衝突
3. 選擇要保留的版本（或手動編輯）
4. 點擊上方 + 號標記為已解決
5. 提交合併
   步驟5：查看歷史記錄
   使用內建功能：
6. 右鍵檔案 → "Open Timeline"
7. 查看檔案的修改歷史
8. 點擊任一版本查看內容
   安裝 Git Graph 擴充功能：
9. 點擊左側擴充功能圖示
10. 搜尋 "Git Graph"
11. 安裝

使用：

1. Ctrl+Shift+P
2. 輸入 "Git Graph: View Git Graph"
3. 看到漂亮的分支圖！
   Git Graph 功能：

• 視覺化顯示所有分支
• 點擊 commit 查看詳情
• 右鍵 commit 執行操作：
  • Checkout
  • Cherry Pick
  • Revert
  • Create Branch
  • Create Tag

推薦的 VS Code Git 擴充功能
必裝擴充功能：

1. GitLens（超強大）
   功能：

• 在程式碼旁顯示最後修改者
• 滑鼠懸停看 commit 詳情
• 比較分支差異
• 檔案歷史視覺化
• Blame 註解

安裝：搜尋 "GitLens"
2. Git Graph
功能：

• 圖形化分支視圖
• 查看完整提交歷史
• 視覺化操作 Git
• 比較 commits

安裝：搜尋 "Git Graph"
3. Git History
功能：

• 查看檔案歷史
• 比較不同版本
• 搜尋提交記錄
• 查看分支歷史

安裝：搜尋 "Git History"
4. GitFlow
功能：

• 支援 GitFlow 工作流程
• 一鍵建立 feature/release 分支
• 自動化版本管理

安裝：搜尋 "GitFlow"

VS Code Git 快捷鍵
常用快捷鍵：
Ctrl+Shift+G # 開啟 Git 面板
Ctrl+Enter # 提交 commit
Ctrl+Shift+P # 命令面板（輸入 Git 指令）

在命令面板中輸入：

Git: Commit # 提交
Git: Push # 推送
Git: Pull # 拉取
Git: Checkout to # 切換分支
Git: Create Branch # 建立分支
Git: Merge Branch # 合併分支
Git: Stash # 暫存工作
Git: Pop Stash # 恢復暫存
自訂快捷鍵：
File → Preferences → Keyboard Shortcuts
搜尋 "git" 查看所有 Git 相關快捷鍵
可以自訂喜歡的快捷鍵

IDE vs 命令列使用時機
✅ 適合用 IDE 的操作：
日常開發：

• 查看檔案變更（diff）
• 暫存和提交（add & commit）
• 切換分支（checkout）
• 推送拉取（push & pull）
• 解決衝突（merge conflict）
• 查看歷史（log & blame）

優勢：
→ 視覺化清楚
→ 點擊就能操作
→ 不用記指令
✅ 適合用命令列的操作：
進階操作：

• Interactive Rebase
• 複雜的 reset 操作
• Git hooks 設定
• Submodules 管理
• 進階搜尋（git grep）
• 效能優化（git gc）
• 自動化腳本

優勢：
→ 功能完整
→ 更精確控制
→ 可以寫腳本

實戰工作流程
典型的一天（結合 IDE 與命令列）：
早上開工：

命令列：同步最新版本

git pull origin main

VS Code：查看有什麼更新

點擊檔案查看 diff

開發功能：

VS Code：建立分支

點擊底部分支 → 輸入 feature/new-function

VS Code：開發過程

寫程式碼...

隨時點擊 Git 圖示查看變更

點擊 + 暫存檔案

輸入訊息後 Ctrl+Enter 提交

需要暫停工作：

命令列：用 stash（因為 IDE 介面不太方便）

git stash push -u -m "開發中：新功能 50%"

處理其他事情...

命令列：恢復工作

git stash pop
整理提交歷史：

命令列：rebase 比較精確

git rebase -i HEAD~5

在編輯器中 squash commits

推送和建立 PR：

VS Code：推送分支

點擊底部 ↑ 圖示

瀏覽器：到 GitHub 建立 PR

VS Code Git 設定優化
建議的設定：
// settings.json
{
// 自動抓取遠端更新
"git.autofetch": true,

// 自動同步
"git.autoStash": true,

// 確認同步
"git.confirmSync": false,

// 啟用智慧提交
"git.enableSmartCommit": true,

// 顯示內嵌 blame
"gitlens.currentLine.enabled": true,

// 顯示檔案歷史
"gitlens.codeLens.enabled": true
}
開啟設定：

1. File → Preferences → Settings
2. 搜尋 "git"
3. 調整相關設定

其他常用 IDE 的 Git 整合
IntelliJ IDEA / WebStorm：
內建強大的 Git 工具：

• VCS → Git
• Commit 視窗（Ctrl+K）
• Push 視窗（Ctrl+Shift+K）
• 歷史視圖（Alt+9）
• Annotate（Git Blame）
  Sublime Text：
  安裝 Package：
• GitGutter（顯示變更）
• Git（Git 整合）
• GitSavvy（進階功能）
  Atom：
  內建 Git 和 GitHub 整合
• GitHub panel
• Git panel
• 類似 VS Code 的介面

最佳實踐建議
✅ 日常開發建議：
□ 簡單操作用 IDE（快速方便）
□ 複雜操作用命令列（精確完整）
□ 安裝必要的 Git 擴充功能
□ 善用視覺化 diff 和 merge 工具
□ 設定合適的快捷鍵
□ 定期學習新的 IDE 功能
⚠️ 注意事項：
□ IDE 操作通常無法撤銷，小心使用
□ 不確定的操作先在命令列測試
□ 重要操作前先備份分支
□ IDE 有時會快取，可能需要重新整理
□ 不要完全依賴 IDE，命令列還是要會

今日重點回顧
• ✅ 學會在 VS Code 中使用 Git
• ✅ 掌握視覺化的 Git 操作
• ✅ 了解 IDE 與命令列的互補使用
• ✅ 提升日常開發效率
核心功能總結
VS Code Git 核心功能：

• Source Control 面板（Ctrl+Shift+G）
• 視覺化 diff 比較
• 圖形化衝突解決
• 分支管理和切換
• GitLens 程式碼註解
• Git Graph 視覺化歷史

推薦擴充功能：

• GitLens（必裝）
• Git Graph（必裝）
• Git History
• GitFlow