在本文中，我們將介紹如何結(jié)合開發(fā)者可用的一些最強(qiáng)大的工具——VS Code 和 Git——開始為開源和私人項(xiàng)目做出有意義的貢獻(xiàn)躺彬。在介紹如何使用 VS Code 驅(qū)動(dòng) Git 之前匕得，我們先來了解一些背景信息电禀。

什么是 VS Code罐盔？

Visual Studio Code担平，簡稱 VS Code李剖，是一款可在 Mac芒率、Windows 和 Linux 上運(yùn)行的簡潔代碼編輯器，具有交互式調(diào)試器篙顺、豐富的開發(fā)者工具集成以及眾多擴(kuò)展偶芍，可以更輕松地編寫代碼。

根據(jù) StackOverflow 2021 年的開發(fā)者調(diào)查德玫，VS Code 是最受歡迎的集成開發(fā)環(huán)境（IDE）匪蟀，在 80,000 多名受訪者中，有 71% 表示 VS Code 是他們的首選 IDE宰僧。有關(guān) VS Code 功能和歷史的更多信息材彪，請?jiān)L問 VS Code 的官方 "Why VS Code" 頁面。

什么是 Git琴儿？

Git 是一種分布式版本控制工具查刻，由 Linus Torvalds 于 2005 年創(chuàng)建，用于管理 Linux 內(nèi)核的開發(fā)凤类。簡而言之穗泵，Git 跟蹤對文件的更改，使您能夠在需要時(shí)恢復(fù)到先前的文件版本谜疤。

GitLens —— 讓 VS Code Git 功能更強(qiáng)大的免費(fèi)擴(kuò)展

GitLens 是 VS Code 中最受歡迎的 Git 擴(kuò)展佃延，安裝量已超過 2000 萬。它提供了代碼作者信息夷磕，并釋放了 VS Code 中 Git 的全部潛力履肃。

2022 年，我們增加了一組全新的功能坐桩，即 GitLens+ 功能尺棋。其中首次推出的 GitLens+ 功能包括 Visual File History 視圖和 Worktrees。最初绵跷，這些功能要求在本地和公開托管的倉庫上使用時(shí)需要免費(fèi)賬戶膘螟，而在私有倉庫上使用時(shí)則需要付費(fèi)賬戶成福。

然而，隨著 2022 年 10 月 GitLens 13 的發(fā)布荆残，我們引入了美觀的新 Commit Graph奴艾，期望每個(gè)人都能無障礙地在本地和公開倉庫上使用 GitLens+ 功能。因此内斯，我們?nèi)∠嗣赓M(fèi)賬戶的限制蕴潦，現(xiàn)在僅在私有倉庫上使用時(shí)需要專業(yè)賬戶。

GitLens+ 的目標(biāo)是創(chuàng)建一個(gè)可持續(xù)的模型俘闯，使我們能夠繼續(xù)大量投資于 GitLens 的免費(fèi)開源核心功能潭苞，這些功能旨在提升生產(chǎn)力、安全性真朗、易用性等此疹，同時(shí)增加一組專門為專業(yè)開發(fā)者和團(tuán)隊(duì)設(shè)計(jì)的可選功能。GitLens+ 功能標(biāo)有 ?符號以便識別蜜猾。

想要更好地使用 Git 和 VS Code秀菱？下載 GitLens 擴(kuò)展，訪問寶貴的文件歷史和代碼作者信息蹭睡，幫助您更自信地編碼衍菱。

GitLens 提升了 VS Code 內(nèi)置的 Git 功能。無論您是經(jīng)驗(yàn)豐富的 Git 開發(fā)人員還是剛開始使用 Git肩豁，GitLens 都可以更輕松脊串、安全和快速地發(fā)揮 Git 的全部功能。本教程將向您展示如何在 VS Code 中使用 GitLens清钥，并充分利用該工具琼锋。注冊 GitLens+ 以獲得更好的體驗(yàn)——它是免費(fèi)的！

使用 VS Code 進(jìn)行 Git 工作流

接下來祟昭，我們將開始介紹如何在 VS Code 中使用 Git 工作流缕坎。您將學(xué)習(xí)如何創(chuàng)建 Git 倉庫、提交更改篡悟、連接遠(yuǎn)程倉庫谜叹、推送更改，并在整個(gè)過程中利用 GitLens 擴(kuò)展使 Git 在 VS Code 中的使用更加強(qiáng)大搬葬。

在 VS Code 中使用 Git 的先決條件

在使用 VS Code 的 Git 集成之前荷腊，首先需要確保已下載并配置 Git。要檢查是否已安裝 Git急凰，可以通過使用快捷鍵 CTRL + 打開 VS Code 中的集成終端女仰，然后輸入 git --version。如果終端返回類似 git version 后跟任意版本號的內(nèi)容，則表示已安裝 Git疾忍。如果沒有返回任何內(nèi)容乔外，則需要前往 Git 官方下載頁面 下載適合您操作系統(tǒng)的版本。

接下來锭碳，您應(yīng)驗(yàn)證 Git 是否已正確配置袁稽，方法是設(shè)置您的姓名和郵箱勿璃。要檢查是否已配置 Git擒抛，請?jiān)诮K端中運(yùn)行以下命令：

git config --global --list

如果 Git 已配置，終端會返回您設(shè)置的用戶名和郵箱补疑。如果沒有配置歧沪，則需要通過以下步驟配置 Git：

設(shè)置姓名：

git config --global user.name <您的姓名>

設(shè)置郵箱：

git config --global user.email <您的郵箱>

這些信息是使用 Git 所必需的，在提交任何更改之前必須輸入莲组。有關(guān) Git 設(shè)置和初始要求的更多信息诊胞，請查看 Git 官方文檔。

在 VS Code 中打開 Git 倉庫

確認(rèn) Git 已在您的機(jī)器上正確安裝和配置后锹杈，您需要初始化本地倉庫或克隆并打開現(xiàn)有項(xiàng)目撵孤。

初始化倉庫有多種方式，您可以根據(jù)工作流和當(dāng)前情況選擇適合的方法竭望。一般來說邪码，當(dāng)開發(fā)者希望為現(xiàn)有項(xiàng)目做貢獻(xiàn)時(shí)會克隆遠(yuǎn)程倉庫；當(dāng)開始一個(gè)全新項(xiàng)目時(shí)會創(chuàng)建一個(gè)新倉庫咬清。

使用 URL 在 VS Code 中克隆 Git 倉庫

要使用 URL 將現(xiàn)有倉庫克隆到本地機(jī)器闭专，請按照以下步驟操作：

1. 選擇活動(dòng)欄上的源代碼控制圖標(biāo)。

   
   

2. 在倉庫操作選項(xiàng)中選擇“Clone Repository”（克隆倉庫）旧烧。

3. 前往您偏好的倉庫托管服務(wù)（如 GitHub）影钉。

4. 在左上角的搜索欄中搜索您希望克隆的遠(yuǎn)程倉庫，并選擇該倉庫掘剪。

   
   

5. 點(diǎn)擊綠色的 “Code” 按鈕平委。

6. 復(fù)制遠(yuǎn)程倉庫的 URL。

   
   

7. 將 URL 粘貼到 VS Code 的命令面板中夺谁。

接下來廉赔，您將被提示選擇在本地機(jī)器上的保存位置。完成后予权，您就可以開始對該倉庫進(jìn)行操作昂勉。

使用 VS Code 命令面板克隆現(xiàn)有的 Git 倉庫

您也可以通過命令面板克隆現(xiàn)有倉庫并在本地環(huán)境中開始工作∩ㄏ伲克隆現(xiàn)有 Git 倉庫的步驟如下：

1. 選擇活動(dòng)欄上的源代碼控制圖標(biāo)岗照。

   
   

2. 在倉庫操作選項(xiàng)中選擇“Clone Repository”。

3. 在命令面板的下拉列表中選擇您要克隆的托管服務(wù)（如 GitHub）。

4. 選擇您要克隆的遠(yuǎn)程倉庫攒至。

項(xiàng)目將被復(fù)制到您的本地機(jī)器厚者，您可以開始對其進(jìn)行工作。

使用 VS Code 終端初始化新的 Git 倉庫

要使用 VS Code 終端初始化新的 Git 倉庫迫吐，請首先在本地機(jī)器上創(chuàng)建并命名一個(gè)新文件夾库菲。

然后，進(jìn)入 VS Code 終端并運(yùn)行 git init <文件夾名稱>志膀。這樣會在 VS Code 中打開文件夾熙宇，并在項(xiàng)目內(nèi)自動(dòng)創(chuàng)建 .git 文件夾以存儲 Git 元數(shù)據(jù)。

使用 VS Code 側(cè)邊欄按鈕初始化新的 Git 倉庫

您還可以選擇使用 VS Code 的側(cè)邊欄按鈕初始化倉庫溉浙。操作步驟如下：

1. 在您的機(jī)器上創(chuàng)建并命名一個(gè)新文件夾烫止。

2. 打開 VS Code，在主屏幕的開始菜單下選擇“Open”來打開文件夾戳稽。

   
   

3. 選擇活動(dòng)欄中的源代碼控制圖標(biāo)馆蠕。

4. 點(diǎn)擊“Initialize Repository”來初始化倉庫。

   
   

VS Code 中的 Git 工作流

一旦對項(xiàng)目進(jìn)行了更改并希望保存惊奇，最好提交這些更改互躬。可以將提交視為工作中的“存檔點(diǎn)”颂郎。

隨著項(xiàng)目的增長吼渡，您可以查看、修改并在舊提交的基礎(chǔ)上構(gòu)建新的更改祖秒。提交更改的 Git 工作流程如下：

• 編輯項(xiàng)目
• 暫存更改
• 編寫提交信息
• 提交更改

使用 GitLens 在 VS Code 中跟蹤更改

? 提交圖表（Commit Graph）

GitLens 提交圖表讓您輕松可視化并監(jiān)控所有正在進(jìn)行的工作诞吱，每個(gè)提交節(jié)點(diǎn)中包含了豐富的信息。您可以看到每個(gè)提交的作者竭缝、日期和提交信息房维，還可以查看每個(gè)提交中更改的文件。這有助于理解代碼庫的演變過程并識別需要關(guān)注的部分抬纸。

提交圖表是交互式的咙俩，包含全面的上下文菜單，您可以直接在圖表上執(zhí)行 Git 操作湿故，例如合并阿趁、挑選和還原更改，或使用豐富的提交圖表搜索功能坛猪。

GitLens 的提交圖表使得跟蹤和管理工作進(jìn)度變得更加簡單高效脖阵。

• 通過右鍵菜單與分支、提交墅茉、標(biāo)簽等交互
• 雙擊分支以簽出分支
• 豐富的提交搜索和篩選功能
• 查看 Pull Requests 的信息
• 活動(dòng)迷你地圖可快速查看倉庫活動(dòng)
• 更改列可視化每個(gè)提交中對文件的更改
• 滾動(dòng)標(biāo)記器可快速找到并跳轉(zhuǎn)到關(guān)注點(diǎn)

提交圖表對所有公共倉庫的用戶免費(fèi)開放命黔，且無需賬號呜呐。對于擁有 GitLens+ 訂閱的用戶，還可以在私有倉庫中使用提交圖表悍募。

內(nèi)聯(lián) Blame 注釋和 CodeLens

GitLens 內(nèi)聯(lián) Blame 注釋在文件中的每行代碼旁顯示作者和提交信息蘑辑。將鼠標(biāo)懸停在代碼行上時(shí)會顯示一個(gè)工具提示，其中包含作者姓名坠宴、用戶名及提交時(shí)的提交信息洋魂。

此功能幫助您追蹤代碼更改和理解每行代碼的歷史，還可以追溯特定行的更改并了解是誰進(jìn)行了更改喜鼓。Blame 注釋可用于識別團(tuán)隊(duì)成員的代碼貢獻(xiàn)副砍，有助于分配代碼的責(zé)任和貢獻(xiàn)。此功能也可以幫助識別和跟蹤代碼中的錯(cuò)誤颠通，從而更輕松地排除問題址晕。

CodeLens 是 VS Code 中的強(qiáng)大工具之一膀懈，提供了可點(diǎn)擊的鏈接顿锰，顯示提交詳情，并允許您從快速選擇菜單中進(jìn)行比較启搂、導(dǎo)航和深入探索每個(gè)提交硼控。

文件注解

借助文件注解功能，您可以在一個(gè)便捷的視圖中查看 Git 倉庫和文件的詳細(xì)信息胳赌。啟用文件注解時(shí)牢撼，GitLens 會提供一個(gè)側(cè)邊欄，顯示當(dāng)前打開文件的相關(guān)信息疑苫。您可以查看文件的提交歷史熏版，包括每個(gè)提交的作者和日期；將鼠標(biāo)懸停在某個(gè)提交上時(shí)捍掺，還可以看到完整的提交信息撼短。

GitLens 文件注解還展示了文件在每次提交中的更改，您可以看到哪些行被添加挺勿、修改或刪除曲横，使得追蹤更改和理解文件隨時(shí)間的演變更加簡單。文件注解包含一個(gè)交互式代碼熱力圖不瓶，直觀地顯示代碼更改最多的行禾嫉，便于發(fā)現(xiàn)可能需要關(guān)注或優(yōu)化的代碼區(qū)域。

如果您在團(tuán)隊(duì)環(huán)境中工作蚊丐，文件注解還可以幫助您識別是誰在何時(shí)對文件做了修改熙参。您可以查看每位團(tuán)隊(duì)成員的貢獻(xiàn)，并快速導(dǎo)航到每次更改的提交歷史麦备。

狀態(tài)欄 Blame

使用狀態(tài)欄 Blame 功能孽椰，您可以快速查看當(dāng)前選中代碼行的作者和提交信息讲竿。此信息會顯示在 Visual Studio Code 編輯器窗口底部的狀態(tài)欄中。狀態(tài)欄 Blame 還會顯示代碼的最后修改時(shí)間弄屡，幫助您識別陳舊或過時(shí)的代碼题禀，或了解特定代碼更改的背景。

只需點(diǎn)擊任意一行代碼膀捷，GitLens 就會在狀態(tài)欄中顯示該行的作者迈嘹、提交信息和最后修改時(shí)間。

提交詳情

提交詳情視圖提供了關(guān)于提交和暫存（stash）的豐富信息全庸。您可以快速查看提交的作者秀仲、提交 ID、相關(guān)的任務(wù)和拉取請求鏈接壶笼、變更的文件等信息神僵。

當(dāng)提交詳情視圖未固定時(shí)，它會根據(jù)您在編輯器中瀏覽文件覆劈、選擇提交和暫存內(nèi)容的操作進(jìn)行上下文跟隨保礼。您還可以在提交圖表、提交視圖责语、暫存視圖炮障、交互式變基編輯器以及視覺文件歷史中查看提交詳情。您還可以從懸停提示坤候、上下文菜單和快捷選擇菜單中打開提交或暫存的詳細(xì)信息視圖胁赢。

在 VS Code 中暫存更改

GitLens - 提交圖表上的工作進(jìn)度 (WIP)

在 GitLens 中，當(dāng)您對文件進(jìn)行了更改并保存后白筹，工作進(jìn)度 (WIP) 會在 GitLens 提交圖表上以“工作進(jìn)度”行的形式顯示智末。只需右鍵點(diǎn)擊，即可訪問 WIP 上下文菜單徒河，從中可以使用諸如“暫存所有更改”系馆、“打開詳情”和“打開源代碼控制”等實(shí)用選項(xiàng)。這些功能讓您更有效地管理工作進(jìn)度虚青。

VS Code 界面

VS Code 會在活動(dòng)欄上的源代碼控制圖標(biāo)旁顯示一個(gè)藍(lán)色圓圈它呀，指示項(xiàng)目中未暫存的更改數(shù)量，方便您隨時(shí)查看棒厘。

當(dāng)您準(zhǔn)備好暫存更改時(shí)纵穿，可以將鼠標(biāo)懸停在文件上，然后點(diǎn)擊 + 圖標(biāo)來暫存單個(gè)文件奢人。

圖標(biāo)用于暫存單個(gè)文件 要在終端中暫存單個(gè)文件谓媒，只需運(yùn)行 git add <文件名>。
如果您有多個(gè)文件要暫存何乎，并希望一次性暫存它們句惯，可以導(dǎo)航到“更改”部分并選擇 + 圖標(biāo)土辩。

*注意：將所有更改一起暫存并提交是一個(gè)不良習(xí)慣拷淘。一起暫存并提交的文件會共享相同的提交信息，這可能會使 Git 日志變得難以理解指孤。頻繁提交更改可以減少將不相關(guān)的更改放在同一提交中的需要启涯，從長遠(yuǎn)來看也會為您節(jié)省時(shí)間。

在 VS Code 中提交更改

當(dāng)您所需的文件已暫存完畢后恃轩，就可以提交更改了结洼。在“Message”字段中撰寫清晰的提交信息，以說明您更改的目的叉跛，字段位于您暫存文件的上方松忍。然后，選擇 ? 圖標(biāo)以完成提交筷厘。

如果您喜歡使用 VS Code 集成終端鸣峭，可以運(yùn)行 git commit -m "<提交信息>" 進(jìn)行提交。-m 標(biāo)志用于添加提交信息敞掘，說明更改對項(xiàng)目的影響叽掘。包含提交信息是一個(gè)良好的實(shí)踐，這有助于您和其他項(xiàng)目貢獻(xiàn)者更輕松地跟蹤項(xiàng)目的更改玖雁。

要在終端中驗(yàn)證提交是否成功，可以運(yùn)行 git log盖腕，終端會返回最新的提交及其相關(guān)信息赫冬。

如果您更喜歡可視化的方法，可以通過 VS Code 的時(shí)間軸視圖確認(rèn)提交是否成功溃列。要訪問該視圖劲厌，選擇活動(dòng)面板中的“文件資源管理器”圖標(biāo)，然后選擇“Timeline”听隐。

使用 GitLens 獲取寶貴的提交歷史信息

一旦您的更改已提交补鼻，GitLens 的 Blame 注釋變得更加有用。

使用 GitLens 的 Blame 注釋雅任，您可以識別特定更改的提交人风范、修改時(shí)間、提交 SHA 等信息沪么。要在 GitLens 中訪問注釋硼婿，只需選擇并懸停在已提交的更改上，信息會顯示在代碼行下方禽车。

您還可以使用 GitLens 瀏覽項(xiàng)目的修訂歷史記錄寇漫。如果您想查看文件隨著時(shí)間的變化或?qū)?dāng)前項(xiàng)目狀態(tài)與一周前的狀態(tài)進(jìn)行比較刊殉，GitLens 可以實(shí)現(xiàn)這些操作。

要在 GitLens 中訪問所需文件的修訂歷史州胳，請執(zhí)行以下操作：

1. 選擇您所需的文件记焊。
2. 點(diǎn)擊屏幕右上角的圖標(biāo)（一個(gè)帶向左箭頭的圓圈），即可返回項(xiàng)目的先前版本栓撞。

在 VS Code 中連接 Git 遠(yuǎn)程倉庫

在 Git 中托管項(xiàng)目的遠(yuǎn)程倉庫是大多數(shù)開發(fā)者與其他貢獻(xiàn)者分享工作的方式亚亲。無論是作為企業(yè)團(tuán)隊(duì)的一部分還是開源貢獻(xiàn)者，遠(yuǎn)程倉庫通常是項(xiàng)目的最新版本腐缤，也是唯一的可信來源捌归。如果您希望他人能夠查看您的代碼并為項(xiàng)目做出貢獻(xiàn)，您需要設(shè)置遠(yuǎn)程倉庫以供他人訪問項(xiàng)目代碼庫岭粤。

要?jiǎng)?chuàng)建遠(yuǎn)程倉庫惜索，請前往 GitHub 并選擇“New”。

完成選擇后剃浇，您會看到如下界面巾兆。

使用 VS Code 集成終端連接遠(yuǎn)程倉庫

如果您更偏好鍵盤操作，可以在終端中將本地倉庫連接到遠(yuǎn)程倉庫毙芜。在 VS Code 中執(zhí)行以下步驟：

1. 復(fù)制遠(yuǎn)程倉庫的 URL蒲列。
2. 打開 VS Code 終端窒朋。
3. 運(yùn)行命令 git remote add origin <粘貼 URL> 并按下 Enter 鍵。

使用 VS Code 狀態(tài)欄連接遠(yuǎn)程倉庫

如果您的 GitHub 帳號已連接到 VS Code蝗岖，您可以直接在 VS Code 中快速創(chuàng)建遠(yuǎn)程倉庫侥猩。操作步驟如下：

1. 導(dǎo)航到窗口底部的狀態(tài)欄。
2. 選擇一個(gè)看起來像云且?guī)в邢蛏霞^的圖標(biāo)抵赢。
3. 在命令面板中選擇發(fā)布到公共或私有倉庫欺劳。

無論使用何種方式連接遠(yuǎn)程倉庫，都可以通過查看窗口底部狀態(tài)欄中的圖標(biāo)確認(rèn)項(xiàng)目是否已連接铅鲤。如果本地項(xiàng)目未連接到遠(yuǎn)程倉庫划提，狀態(tài)欄會顯示一個(gè)帶向上箭頭的云圖標(biāo)；如果已連接彩匕，則顯示一個(gè)類似刷新圖標(biāo)的圓圈腔剂。

另外，您可以導(dǎo)航到活動(dòng)欄中的源代碼管理圖標(biāo)驼仪，然后選擇“Remotes”來驗(yàn)證倉庫連接狀態(tài)掸犬。如果已連接遠(yuǎn)程倉庫袜漩，“Remotes”欄會顯示類似“REMOTES (1)”的提示，括號中的數(shù)字表示連接的遠(yuǎn)程倉庫數(shù)量湾碎。

在 Git 中將更改推送到遠(yuǎn)程倉庫

一旦遠(yuǎn)程倉庫連接完畢宙攻，您可以通過推送操作將本地項(xiàng)目中的更改發(fā)送到遠(yuǎn)程倉庫。推送可以幫助保持遠(yuǎn)程倉庫與本地項(xiàng)目的最新同步介褥，使其他項(xiàng)目貢獻(xiàn)者能夠處理這些更改座掘。

要從側(cè)邊欄推送暫存的更改，只需選擇源代碼管理圖標(biāo)柔滔，然后選擇“Sync Changes”（同步更改）按鈕溢陪。

在側(cè)邊欄中使用“Sync Changes”按鈕將更改推送到遠(yuǎn)程倉庫

如果您使用集成終端推送提交的更改，運(yùn)行 git push origin main 即可睛廊。

利用 GitLens 查看項(xiàng)目貢獻(xiàn)者及其代碼

GitLens 提供了一個(gè)“貢獻(xiàn)者視圖”選項(xiàng)形真，幫助您查看項(xiàng)目的所有貢獻(xiàn)者及其貢獻(xiàn)內(nèi)容。對于大型項(xiàng)目超全，這個(gè)功能尤為有用咆霜，可以方便地查看所有協(xié)作者及其代碼貢獻(xiàn)，只需點(diǎn)擊他們的個(gè)人資料即可嘶朱。

在 Git 中從遠(yuǎn)程倉庫拉取更改

拉取更改是開發(fā)者用于將本地項(xiàng)目與遠(yuǎn)程更新同步的過程改览。如果您正在與多位貢獻(xiàn)者合作下翎，建議定期拉取更改，以便了解其他人的工作內(nèi)容宝当，并保持項(xiàng)目的最新進(jìn)展。

您可以通過 VS Code 側(cè)邊欄中的三點(diǎn)省略號輕松拉取更改胆萧。首先庆揩，點(diǎn)擊源代碼管理視圖中的省略號，然后從下拉菜單中選擇“Pull”（拉鹊搿）订晌。

若使用集成終端拉取更改，只需運(yùn)行 git pull蚌吸。

準(zhǔn)備好開始在 Git 和 VS Code 中貢獻(xiàn)代碼锈拨！

現(xiàn)在，您已經(jīng)掌握了在 VS Code 中遵循基本 Git 工作流程的工具羹唠！了解如何在 VS Code 中使用 Git 可以幫助您更有效地與團(tuán)隊(duì)成員協(xié)作奕枢，同時(shí)也讓您輕松地開始為開源項(xiàng)目做出有意義的貢獻(xiàn)娄昆。Git 可能看起來復(fù)雜，但 VS Code 尤其在結(jié)合 GitLens 使用時(shí)缝彬，能夠?yàn)槟峁┍匾墓ぞ呙妊妗?qiáng)大的功能和直觀的用戶體驗(yàn)，助您走向成功谷浅。