跳至主要內容

在 VS Code 中開啟遠端 GitHub 專案

Jia-Yin2026/3/22大約 9 分鐘coursegitgithubvscode

學習內容：

  • 認識 Git、GitHub 與 VS Code 的關係
  • 安裝 Git 並完成基本身份設定
  • 在 VS Code 中 clone GitHub 專案
  • 使用 VS Code 的 Source Control 進行提交與推送
  • 安裝並使用 Git Graph 觀察版本紀錄

Git、GitHub 與 VS Code

在開始操作之前，先分清楚三者的角色：

  • Git：版本控制工具，用來記錄程式碼修改歷程
  • GitHub：放置 Git 專案的網站平台
  • VS Code：編輯程式碼的工具，也內建 Git 操作介面

可以先把它理解成：

  • Git 負責記錄版本
  • GitHub 負責存放遠端專案
  • VS Code 負責讓我們用比較直覺的方式操作 Git

安裝 Git

雖然這份講義會以 VS Code 圖形介面操作 為主，但在使用 GitHub 專案之前，電腦中還是要先安裝 Git。

安裝完成後，可以在 VS Code 內建終端機中輸入：

git --version

如果有出現版本號，就表示 Git 已經安裝成功。

補充

這份講義不要求同學熟記很多 Git 指令。 這裡出現的指令主要只有兩種用途：

  1. 確認 Git 是否安裝成功
  2. 進行第一次使用時的基本設定 :::

第一次使用 Git：設定姓名與 Email

第一次使用 Git 時，要先設定提交版本時要顯示的姓名與 Email。 這樣之後每次 commit，系統才知道這次修改是誰提交的。

請在 VS Code 的終端機輸入：

git config --global user.name "你的名字"
git config --global user.email "你的信箱"

範例：

git config --global user.name "王小明"
git config --global user.email "s1112345@example.com"

設定完成後，可以再輸入以下指令確認：

git config --global user.name
git config --global user.email

--global 是什麼？

--global 表示這個設定會套用到這台電腦目前使用者的大部分 Git 專案。

也就是說，通常只要設定一次就可以了，不需要每次開新專案都重新設定。

安裝 Git Graph 擴充套件

除了 VS Code 內建的 Source Control 之外，這門課也會使用 Git Graph 擴充套件來協助觀察版本紀錄。

安裝方式：

  1. 開啟 VS Code
  2. 點左側 Extensions（延伸模組）
  3. 搜尋 Git Graph
  4. 按下 Install

安裝完成後，Git Graph 可以幫助你：

  • 看每一次 commit 的歷史紀錄
  • 觀察版本先後順序
  • 查看目前所在的 branch
  • 用圖形方式理解版本變化

對初學者來說，這會比只看文字紀錄更容易理解。

在 VS Code 中 clone GitHub 專案

接下來要學的是：怎麼在 VS Code 裡把 GitHub 上的遠端專案下載到自己的電腦中。

步驟 1：取得 GitHub 專案網址

在 GitHub 的專案頁面中：

  1. 點選綠色的 Code
  2. 複製專案網址

網址通常像這樣：

https://github.com/帳號名稱/專案名稱.git

步驟 2：在 VS Code 中執行 Clone

  1. 開啟 VS Code
  2. 點左側的 Source Control（原始檔控制）
  3. 選擇 Clone Repository
  4. 貼上剛剛複製的 GitHub 專案網址
  5. 選擇要存放到本機的資料夾
  6. Clone 完成後，按 Open 開啟專案

這樣就完成了把遠端 GitHub 專案下載到自己電腦中的動作。

另一種方式：使用命令面板

如果你沒有看到 Clone Repository 按鈕，也可以改用命令面板：

  1. 按 Ctrl + Shift + P
  2. 輸入 Git: Clone
  3. 選擇這個功能
  4. 貼上 GitHub 專案網址
  5. 選擇儲存位置
  6. 開啟下載好的專案資料夾

如何確認 VS Code 已經偵測到 Git 專案？

當你成功開啟一個 Git 專案後，通常會看到下面幾種現象：

  • 左側有 Source Control
  • 修改檔案後，檔名旁會有狀態標記
  • Source Control 面板中會顯示變更過的檔案

這表示 VS Code 已經知道這個資料夾是一個 Git 專案。

使用 VS Code 進行版本提交

這部分是本講義最重要的主流程。

Git 的基本概念可以先記成：

修改檔案 → 選擇本次要提交的內容 → 建立版本紀錄 → 送到 GitHub

在 VS Code 中，對應的操作如下。

第一步：修改檔案

先編輯專案中的檔案，例如：

  • README.md
  • main.py
  • index.html

當你存檔後，VS Code 就會自動偵測到這些變更。

第二步：開啟 Source Control

點左側的 Source Control。

你會看到：

  • 哪些檔案被修改了
  • 每個檔案目前的狀態
  • 可以點進去查看修改前後差異

這裡就是平常進行版本控制最常使用的地方。

第三步：Stage 變更

在變更檔案旁邊通常會看到 + 按鈕。 按下去之後，表示你要把這個檔案加入這次準備提交的內容。

也可以理解成：

  • 檔案雖然已經改了
  • 但只有被 Stage 的內容，才會被放進下一次 commit

Stage 的意思

可以把 Stage 想成「先把這次要交出去的修改挑出來」。

這樣如果你同時改了很多檔案，也能只提交其中一部分。

第四步：輸入 Commit 訊息

在 Source Control 上方會有一個輸入框，請輸入這次修改的說明。

例如：

  • 更新作業一說明
  • 修正登入功能錯誤
  • 新增首頁排版

Commit 訊息建議

請盡量寫得清楚，不要只寫：

  • update
  • change
  • test

因為這些名稱太模糊，之後回頭看很難知道當時改了什麼。

第五步：Commit

按下 Commit 之後，就代表：

  • 幫這次修改建立了一個版本紀錄

這時候版本通常還是在你的本機電腦裡，還沒有送到 GitHub。

第六步：Push 或 Sync Changes

完成 commit 後，接著還要把這個版本送到 GitHub。

在 VS Code 中，通常可以看到：

  • Push
  • 或 Sync Changes

這兩個怎麼理解？

  • Push：把本機的提交送到遠端 GitHub
  • Sync Changes：同步本機與遠端的變更

對初學者來說，可以先把它理解成：

Commit 是本機存檔版本，Push / Sync 是把版本送上 GitHub

Git Graph 操作示意

安裝好 Git Graph 後，我們就可以用圖形方式來看版本歷史。

如何開啟 Git Graph？

常見方式有兩種：

  1. 按 Ctrl + Shift + P
  2. 輸入 Git Graph: View Git Graph

或是在側邊欄、右鍵選單中找到 Git Graph 相關功能。

Git Graph 畫面會看到什麼？

打開之後，通常可以看到：

  • 一條由上到下的 commit 紀錄
  • 每個 commit 的訊息
  • 提交者名稱
  • 提交時間
  • branch 位置
  • HEAD 目前指向哪一個版本

如果目前專案只有單一路線，畫面看起來會像一條直線。 如果之後有 branch，圖上就會出現分支與合併的路徑。

示意說明 1：看最新一次提交

當你剛做完一次 commit 後，打開 Git Graph，最上面通常就會看到最新版本。

例如畫面可能會像這樣：

● 更新 README 說明
● 完成初始專案建立
● 建立專案骨架

最上面那一筆，就是最新提交的版本。

這可以幫助你確認：

  • 自己剛才的 commit 是否真的成功
  • commit 訊息是否正確
  • 版本順序是不是自己預期的那樣

示意說明 2：點選某次 commit 查看內容

在 Git Graph 中，點選其中一筆 commit，通常可以進一步看到：

  • 這次 commit 的完整訊息
  • 哪些檔案有被修改
  • 每個檔案的差異內容

這個功能很適合拿來做下面幾件事：

  • 回頭看上一次到底改了什麼
  • 確認某次提交是否放入了正確檔案
  • 找出是哪一次修改造成程式出問題

示意說明 3：觀察 branch

如果專案未來開始使用 branch，Git Graph 會比純文字顯示更清楚。

你可以從圖上觀察：

  • 目前自己在什麼 branch
  • 哪些 commit 屬於哪個 branch
  • branch 是從哪裡分出去的
  • 後來是否有 merge 回來

對初學者來說，這是理解 branch 概念很好的工具。

示意說明 4：配合 Source Control 一起看

建議同學把兩個工具搭配起來使用：

  • Source Control：看目前這次改了哪些檔案，做 stage、commit、push
  • Git Graph：看過去所有版本是怎麼一路累積下來的

可以把它們想成：

  • Source Control 看「現在這次修改」
  • Git Graph 看「以前到現在的版本歷史」

課堂實作流程

練習 1：完成環境設定

請同學完成：

  • 安裝 Git
  • 在 VS Code 中確認 Git 可以使用
  • 設定 user.name
  • 設定 user.email
  • 安裝 Git Graph

練習 2：clone 老師提供的 GitHub 專案

請同學：

  1. 到 GitHub 複製專案網址
  2. 在 VS Code 中使用 Clone Repository
  3. 成功下載專案並開啟資料夾

練習 3：完成一次修改與提交

請同學：

  1. 修改一個檔案
  2. 到 Source Control 查看變更
  3. Stage 檔案
  4. 輸入 commit 訊息
  5. 按下 Commit
  6. 按下 Push 或 Sync Changes

練習 4：使用 Git Graph 檢查版本紀錄

請同學開啟 Git Graph，並觀察：

  • 最新一次 commit 是什麼
  • 剛剛自己的提交有沒有出現在最上方
  • commit 訊息是否正確
  • 專案目前是否只有一條主要版本線

常見問題

為什麼 VS Code 不能 clone？

可能原因有：

  • 還沒安裝 Git
  • Git 沒有安裝成功
  • GitHub 專案網址貼錯
  • 網路有問題
  • 沒有這個專案的存取權限

為什麼可以 commit 但不能 push？

常見原因有：

  • 你沒有該專案的推送權限
  • 尚未登入 GitHub
  • 遠端有新版本但本機還沒同步
  • 認證失敗

為什麼 commit 顯示的名字不是我？

通常表示 Git 的身份設定還沒有完成，或之前這台電腦已經設定過別的姓名與 Email。

請重新檢查：

git config --global user.name
git config --global user.email

為什麼 Source Control 裡沒有看到變更？

請先確認：

  • 你是否真的修改並存檔了檔案
  • 目前開啟的是不是正確的專案資料夾
  • 這個資料夾本身是不是 Git 專案

重點整理

這份講義最重要的不是背很多指令，而是理解 Git 在 VS Code 裡的基本流程：

Clone 專案 → 修改檔案 → Stage → Commit → Push / Sync

再搭配 Git Graph 去觀察版本歷史，你就會更清楚知道：

  • 自己現在改了什麼
  • 以前改過什麼
  • 每一個版本是怎麼累積起來的

補充：本講義出現的少量指令說明

git --version

檢查 Git 是否安裝成功

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

設定提交版本時顯示的姓名

git config --global user.email "你的信箱"

設定提交版本時顯示的 Email

git config --global user.name
git config --global user.email

查看目前設定值

練習 3

  1. 請說明 Git、GitHub、VS Code 三者的角色分別是什麼。
  2. 在 VS Code 中，完成一次版本提交的基本流程有哪些步驟？
  3. Git Graph 適合拿來觀察哪些資訊？請至少列出兩項。
Copyright © 2026 Jia-Yin