本文來(lái)分享 10 個(gè)極大提高開發(fā)效率的 VS Code 技巧！

標(biāo)簽換行

在VS Code中，可以在設(shè)置中搜索" Editor: Wrap Tabs"來(lái)實(shí)現(xiàn)選項(xiàng)卡換行的功能。

這樣，在大型項(xiàng)目中工作時(shí)，就不需要像在瀏覽器中一樣滾動(dòng)來(lái)查找選項(xiàng)卡，而是可以讓選項(xiàng)卡自動(dòng)換行，更方便地跟蹤模板和組件。

Timeline 視圖：本地源代碼控制

Git等代碼控制工具能夠輕松跟蹤文件的變更，并且在需要時(shí)還原到之前的狀態(tài)。為了提供更好的版本控制和代碼歷史的可視化，VS Code提供了Timeline視圖。

Timeline視圖是一個(gè)自動(dòng)更新的面板，它顯示與文件相關(guān)的重要事件，如Git提交、文件保存和測(cè)試運(yùn)行等。通過(guò)Timeline視圖，你可以更直觀地瀏覽代碼的演變過(guò)程，追蹤各種操作對(duì)文件的影響。

展開此視圖可查看與當(dāng)前文件相關(guān)的事件快照列表。這里是文件保存，也是 Git 提交文件暫存的地方。

將鼠標(biāo)懸停在快照項(xiàng)上可查看 VS Code 制作快照的日期和時(shí)間。

選擇快照項(xiàng)可查看差異視圖，顯示快照時(shí)的文件與當(dāng)前文件之間的更改。

自定義布局

VS Code 界面的左側(cè)選項(xiàng)卡通常包括資源管理器、搜索、源代碼控制、項(xiàng)目管理等功能。而終端中會(huì)顯示諸如 “problems”, “output”, “terminal”和“debug console”等工具欄。

VS Code 支持自由地拖放這些選項(xiàng)卡，按照喜好來(lái)重新排列界面，讓它更適合你的使用習(xí)慣。

通過(guò)簡(jiǎn)單的拖拽操作，可以改變它們的位置。比如，可以將資源管理器移到右側(cè)，將搜索放在頂部，或者將終端移動(dòng)到左側(cè)。只需點(diǎn)擊選項(xiàng)卡的標(biāo)題欄，并將其拖動(dòng)到你想要的位置。釋放鼠標(biāo)按鈕后，選項(xiàng)卡將會(huì)被放置在你選擇的位置上，可以更方便地訪問(wèn)和管理這些功能。

自動(dòng)保存

在編輯文件時(shí)，默認(rèn)情況下需要手動(dòng)保存文件，比如按下Ctrl + S快捷鍵。這個(gè)過(guò)程可能很麻煩，特別是當(dāng)頻繁修改文件時(shí)。為了減輕這種繁瑣的操作，VS Code 引入了自動(dòng)保存功能。

自動(dòng)保存功能會(huì)在我們進(jìn)行文件編輯時(shí)自動(dòng)保存文件的更改，而無(wú)需手動(dòng)按下保存快捷鍵。這意味著我們可以專注于寫代碼而不用擔(dān)心保存文件，節(jié)省了不少時(shí)間和精力。此外，自動(dòng)保存還確保我們始終使用的是最新的文件版本，避免了由于未及時(shí)保存而丟失修改的情況。

使用“文件”>“自動(dòng)保存”可以輕松啟用該功能。

然而，自動(dòng)保存功能并非完美無(wú)缺。有些人可能喜歡手動(dòng)控制保存的時(shí)機(jī)，以便在修改完成之前進(jìn)行檢查和確認(rèn)。自動(dòng)保存也可能導(dǎo)致一些意外情況，比如誤操作或者意外修改了文件內(nèi)容，因?yàn)橐坏┍４妫薷木蜁?huì)立即生效。

是否啟用自動(dòng)保存功能取決于個(gè)人偏好和實(shí)際需求。權(quán)衡利弊，根據(jù)自己的習(xí)慣和工作流程來(lái)決定是否使用自動(dòng)保存功能。

使用命令面板執(zhí)行操作

在 VS Code 中，除了輸入文本之外，幾乎任何操作都可以通過(guò)命令面板完成。命令面板允許我們?cè)诰庉嬈髦袌?zhí)行各種任務(wù)，包括與文件相關(guān)的命令、導(dǎo)航命令、編輯命令和終端命令，每個(gè)命令都被優(yōu)化設(shè)計(jì)以提升編輯體驗(yàn)。通過(guò)命令面板，可以簡(jiǎn)單地搜索所需的命令，并選擇執(zhí)行相應(yīng)的操作。

打開命令面板的方式如下：

• Windows/Linux: 使用快捷鍵 Ctrl + Shift + P
• Mac: 使用快捷鍵 Shift + Command + P

快捷鍵是一種使用鍵盤更快地運(yùn)行命令的方式。與使用快捷鍵相比，命令面板的主要優(yōu)勢(shì)在于當(dāng)某個(gè)命令沒有快捷鍵時(shí)，或者當(dāng)你不確定某個(gè)命令是否存在時(shí)，可以通過(guò)命令面板進(jìn)行查找和執(zhí)行。

在 VS Code中，有大量的命令可供使用，比如打開文件、查找替換、調(diào)試應(yīng)用程序等。雖然很多命令都有對(duì)應(yīng)的快捷鍵，但并不是所有命令都有快捷鍵。此時(shí)，命令面板就發(fā)揮了作用。命令面板提供了一個(gè)搜索功能，可以輸入關(guān)鍵字來(lái)查找你想要執(zhí)行的命令。即使你不知道具體的命令名稱，只需輸入相關(guān)的描述性關(guān)鍵字，命令面板也能幫助你找到合適的命令。這種靈活性讓你無(wú)需記憶全部命令及其快捷鍵，只需用簡(jiǎn)單的搜索即可找到所需的命令并執(zhí)行操作。

因此，命令面板是一個(gè)非常實(shí)用的工具，特別適合當(dāng)需要執(zhí)行沒有快捷鍵的命令，或者想查找你不確定是否存在的命令時(shí)使用。

新設(shè)備同步

當(dāng)在一臺(tái)電腦上設(shè)置好了自己喜歡的 VS Code 環(huán)境后，如果換了一臺(tái)新電腦，不想再重新配置一遍。這時(shí)，VS Code的設(shè)置同步功能就派上用場(chǎng)了。

通過(guò)設(shè)置同步功能，可以將一臺(tái)電腦上的所有配置都保存下來(lái)。然后，在新的電腦上登錄賬號(hào)，開啟設(shè)置同步功能，就可以讓新電腦應(yīng)用上與之前完全相同的設(shè)置。這樣，不需要再花時(shí)間重新調(diào)整和配置所有的設(shè)置了。

禁用預(yù)覽

在 VS Code 中，當(dāng)打開一個(gè)文件后，立即打開另一個(gè)文件而沒有編輯第一個(gè)文件時(shí)，第一個(gè)文件就會(huì)被替換掉。VS Code只是在選擇文件時(shí)預(yù)覽它們，所以一旦點(diǎn)擊另一個(gè)文件，之前的文件就會(huì)消失。

可以在設(shè)置中搜索“Editor: Enable Preview”，取消勾選即可。這樣，當(dāng)打開一個(gè)文件后，即使打開了另一個(gè)文件，之前的文件也會(huì)保留在編輯器中，而不會(huì)自動(dòng)關(guān)閉。這樣，可以方便地在多個(gè)文件之間進(jìn)行切換和比較。

除此之外，如果想在某些情況下時(shí)預(yù)覽文件，而有些情況是固定文件。可以在 Tab 欄雙擊需要固定的文件，這樣這個(gè)文件就被固定了，不會(huì)被替換掉。

快速跳到代碼行

可以使用Ctrl + G 快捷鍵實(shí)現(xiàn)代碼行的快速跳轉(zhuǎn)。使用這個(gè)快捷鍵，會(huì)彈出一個(gè)輸入框，可以在其中輸入要跳轉(zhuǎn)的行號(hào)。輸入行號(hào)后，按回車鍵，編輯器將會(huì)直接跳轉(zhuǎn)到指定的行數(shù)處。這樣就能快速地導(dǎo)航到代碼的特定行，而不需要手動(dòng)滾動(dòng)查找。

平滑光標(biāo)打字

VS Code有一個(gè)稱為"平滑光標(biāo)"的功能，它可以在光標(biāo)移動(dòng)時(shí)產(chǎn)生平滑的動(dòng)畫效果。這讓打字感覺更加流暢和精致，并且在我們?yōu)g覽代碼行并將光標(biāo)放置在不同位置時(shí)，給予我們更平滑、更自然的感覺。

要打開平滑光標(biāo)功能，可以在命令面板中打開設(shè)置界面，并搜索 "Editor: Cursor Smooth Caret Animation" ，打開該設(shè)置即可。

多光標(biāo)編輯

多光標(biāo)編輯功能允許我們?cè)诓煌奈恢猛瑫r(shí)編輯多個(gè)光標(biāo)所在的文本，從而快速地進(jìn)行批量操作。例如，我們可以一次性在多行代碼中插入同樣的內(nèi)容，或者同時(shí)刪除多處重復(fù)的文本，以加快編輯的效率。

在編輯時(shí)，至少會(huì)有一個(gè)光標(biāo)，可以使用"Alt + 單擊"的方式添加更多的光標(biāo)。

還可以使用 Ctrl + Alt + Down 或 Ctrl + Alt + Up 快捷鍵輕松地在當(dāng)前行上方或下方添加光標(biāo)。