VS Code使用Git可視化管理源程式碼詳細教程

前言:

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

VS Code簡介:

官網下載地址:

//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。

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

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

 

2、Git環境安裝:

Git安裝詳細教程://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拓展。

 查看對應文件的修改歷史記錄:

 

查看文件修改時間線對比文件修改內容: