跳轉至

建立 2026-09-15 更新 2026-09-15

VS Code 與 Git

Visual Studio Code 內建 Source Control(原始碼控制),按鈕做的事與終端機的 git addgit commitgit push 是同一套 Git,不是另一套系統。學會對照之後,你可以用滑鼠處理日常提交,遇到問題再打開終端機。

前置:電腦已安裝 Git,並且做過 基本初始化設定。VS Code 只是呼叫本機的 git

面板在哪

  1. 左側活動列點 Source Control(快捷鍵 Windows/Linux:Ctrl+Shift+G,macOS:Ctrl+Shift+G)。
  2. 狀態列左下角顯示目前分支名稱(例如 main)。
  3. 編輯器左緣的 gutter(溝槽)用顏色標出這次相對於上次提交的改動。
畫面看到的 對應 Git
U Untracked 新檔,尚未 git add
A Added 已暫存的新檔
M Modified 已追蹤檔被修改
+ Stage git add
Commit 訊息框 + Commit git commit -m "..."
Sync / Publish Branch git pullgit push 或第一次發佈到 GitHub
狀態列切換分支 git switch

第一次把資料夾變成儲存庫

  1. 檔案 → 開啟資料夾,打開你的專案。
  2. 打開 Source Control,點 Initialize Repository(等同 git init)。
  3. 檔案旁出現 U。把要提交的檔案點 +,或在 Changes 標題旁一次暫存全部。
  4. 在訊息框寫清楚「這次做了什麼」,按 Commit

還沒連 GitHub 時,提交只存在本機。要上傳:點 Publish Branch,登入 GitHub,選公開或私人儲存庫。VS Code 會幫你建立遠端並 push

從 GitHub 複製進來

  1. 在 GitHub 儲存庫按綠色 Code,複製 HTTPS 或 SSH 網址。
  2. VS Code 命令選擇區(Ctrl+Shift+PCmd+Shift+P)執行 Git: Clone
  3. 貼上網址、選本機目錄,再開啟該資料夾。

之後日常節奏與終端機相同:改檔 → 暫存 → 提交 → Sync Changes(先 pull 再 push)。

分支、比較與合併

  • Git: Create Branch 建立功能分支;狀態列點分支名稱可切換。
  • 點 Source Control 裡的檔名會打開 diff(左右或內嵌比較),等同看 git diff
  • 回到 main 後,用 Source Control 的 ...Branch → Merge 合併功能分支。

協作請在 GitHub 開 Pull Request,不要直接在共用的 main 上推未審查的大改。可安裝官方擴充功能 GitHub Pull Requests,在編輯器裡建立、審查、合併 PR。

官方學習資源

VS Code 文件

Source Control 總覽Quickstart 是介面操作的權威來源。在 VS Code 使用 GitHub 說明 PR 與 Issues 擴充功能。

官方影音

Microsoft:Using Git with Visual Studio Code。GitHub:How to use Git and GitHub in VS Code。完整嵌入見 影音教學