目錄
    Add a header to begin generating the table of contents

    Git 2/4: 在 VS Code 啟用 Git?介紹 Git 版面基本操作

    Git 24 在 VS Code 啟用 Git?介紹 Git 版面基本操作
    Share on facebook
    Share on twitter
    Share on linkedin
    Share on whatsapp
    目錄
      Add a header to begin generating the table of contents

      上一篇文章:Git 1/4: 甚麼是 Git/Github?為什麼需要專案版本管理?

      上一篇我們介紹了 Git 與版本管理(version control)的基本概念,以及其希望解決的問題後,我們一起來看看如何在 VS Code 的專案裡啟用 Git 的功能吧!

      我們在這篇教學裡會使用 VS Code 作為我們 Python 編程工具。如果您不太熟悉 VS Code 的工作環境,或未有在您的電腦安裝 VS Code,可以按這裡:

      第 1 步:安裝 VS Code 的 Git 插件

      首先我們到 VS Code 的插件商店安裝「Git Extension Pack」。如果您不知道 VS Code 強大的插件商店,可以參考這篇教學:VSCode 1/5: macOS 最佳 Python 編程工具?豐富的插件商店?Visual Studio Code 安裝攻略

      VS Code 裡有許多的 Extension Pack 讓我們選擇。就像一個福袋,Extension Pack 讓我們可以一鍵安裝多個的 Extension,簡化我們選擇不同 Extension 的時間。

      我是廣告 ^o^

      安裝完成後,您可能會見到這個彈出視窗,要求您在 macOS 安裝 Git。這是由於 macOS 內置本來未有安裝 Git 的軟體,所以如果我們需要在 VS Code 使用 Git 的話,便需要 macOS 為我們先安裝 Git。

      順帶一提,如果您手快,未有在彈出的視窗按「Install」,可以在 Terminal 運行以下指令,使 macOS 再次彈出安裝 Git 的請求:

      git --version

      第 2 步:在 VS Code 專案啟用 Git

      Git 的安裝完成後,我們回到 VS Code 的主頁面。這裡我們建立了一個新的專案名叫「gitproject」,如果您不知道如何建立新的 VS Code 專案可以按這裡:VSCode 3/5: 實戰篇!版面介紹、管理 Python 專案和多個 .py

      如果您已經有一個現有的專案,您也可以直接使用現有的專案跟隨以下教學。

      在 VS Code 的左邊,我們按一下「Git」的圖案,並且按一下「Initialize Repository」。

      我是廣告 ^o^

      完成後,您的「Source Control」版面應該有以下的選項:

      如果您有興趣,可以到您的 VS Code 專案裡顯示隱藏的檔案(macOS 的快捷鍵是 Command + Shift + .)。您會發現您的專案多出了一個「.git」的文件夾。

      這個「.git」的文件夾就是用來儲存檔案的不同版本。值得一提的是,git 通常儲存的是 2 個版本的分別(diff),所以您不會在這裡見到一個完整的備份。

      第 3 步:設定 Git 的用戶名與電郵

      接下來我們設定在 Git 的用戶名以及電郵地址。

      在 git 的操作裡,我們需要一個「用戶」為這些操作背書。例如我們加入修改(commit)時,便需要標籤一個用戶(例如自己),從而使整個過程可追溯。

      我是廣告 ^o^

      Git 的「用戶」最低需求是一個名稱(user.name)和電郵地址(user.email)。

      我們開啟一個新的 Terminal 視窗(在 VS Code 裡按 Command + Shift + P,然後選擇「Python: Create Terminal」),並按序輸入以下 2 行:

      git config --global user.email "<您的常用電郵地址>"
      git config --global user.name "<您的暱稱>"

      這個用戶設定會適用在在您的 macOS 帳戶。即使您開啟其他 VS Code 的專案,甚至使用其他的編程軟件(IDE),也不用重新設定。

      第 4 步:建立新的檔案

      如此以來,我們可以開始建立新的檔案,測試一下 Git 的基本功能了!

      首先我們回到專案首頁,並建立一個新的檔案,名叫「main.py」。如果您不知道如何建立一個新的檔案,可以按這裡:VSCode 3/5: 實戰篇!版面介紹、管理 Python 專案和多個 .py

      我是廣告 ^o^

      留意我們的新檔案變成了綠色,而在 Explorer 的右側出現了「U」的字眼。「U」的全寫是 Untracked,意思就是這一個檔案未在任何的 Git 分支(branch)裡有紀錄。

      所以,我們可以透過看看檔案是否標記為綠色而斷定這是否一個新的檔案。

      接下來我們到左邊的「Git」圖案,跳到「Source Control」的版面。留意在「Changes」框框裡多了「main.py」。這個「Changes」的框框十分重要,因為它會告訴我們有哪些檔案被修改了,包括新建的檔案。

      此外,我們也能看到「File History」框框裡多出了一行「Uncommitted changes」。這個框框有助我們了解這個檔案的改變過程。由於我們的「main.py」檔案是新建的,所以在 File History 裡只有未在任何 Git 分支的紀錄。

      第 5 步:加入新的修改(commit)

      接下來,我們在 main.py 裡輸入以下的簡單代碼,並且按一下「Command + S」儲存檔案。

      我是廣告 ^o^
      print("Hello World")

      留意我們的檔案仍然是處於綠色(Untracked)的狀態。還記得我們上一篇教學有關修改(commit)與分支(branch)的概念嗎?現在,我們是時候把 main.py 的內容在 Git 裡加入為新的修改(commit)了。

      我們先來勾劃一下加入新的修改(commit)的步驟:

      1. 儲存已更改的檔案
      2. 把需要加入修改(commit)的檔案加入「Staged Changes」
      3. 輸入修改信息(commit message)並在分支(branch)加入修改(commit)

      把檔案加入 Staged Changes

      首先我們需要在 Changes 的框框下,選擇 main.py 並按一下「Stage Changes」的按鈕。

      「Stage Changes」 讓我們能夠選擇略過某些已經更改的檔案。比方說,我們現在更改了 2 個現存的檔案,加入了 1 個新的檔案,那麼 Changes 的框框了會有 3 個檔案。但如果我們還沒有完善新加入的檔案,只希望把 2 個現存的檔案加入修改(commit),那麼我們便可以只把 2 個檔案「Stage Changes」,從而略過新加入、未完成的檔案。

      完成後,我們會見到在 Changes 框框了,多出了「Staged Changes」一欄,而 main.py 將會在 Staged Changes 以下。

      我是廣告 ^o^

      此外,我們亦能見到在 File History 的框框裡,我們從本來的「Uncommitted changes」變成了「Staged Changes」。這是代表我們已經把 main.py 裡的更改提升至「Staged」的環節。

      留意我們的檔案現在是綠色的「Added」狀態,代表我們已經將新的檔案加入了 Staged Changes 和 Git 的視線範圍。

      把 Staged Changes 加入修改(commit)和分支(branch)

      我們現在已經準備好把 Staged Changes 加入分支(branch)了!

      在右上方「Message (Command Enter to commit on ‘master’)」的框框裡,我們應該輸入一些有關這個修改(commit)有用的訊息。例如我們加入了「main.py」,可以填寫「Create new file」。

      填寫了 Commit Message 後,我們按一下「Command + Enter」,便成功把我們的 Staged Changes 變成一個修改(commit),加入了 master 這個分支(branch)了!

      我是廣告 ^o^

      完成後,我們可以見到以下的改變:

      • Changes/Staged Changes 的框框現在是空白的,代表我們已經把所有檔案加入分支(branch)的修改(commit)
      • Commits 的框框從「No commits could be found」多出了「Create new file」的修改(commit)。這是顯示我們現在使用的分支(即 master 分支)有了 1 個新的修改,就是我們剛剛加入的修改。如果我們放大(expand)這個項目,會見到 main.py 的更改
      • File History 的框框多出了「Create new file」一行。由於 File History 會顯示我們現在開啟的檔案(即 main.py)以往有什麼修改,所以它告訴我們,在「Create new file」的修改了我們曾經更改了 main.py
      • Branches 的框框裡,master 分支多出了一個「Create new file」的修改(commit),跟 Commits 框框的資訊一樣。

      順帶一提,如果您在以上的步驟裡得到了以下這個彈出視窗,這是因為您還沒完成我們教學第 3 步有關設定 Git 用戶名和電郵的步驟。記得先使用第 3 步介紹的方法設定好 Git,再重新試一遍修改(commit)。

      第 6 步:更改已有的檔案及提交修改

      現在我們試一下如果我們修改現有的檔案(existing file),會發生什麼事。

      首先我們把 main.py 修改成以下的代碼,然後按一下「Command + S」儲存檔案:

      print("Hello World, Samson")
      
      print("Welcome!")

      留意我們的檔案現在是處於黃色「Modified」的狀態。這是由於我們在 Git 的上一個修改(commit)已經加入了 main.py,所以 Git 知道這個檔案的存在。

      我是廣告 ^o^

      另外,如果我們細心留意,在 main.py 視窗的行數(line number)旁變成了藍色間條。如果您按一下藍色間條,您會見到一個彈出寫著「main.py (1 of 1 change)」。

      這個彈出告訴我們 main.py 距離上一個修改(即是 Create new file)有什麼分別。我們可以見到:

      • 紅色的部分有我們第一個版本時的 print("Hello World")。這代表我們上一個版本的內容
      • 黃色的部分有我們新增的內容,特別是第 1 行的 Samson 以及整個第 3 行。這代表我們現在對檔案做出了什麼更改

      為現有檔案的更改加入修改(Commit)

      整個流程其實跟上面新加入 main.py 的時候的流程一樣:

      1. 儲存已更改的檔案
      2. 把需要加入修改(commit)的檔案加入「Staged Changes」
      3. 輸入修改信息(commit message)並在分支(branch)加入修改(commit)

      就如上面一樣,我們先把 main.py 加入 Staged Changes,然後輸入一個有用的修改訊息(commit message),並按一下 Command + Enter:

      完成後,您會發現在 Commits 和 File History 的框框裡多出了「Add Samson」的一個修改(Commit),而「main.py」不再顯示為黃色的「Modified」狀態。

      我是廣告 ^o^

      第 7 步:還原(rollback)檔案及移除修改(commit)

      有時候我們為檔案加入了新的修改(commit),但我們發現還是原來的版本比較好的時候,我們該怎麼辦?

      不用怕,Git 的存在就是為了這些情況!

      以下我們先列出還原檔案的步驟。這些步驟就像是以上加入修改的反轉:

      1. 在分支(branch)選擇修改(commit),並進行修改還原(Undo Commit)
      2. 把變更從「Staged Changes」駁回至「Changes」
      3. 在「Changes」裡放棄變更(Discard changes)

      如果我們在 Commits 的框框裡用滑鼠浮動在「Add Samson」的修改(commit)上, 我們會見到有個像是還原的「Undo Commit」按鈕。

      按了一下修改還原(Undo Commit)後,您應該會見到如下圖一樣,我們的變更回到了「Staged Changes」的階段。

      我是廣告 ^o^

      這時候,其實就跟我們先前「Stage Changes」後,還未輸入修改訊息(Commit message)一樣。

      留意現在我們的 main.py 已經變回黃色的「Modified」狀態。

      我們把滑鼠浮動在「Staged Changes」的 main.py 上,會發現一個像減號的按鈕,讓我們可以「Unstage Changes」,即把這些變更駁回到「Unstaged Changes」的列表裡。

      按了「Unstage changes」以後,我們可以見到如下圖一樣,main.py 的變更來到了「Changes」的列表。此外,我們又看到我們熟悉的,在行數(line number)右邊的藍色間條。

      如果我們把滑鼠浮動在「Changes」的 main.py 上, 會發現又一個還原的標誌。這次,它的描述是「Discard Changes」,即是把這些變更放棄的意思。

      我是廣告 ^o^

      按了一下「Discard Changes」以後,您會見到一個彈出視窗,詢問您是否真的要放棄這些變更。這是 VS Code 給我們的最後警告,過了這次以後,我們便再不能恢復這些變更。

      按一下藍色的「Discard Changes」按鈕繼續:

      完成後,我們再也見不到 print("Hello World, Samson") print("Welcome!") 。取而代之的是我們起初第 1 次修訂的版本,只有 print("Hello World") 的版本。

      這也是為什麼完成了以上步驟後,我們的專案已經成功還原至較早前,我們想要它在的狀態。

      結語

      繼上一篇我們介紹了 Git 的基本概念後,這次我們示範了在 VS Code 裡如何應用這些的基本 Git 概念,並且成功把 main.py 以不同的 Git 修改(commit)形成不同的版本。

      我是廣告 ^o^

      下一篇,我們會介紹一下 gitignore 和它的重要性,記得留意我們的文章了!

      人氣文章

      快讓我學更多

      small_c_popup.png
      想學習 Python 嗎?
      快來訂閱我們的電子報!