vscode 版本管理

本章會(huì)會(huì)介紹如何在VSCode中進(jìn)行查看代碼變化、改變文件狀態(tài)和代碼提交。

首先，在工作臺(tái)的左側(cè)活動(dòng)欄上，我們能看到一個(gè)版本管理的圖標(biāo)，位于下圖的第三個(gè)。

查看未提交的改動(dòng)

如果在當(dāng)前的文件夾下有尚未被提交的改動(dòng)，我們能夠在這個(gè)圖標(biāo)上面看到一個(gè)數(shù)字。數(shù)字代表了有多少個(gè)文件被修改了，只是雖改動(dòng)但還未被提交。

當(dāng)我們點(diǎn)擊這個(gè)圖標(biāo)，或者是按下 Ctrl + Shift + G 快捷鍵，就能夠打開版本管理這個(gè)視圖。這個(gè)視圖的最上方是一個(gè)多行輸入框，用于輸入代碼提交時(shí)候的描述內(nèi)容。在這個(gè)輸入框的下面，我們則能夠看到各種不同狀態(tài)下的代碼改動(dòng)，按照它們的不同狀態(tài)被歸類到不同的列表中。

比如在下圖中，我們只有一個(gè)更改：

狀態(tài)管理

不同的版本管理有不同的狀態(tài)管理方式，不過 VS Code 的版本管理界面為它們提供了統(tǒng)一的界面，并且相同狀態(tài)下的文件會(huì)被歸類在一起。

Git狀態(tài)管理

我們先拿 Git 來舉例。比如說 Git 中有三種主要的文件狀態(tài)：已提交（Committed）、修改（Modified）和暫存（Staged）。這里借用 Git-SCM 文檔 Git – Git Basics 里的一張圖來解釋，一個(gè)文件或者修改，能夠在這三個(gè)狀態(tài)直接切換。

當(dāng)我們修改了一個(gè)文件，它會(huì)變成修改狀態(tài)（Modified）；然后我們可以通過腳本 “git add ${filename}” 把這個(gè)文件的狀態(tài)改為暫存（Staged），被標(biāo)記為暫存狀態(tài)的文件，才有機(jī)會(huì)被提交。 最后我們可以通過 “git commit” 來提交所有在暫存狀態(tài)里的文件。

回到 VS Code 的版本管理界面，在下圖里，我們能夠看到兩種不同的狀態(tài)。

• 第一個(gè)是 “暫存的修改”，也就是所有處于暫存狀態(tài)的修改，它們都有機(jī)會(huì)被提交；
• 第二種則是普通的修改。此時(shí)側(cè)邊活動(dòng)欄上的版本管理圖標(biāo)已經(jīng)顯示了數(shù)字 2，它提示我們當(dāng)前項(xiàng)目里有兩個(gè)不同的修改。

上面我們提到，在 Git 中提交代碼前，我們需要先將代碼改動(dòng)變成暫存狀態(tài)。這個(gè)操作的對(duì)應(yīng)的命令行是 git add ${fileName}。我們同樣也可以通過版本管理的視圖來完成這樣的操作：只需將鼠標(biāo)移動(dòng)到我們想要提交的文件上，就能夠看到三個(gè)圖標(biāo)。

它們分別是：打開文件、放棄更改和暫存更改。我們只需點(diǎn)擊 “暫存更改” 這個(gè)按鈕，就能完成跟上面git add 一樣的操作。

SVN 狀態(tài)管理

在 SVN 中，則有一個(gè)變更列表（changelist 的概念），即可以使用變更列表來將不同任務(wù)里的代碼變更統(tǒng)一到一起。在下圖里，我們能夠看到一個(gè)“兩個(gè)分組”，一個(gè)是尚未被添加到變更列表里的代碼變動(dòng)，另一個(gè)是名叫 TEST 的變更列表。

而如果我們使用的是 SVN，鼠標(biāo)移動(dòng)到文件改動(dòng)上時(shí)，只能看到一個(gè)按鈕 “Set Changelist”。

按下這個(gè)按鈕后，我們就能看到一個(gè)列表，通過這個(gè)列表，可以選擇創(chuàng)建新的變更列表（changelist），或者選擇將這個(gè)改動(dòng)增加到現(xiàn)有的某個(gè)變更列表中。

提交變更

在選擇完哪些代碼變更要提交之后，下一步就是填寫描述信息并提交了。在版本管理視圖的上方，有一個(gè)輸入框，我們把描述信息填入到這個(gè)輸入框后，按下 Cmd + Enter 就能提交了（Subversion 是 Ctrl + Enter），也可以通過輸入框上方的對(duì)號(hào)按鈕來提交。

其他操作

查看代碼變化、改變文件狀態(tài)和代碼提交，這就是我們?nèi)粘Ｗ畛Ｊ褂玫膸讉€(gè)操作了。而其他的操作，比如更新、回退、發(fā)布、儲(chǔ)藏代碼等等，我們可以通過點(diǎn)擊輸入框上方最右側(cè)的三個(gè)點(diǎn)的圖標(biāo)，打開一個(gè)下拉菜單，選擇我們想要的功能并執(zhí)行。

差異編輯器

VSCode 差異編輯器，介紹差異編輯器功能，包括：從差異編輯器跳轉(zhuǎn)到一個(gè)普通的編輯器；在差異編輯器里顯示代碼里行末的空格符的變化；在當(dāng)前文件里的多個(gè)變動(dòng)之間進(jìn)行跳轉(zhuǎn)了。

下面我們來說一下差異編輯器。在差異編輯器的右上角，我們能夠看到一排按鈕。

第一個(gè)按鈕的功能是從差異編輯器跳轉(zhuǎn)到一個(gè)普通的編輯器，并且打開這個(gè)文件。這樣我們能夠無干擾地進(jìn)行編輯操作了。

第二個(gè)按鈕控制的是：是否要在差異編輯器里顯示代碼里行末的空格符的變化。比如說你不小心在行末添加了幾個(gè)空格，默認(rèn)情況下，VS Code 覺得這幾個(gè)空格不影響代碼，就不會(huì)在差異編輯器里顯示。但我建議把它打開，這樣你就可以確保能夠看到所有的代碼改動(dòng)。

接下來的兩個(gè)箭頭按鈕，就是用于在當(dāng)前文件里的多個(gè)變動(dòng)之間進(jìn)行跳轉(zhuǎn)了。

最后是一個(gè)三個(gè)點(diǎn)的圖標(biāo)，想必不用點(diǎn)擊開你也知道，它意味著里面有更多的功能，點(diǎn)擊后即可看到一個(gè)下拉菜單。

這個(gè)下拉框里的命令，前三個(gè)是和 Git 相關(guān)的。在版本管理視圖里我們只能夠?qū)ξ募臓顟B(tài)進(jìn)行操作，但是 Git 同樣允許我們修改文件中某一段代碼變動(dòng)的狀態(tài)，就是通過這三個(gè)命令實(shí)現(xiàn)的。

比如在上面的動(dòng)圖中，index.js 文件里有兩段不同的改動(dòng)，現(xiàn)在我只想把第一段代碼改動(dòng)變?yōu)闀捍鏍顟B(tài)。那接下來我要做的就是選中這段代碼，從下拉菜單里選擇 “暫存所選范圍”運(yùn)行。這之后，我們?cè)诎姹竟芾硪晥D里就能夠看到兩組代碼變動(dòng)，“暫存的更改”這個(gè)組里是我剛才選中的那段代碼變動(dòng)，而“更改”組里則是第二個(gè)代碼變動(dòng)。

相信你已經(jīng)猜想到了這個(gè)功能的用途，有的時(shí)候我們?cè)谛抟粋€(gè) bug 或者完成一個(gè)功能時(shí)，對(duì)代碼做了一些臨時(shí)的變動(dòng)，但我們既不想提交這個(gè)變動(dòng)，也不想把它清除掉，那通過這幾個(gè)命令我們就能夠真正按需提交代碼變動(dòng)了。

不過遺憾的是，SVN 這個(gè)插件并沒有支持這個(gè)功能。

下拉菜單里的第四個(gè)則是和差異編輯器呈現(xiàn)方式相關(guān)的。默認(rèn)情況下，差異編輯器采取并排的方式顯示兩個(gè)編輯器，左邊的編輯器顯示改動(dòng)前的文件內(nèi)容，右側(cè)則是改動(dòng)后的文件內(nèi)容。其實(shí)我們也可以使用 “切換內(nèi)聯(lián)視圖”，將代碼改動(dòng)顯示在同一個(gè)編輯器里。

在這個(gè)內(nèi)聯(lián)的差異編輯器里，我們依然可以看出代碼變動(dòng)的情況。

至于最后的三個(gè)則是通用的編輯器命令，打開任意編輯器時(shí)，我們都能夠使用它們。這里就不多贅述。

內(nèi)置版本管理操作

VSCode 內(nèi)置版本管理操作，前面我們一起學(xué)習(xí)了如何使用版本管理視圖和差異編輯器對(duì)代碼變動(dòng)進(jìn)行管理，其實(shí)我們同樣也能夠在普通的編輯器里完成這樣的操作。當(dāng)我們對(duì)一個(gè)文件作了修改后，我們能夠在普通編輯器里，行號(hào)的右側(cè)看到不同顏色的豎線。它們代表著不同狀態(tài)的代碼變動(dòng)，比如代碼增加、修改和刪除。

當(dāng)我們點(diǎn)擊這個(gè)豎線時(shí)，我們就能在當(dāng)前編輯器里，立刻看到一個(gè)內(nèi)置的差異編輯器。這樣我們就不用每次都打開版本管理視圖里去查看代碼變動(dòng)了。

在這個(gè)內(nèi)置的差異編輯器的內(nèi)側(cè)，我們能夠看到一些按鈕。它們的作用跟差異編輯器右上角的那些按鈕是一樣的，你能夠通過它們暫存、撤銷代碼改動(dòng)，以及在代碼改動(dòng)之間跳轉(zhuǎn)。當(dāng)我們把鼠標(biāo)移動(dòng)上去時(shí)，還能夠看到它們對(duì)應(yīng)的快捷鍵。

狀態(tài)欄和資源管理器

VSCode 版本管理狀態(tài)欄和資源管理器，除了版本管理視圖以外，另外一個(gè)能夠快速了解項(xiàng)目版本狀態(tài)的就是狀態(tài)欄了。無論是使用 Git，還是 SVN 來做版本管理的項(xiàng)目里，我們都能在狀態(tài)欄的左側(cè)看到當(dāng)前代碼屬于哪個(gè)分支。不僅如此，我們還能通過點(diǎn)擊它來進(jìn)行分支的創(chuàng)建與切換。

此外，當(dāng)我們?cè)趯Ｐ挠趯懘a的時(shí)候，大部分情況下我們打開的都是資源管理器。為了方便我們?cè)谶@種情況下快速地了解哪些文件被修改了、有什么類型的改動(dòng)，VS Code 會(huì)把資源管理器中對(duì)應(yīng)的文件項(xiàng)的顏色改變，同時(shí)在這個(gè)文件項(xiàng)的最后附上一個(gè)簡(jiǎn)單的字母，用于表明這個(gè)文件的狀態(tài)。比如說我們?cè)谙旅娴膱D中看到，index.js 這個(gè)文件被修改了，那么在資源管理器里，這個(gè)文件項(xiàng)變成了黃色的，同時(shí)最后還有一個(gè)字母 M，也就是修改 Modified 的首字母。

版本管理命令結(jié)果輸出

VSCode 版本管理輸出版本管理命令，VS Code 的設(shè)計(jì)哲學(xué)并不想當(dāng)一個(gè)黑盒，而是盡可能地開放給你。就好比說版本管理，Git 非常流行，但它的學(xué)習(xí)成本也很高，即便是一個(gè)熟練使用它的工程師，也偶爾會(huì)遇到奇怪的情況，更不要說剛剛學(xué)習(xí)它的新手了。為了保證你知道你按下某個(gè)按鈕后，VS Code 最終轉(zhuǎn)化成了哪個(gè) Git 命令，或者你遇到意外情況的時(shí)候 Git 發(fā)生了什么，VS Code 會(huì)把所有這些信息全部輸出到輸出面板中。你可以打開輸出面板，點(diǎn)擊下拉框，然后選擇你使用的版本管理工具的 log 進(jìn)行查看。