根據(jù)2023年度Stack Overflow開(kāi)發(fā)者調(diào)查結(jié)果，Visual Studio Code是開(kāi)發(fā)者們最常用的開(kāi)發(fā)環(huán)境。

本文我們介紹優(yōu)秀的VS Code功能，如本地源代碼控制、動(dòng)畫(huà)輸入和快速刪除行等，幫助大家提高生產(chǎn)力，快速實(shí)現(xiàn)編碼目標(biāo)！

1. 時(shí)間線視圖：本地源代碼控制

時(shí)間線視圖是VS Code內(nèi)置的源代碼控制功能。

Git和其他源代碼控制工具的用途已經(jīng)眾所周知，它們可以方便我們跟蹤文件更改并在需要時(shí)還原到之前的某個(gè)狀態(tài)。

因此，VS Code的時(shí)間線視圖為我們提供了一個(gè)自動(dòng)更新的時(shí)間線，顯示與文件相關(guān)的重要事件，例如Git提交、文件保存和測(cè)試運(yùn)行。

展開(kāi)此視圖可以查看與當(dāng)前文件相關(guān)的事件快照列表。這里顯示的是文件保存，還有文件被暫存的Git提交。

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

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

2. 自動(dòng)保存：不再需要Ctrl + S

自動(dòng)保存功能會(huì)在我們編輯文件時(shí)自動(dòng)保存，無(wú)需手動(dòng)保存，非常節(jié)省時(shí)間，并始終能確保使用的文件是最新更改狀態(tài)。

然而，自動(dòng)保存功能并非完美，你需要權(quán)衡利弊，根據(jù)自身需求選擇是否使用。

禁用自動(dòng)保存。

啟用自動(dòng)保存——未保存的指示器將不再顯示。

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

3. 使用命令面板完成任何操作

除了輸入之外，在VS Code中我們可以使用命令面板完成幾乎所有的操作。

這些命令讓我們能夠在編輯器內(nèi)執(zhí)行各種任務(wù)，包括與文件相關(guān)的命令、導(dǎo)航命令、編輯命令和終端命令。每個(gè)命令都經(jīng)過(guò)優(yōu)化設(shè)計(jì)，以增強(qiáng)編輯體驗(yàn)的不同方面。

因此，通過(guò)命令面板，可以簡(jiǎn)單地搜索命令并選擇執(zhí)行相關(guān)的操作。

要打開(kāi)命令面板，請(qǐng)使用以下鍵盤(pán)快捷鍵：

• Windows/Linux：Ctrl + Shift + P
• Mac：Shift + Command+ P

與快捷鍵相比，命令面板的主要優(yōu)點(diǎn)在于它可以執(zhí)行那些沒(méi)有預(yù)設(shè)快捷鍵的命令；或者當(dāng)你對(duì)某個(gè)命令是否存在感到不確定時(shí)，你可以通過(guò)命令面板來(lái)查找。

4. 快速跳轉(zhuǎn)到文件

你可以在資源管理器窗格中點(diǎn)擊文件，但要更快的方法，使用Ctrl +P來(lái)搜索并打開(kāi)項(xiàng)目中的特定文件。

按住Ctrl鍵并按Tab鍵可在編輯器中循環(huán)瀏覽當(dāng)前打開(kāi)的文件列表。

你甚至可以使用Alt + Left和Alt + Right快速在這些打開(kāi)的文件之間進(jìn)行導(dǎo)航。

所有這些都比使用光標(biāo)能更快地訪問(wèn)文件。

5. 快速跳轉(zhuǎn)到行

跳轉(zhuǎn)而非滾動(dòng)。

在調(diào)試過(guò)程中，快速導(dǎo)航到某一行非常有價(jià)值，當(dāng)你需要在特定的行號(hào)上遇到錯(cuò)誤時(shí)。通過(guò)跳轉(zhuǎn)到這些行，你可以在特定的上下文中查看代碼、評(píng)估變量并排查問(wèn)題。

使用Ctrl + G的鍵盤(pán)快捷鍵來(lái)實(shí)現(xiàn)這一點(diǎn)。

6. 快速刪除某行

使用Ctrl + Shift + K快捷鍵，在幾秒鐘內(nèi)快速刪除某一行和其他幾十行。

7. 享受流暢光標(biāo)的打字體驗(yàn)

VS Code有個(gè)流暢光標(biāo)的功能，當(dāng)光標(biāo)移動(dòng)時(shí)會(huì)進(jìn)行動(dòng)畫(huà)效果，就像在MS Word中一樣。這使得打字感覺(jué)更加流暢和精細(xì)，同時(shí)在代碼行之間導(dǎo)航和定位光標(biāo)時(shí)給我們帶來(lái)更加平滑和自然的感覺(jué)。

要啟用它，請(qǐng)?jiān)诿蠲姘逯写蜷_(kāi)設(shè)置界面，然后搜索“平滑光標(biāo)”。

我們需要找到“編輯器：光標(biāo)平滑光標(biāo)動(dòng)畫(huà)”設(shè)置，它有3個(gè)可能的選項(xiàng)：

• off：無(wú)光標(biāo)平滑動(dòng)畫(huà)
• explicit：僅在我們明確將光標(biāo)放置在代碼中某個(gè)位置時(shí)才進(jìn)行動(dòng)畫(huà)。
• on：始終啟用光標(biāo)平滑動(dòng)畫(huà)，包括打字時(shí)。

將其設(shè)置為on以獲得完整的視覺(jué)體驗(yàn)。

8. 快速格式化代碼

格式化的目的是通過(guò)以結(jié)構(gòu)化和一致的方式組織代碼來(lái)提高可讀性。

如果你一直在手動(dòng)進(jìn)行格式化，你需要知道有一種更好的方法。

你需要使用“格式化文檔”命令自動(dòng)格式化代碼，這個(gè)命令在命令面板中很容易找到。根據(jù)當(dāng)前文件的語(yǔ)言，將使用特定的“默認(rèn)”格式化程序來(lái)使用縮進(jìn)、行長(zhǎng)度、括號(hào)等各種規(guī)則來(lái)格式化代碼。

雖然VS Code內(nèi)置的JS/TS格式化程序相當(dāng)不錯(cuò)，但為了獲得更強(qiáng)大的解決方案，強(qiáng)烈推薦使用Prettier擴(kuò)展。

安裝鏈接：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

安裝后，將其設(shè)置為默認(rèn)格式化程序。

當(dāng)你使用手動(dòng)保存而不是自動(dòng)保存時(shí)，有一個(gè)功能可以使格式化更加方便：

Editor: Format On Save：“保存時(shí)格式化文件。必須可用格式化程序，文件不得在延遲后保存，編輯器必須正在關(guān)閉”。默認(rèn)情況下禁用。

因此，啟用此設(shè)置后，當(dāng)你使用Ctrl + S保存文件時(shí)，VS Code將自動(dòng)使用當(dāng)前默認(rèn)的格式化程序?qū)Υa進(jìn)行格式化，就像你在上面的演示中看到的那樣。

當(dāng)你使用自動(dòng)保存時(shí)，“Format On Save”功能不起作用，并且每次需要格式化時(shí)不斷打開(kāi)命令面板可能會(huì)變得乏味。這就是鍵盤(pán)快捷鍵的作用：

• Windows：Shift + Alt + F
• Mac：Shift + Option + F
• Linux：Ctrl + Shift + I

9. 利用多光標(biāo)編輯節(jié)省時(shí)間

多光標(biāo)編輯允許我們?cè)诓煌奈恢梅胖枚鄠€(gè)光標(biāo)，可以多次刪除或插入相同的文本。這樣可以加快編輯速度，極大提高生產(chǎn)力，通過(guò)快速創(chuàng)建代碼，我們可以高效地完成重復(fù)的任務(wù)。

當(dāng)然，在編輯時(shí)，至少會(huì)有一個(gè)光標(biāo)。使用Alt + Click添加更多光標(biāo)。

你還可以使用Ctrl + Alt + Down或Ctrl + Alt + Up 快速在當(dāng)前行的上方或下方添加光標(biāo)。

這些快捷鍵分別執(zhí)行“在上方添加光標(biāo)”和“在下方添加光標(biāo)”的命令。

10. 快速創(chuàng)建新文件/文件夾

創(chuàng)建新的文件和文件夾的快捷方式：

你無(wú)需不斷移動(dòng)鼠標(biāo)來(lái)定位那些小按鈕，你可以直接雙擊資源管理器面板來(lái)創(chuàng)建新文件。

那么新建文件夾呢？文件夾是沒(méi)有文件的，當(dāng)你創(chuàng)建新文件時(shí)，你可以使用斜杠“/”來(lái)表示層次結(jié)構(gòu)，并創(chuàng)建包含該文件的新文件夾和子文件夾。

比如，你可以創(chuàng)建一個(gè)名為“utils”的文件夾來(lái)包含“index.js”文件。

使用鍵盤(pán)快捷鍵會(huì)更加高效。使用A鍵和Shift + A鍵來(lái)分別創(chuàng)建新文件和文件夾。

因?yàn)锳和Shift + A顯然是我們編碼時(shí)使用的鍵，所以我在這里包含了when的值，以確保只有在資源管理器面板具有焦點(diǎn)且當(dāng)前編輯器中沒(méi)有活動(dòng)光標(biāo)時(shí)才創(chuàng)建新文件/文件夾。

所以，為了在輸入時(shí)使用這些快捷鍵，你需要首先將焦點(diǎn)集中在資源管理器面板上，可以單擊它，或者使用Ctrl/Command + Shift + E。

主要要點(diǎn)

• 在資源管理器面板中啟用本地源代碼控制，這是默認(rèn)情況下可用的。
• 使用“文件”>“自動(dòng)保存”自動(dòng)保存文件。
• 使用Ctrl + Shift + P或Shift + Command + P在命令面板中運(yùn)行命令。
• 使用Ctrl + P轉(zhuǎn)到文件，在打開(kāi)的文件之間導(dǎo)航使用Alt + Left/Right或Ctrl + Tab。
• 使用Ctrl + G轉(zhuǎn)到特定行。
• 使用Ctrl + Shift + K刪除一行。
• 通過(guò)啟用“編輯器：光標(biāo)平滑光標(biāo)動(dòng)畫(huà)”設(shè)置來(lái)實(shí)現(xiàn)流暢的輸入體驗(yàn)。
• 使用“格式化文檔”命令格式化代碼，使用Prettier插件，將快捷鍵更改為Ctrl + D，Ctrl + D。
• 使用Alt + 單擊可以同時(shí)使用多個(gè)光標(biāo)。使用Ctrl + Alt + 上/下箭頭添加光標(biāo)。
• 使用Alt/Option + 上/下箭頭在Windows/Mac上移動(dòng)一行。
• 通過(guò)雙擊資源管理器面板或設(shè)置自定義鍵盤(pán)快捷鍵來(lái)創(chuàng)建新文件。使用“文件夾/文件.ext”來(lái)在新文件夾中創(chuàng)建新文件。

總結(jié)

Visual Studio Code不僅僅是一個(gè)文本編輯器，更是一個(gè)功能強(qiáng)大的工具，掌握好它可以極大地提高你的生產(chǎn)力并簡(jiǎn)化編碼工作流程。

本文介紹的這十個(gè)技巧只是冰山一角，因此要不斷探索，不斷學(xué)習(xí)。高效編碼的關(guān)鍵不僅在于代碼本身，還在于你用來(lái)編寫(xiě)代碼的工具。