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

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

1. 時間線視圖：本地源代碼控制

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

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

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

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

將鼠標懸停在快照項上，可以查看VS Code生成快照的日期和時間。

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

2. 自動保存：不再需要Ctrl + S

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

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

禁用自動保存。

啟用自動保存——未保存的指示器將不再顯示。

使用“文件”>“自動保存”可以啟用該功能。

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

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

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

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

要打開命令面板，請使用以下鍵盤快捷鍵：

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

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

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

你可以在資源管理器窗格中點擊文件，但要更快的方法，使用Ctrl +P來搜索并打開項目中的特定文件。

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

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

所有這些都比使用光標能更快地訪問文件。

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

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

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

使用Ctrl + G的鍵盤快捷鍵來實現(xiàn)這一點。

6. 快速刪除某行

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

7. 享受流暢光標的打字體驗

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

要啟用它，請在命令面板中打開設(shè)置界面，然后搜索“平滑光標”。

我們需要找到“編輯器：光標平滑光標動畫”設(shè)置，它有3個可能的選項：

• off：無光標平滑動畫
• explicit：僅在我們明確將光標放置在代碼中某個位置時才進行動畫。
• on：始終啟用光標平滑動畫，包括打字時。

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

8. 快速格式化代碼

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

如果你一直在手動進行格式化，你需要知道有一種更好的方法。

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

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

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

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

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

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

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

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

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

9. 利用多光標編輯節(jié)省時間

多光標編輯允許我們在不同的位置放置多個光標，可以多次刪除或插入相同的文本。這樣可以加快編輯速度，極大提高生產(chǎn)力，通過快速創(chuàng)建代碼，我們可以高效地完成重復(fù)的任務(wù)。

當(dāng)然，在編輯時，至少會有一個光標。使用Alt + Click添加更多光標。

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

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

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

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

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

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

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

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

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

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

主要要點

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

總結(jié)

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

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