VS Code使用Git視覺化管理原始碼詳細教程

追逐時光者發表於2021-02-19

前言:

  隨著VS Code的功能和外掛的不斷強大和完善,它已經成為了我們日常開發中一個必不可缺的夥伴了。在之前我曾經寫過一篇SourceTree使用教程詳解(一個git視覺化管理神器,想要了解的話可以點選檢視詳情),這篇文章主要是對VS Code如何使用Git視覺化管理我們的程式原始碼。

VS Code簡介:

官網下載地址:

https://code.visualstudio.com/

  Visual Studio Code是一個輕量級但功能強大的原始碼編輯器,可在您的桌面上執行,並且可用於Windows,macOS和Linux。它具有對JavaScript,TypeScript和Node.js的內建支援,並具有豐富的其他語言(例如C ++,C#,Java,Python,PHP,Go)和執行時(例如.NET和Unity)擴充套件的生態系統。VS Code內建了對Git的支援,可以使用圖形化介面方便的進行版本控制,比如新增暫存,提交更新,拉取遠端程式碼,推送程式碼到遠端程式碼庫,建立合併分支,檔案內容差異比較等這些常規操作。

環境準備:

1、首先需要現在安裝Visual Studio Code。

下載地址:https://code.visualstudio.com/Download

選擇對應的平臺進行安裝(我自己是安裝的window平臺):

 

2、Git環境安裝:

Git安裝詳細教程:https://blog.csdn.net/qq_43715354/article/details/108638061 

克隆GitHub中的儲存庫:

1、複製GitHub儲存庫的SSH連結地址:

2、開啟VS Code點選克隆,貼上SSH連結地址進行下載:

檢視當前所在分支:

1、介面檢視:

2、切換到終端,命令檢視:

git branch -a

[*重要]實際工作開發四步曲(添,提,拉,推):

首先要明白四步曲分別是哪四步,其作用分別是什麼?

添:將修改的內容新增到本地暫存區 git add。
提:將本地暫存區中的內容提交到原生程式碼庫 git commit -m 'description'。
拉:同步,拉取遠端程式碼庫中的內容,在多人協同開發中十分的重要,因為假如事先沒有同步更新到最新版本有可能會覆蓋別人修改的東西,假如拉取後有衝突直接使用VS Code解決衝突即可 git pull。
推:將原生程式碼庫中的內容推送到遠端程式碼倉庫 git push。

新增暫存區:

新增Information.txt文字檔案,新增至本地暫存區。

提交原生程式碼庫:

 

 

拉取同步遠端最新程式碼庫:

推送至遠端程式碼庫:

 

驗證是否推送成功,檢視GitHub中的倉庫內容:

衝突解決:

   接下來我們來自己模擬一下多人開發,如:我在本地修改Information.txt文字檔案的內容,然後在到GitHub中修改一次這樣本地在提交的時候就會產生衝突,然後我們可以藉助VS Code智慧的解決衝突的方式幫助我們來解決衝突。

本地修改:

 

 GitHub中的修改:

 

 本地提交後,拉取時提示衝突如下:

 

 合併衝突提交到遠端程式碼庫中:

VS Code提供了四種智慧合併的方式供給我們選擇,我們可以按照實際情況進行程式碼衝突解決。當然也可以手動刪除解決,不過要慎重,可能一不小心就把同事辛辛苦苦寫了幾天的程式碼給覆蓋了哦,這裡我選擇了【保留雙方更改】的方式進行衝突解決。

 

衝突完美解決:

建立分支並推送到遠端程式碼庫:

1、切換到原始碼管理檢視:

2、選擇需要建立子分支的主分支:

注意:我們這裡為develop分支建立feature-20210218分支。

 

3、將新建分支推送到遠端程式碼庫:

 

 

子分支開發完成後合併到主分支中:

首先我們在feature-20210218子分支中建立一個資料夾和一個文字檔案,然後將feature-20210218子分支合併到develop開發分支中合併提交到遠端程式碼庫。

1、feature-20210218子分支中建立一個資料夾和一個檔案:

2、使用實際工作開發四步曲(添,提,拉,推)教程將新新增的內容推送到遠端程式碼庫:

切換到feature-20210218分支:

 

 檢視檔案是否提交成功:

3、將feature-20210218子分支合併到develop開發分支:

a.首先切換到develop分支中:

 

b.選擇需要合併過來的分支:

 

 

 

 

 

 c.推送至遠端倉庫,檢視合併是否成功:

 VS Code Git提交修改歷史記錄檢視(甩鍋專用):

需要安裝Git History擴充。

 檢視對應檔案的修改歷史記錄:

 

檢視檔案修改時間線對比檔案修改內容:

 

 

 

 

相關文章