vscode 版本管理

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

首先，在工作臺的左側(cè)活動欄上，我們能看到一個版本管理的圖標，位于下圖的第三個。

查看未提交的改動

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

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

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

狀態(tài)管理

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

Git狀態(tài)管理

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

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

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

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

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

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

SVN 狀態(tài)管理

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

而如果我們使用的是 SVN，鼠標移動到文件改動上時，只能看到一個按鈕 “Set Changelist”。

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

提交變更

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

其他操作

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

差異編輯器

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

此外，當我們在專心于寫代碼的時候，大部分情況下我們打開的都是資源管理器。為了方便我們在這種情況下快速地了解哪些文件被修改了、有什么類型的改動，VS Code 會把資源管理器中對應的文件項的顏色改變，同時在這個文件項的最后附上一個簡單的字母，用于表明這個文件的狀態(tài)。比如說我們在下面的圖中看到，index.js 這個文件被修改了，那么在資源管理器里，這個文件項變成了黃色的，同時最后還有一個字母 M，也就是修改 Modified 的首字母。

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

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