根據2023年度Stack Overflow開發者調查結果，Visual Studio Code是開發者們最常用的開發環境。

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

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

時間線視圖是VS Code內置的源代碼控制功能。

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

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

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

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

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

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

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

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

禁用自動保存。

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

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

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

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

這些命令讓我們能夠在編輯器內執行各種任務，包括與文件相關的命令、導航命令、編輯命令和終端命令。每個命令都經過優化設計，以增強編輯體驗的不同方面。

因此，通過命令面板，可以簡單地搜索命令并選擇執行相關的操作。

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

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

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

4. 快速跳轉到文件

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

按住Ctrl鍵并按Tab鍵可在編輯器中循環瀏覽當前打開的文件列表。

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

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

5. 快速跳轉到行

跳轉而非滾動。

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

使用Ctrl + G的鍵盤快捷鍵來實現這一點。

6. 快速刪除某行

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

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

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

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

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

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

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

8. 快速格式化代碼

格式化的目的是通過以結構化和一致的方式組織代碼來提高可讀性。

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

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

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

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

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

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

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

因此，啟用此設置后，當你使用Ctrl + S保存文件時，VS Code將自動使用當前默認的格式化程序對代碼進行格式化，就像你在上面的演示中看到的那樣。

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

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

9. 利用多光標編輯節省時間

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

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

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

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

10. 快速創建新文件/文件夾

創建新的文件和文件夾的快捷方式：

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

那么新建文件夾呢？文件夾是沒有文件的，當你創建新文件時，你可以使用斜杠“/”來表示層次結構，并創建包含該文件的新文件夾和子文件夾。

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

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

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

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

主要要點

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

總結

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

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