VS Code：初學者提示和技巧

Visual Studio Code (VS Code) 不僅僅是一個標準的程式碼編輯器，它還是一個整合開發環境 (IDE)，開箱即用地提供了大量功能。作為 MDN 的技術撰稿人，我主要使用 VS Code 以 Markdown 格式編寫文件。當我開始使用 VS Code 時，我發現了很多可以立即使用的功能。雖然它很簡單易用，但瞭解一些額外的功能和擴充套件可以幫助您更快地完成工作，無論您是在編碼、寫作，還是兩者兼而有之。

本文提供了一個入門概述，透過一些實用技巧、有趣的功能（包括內建的 Git 功能）以及一些可以增強您 VS Code 體驗的擴充套件，帶您一起探索。我很高興能分享我學到的技巧和工具，這些對初學者來說將大有裨益。

鍵盤快捷鍵

讓我們來探索一些可以加快在 VS Code 中導航和編輯速度的鍵盤快捷鍵。其中許多快捷鍵在其他編輯器中也受支援。例如，如果您熟悉 Sublime Text，您會發現大多數快捷鍵都非常相似。學習這些快捷鍵可以幫助您在 VS Code 中更快地工作，並且如果您切換到或使用其他編輯器，它們也會很有用。

導航快捷鍵

動作	在 Windows 上	在 macOS 上
開啟檔案	`Ctrl` + `O`	`Command` + `O`
跳轉到檔案中的某一行	`Ctrl` + `G`	`Control` + `G`
跳轉到檔案中的某個符號	`Ctrl` + `Shift` + `O`	`Command` + `Shift` + `O`
開啟命令面板	`Ctrl` + `Shift` + `P`	`Command` + `Shift` + `P`
開啟鍵盤快捷鍵	`Ctrl` + `K`, `Ctrl` + `S`	`Command` + `K`, `Command` + `S`
開啟 Zen 模式	`Ctrl` + `K`, `Z`	`Command` + `K`, `Z`
開啟終端	`Ctrl` + `	`Ctrl` + `
開啟 Markdown 預覽	`Ctrl` + `K`, `V`	`Command` + `K`, `V`

編輯快捷鍵

動作	在 Windows 上	在 macOS 上
將行向上或向下移動	`Alt` + `↑` 或 `↓`	`Option` + `↑` 或 `↓`
複製行或選區	`Ctrl` + `Alt` + `↑` 或 `↓`	`Shift` + `Option` + `↑` 或 `↓`
選擇下一個匹配項	`Ctrl` + `D`	`Command` + `D`
在匹配項之間導航	`Ctrl` + `K` + `D`	`Shift` + `Command` + `G` 和 `Command` + `G`

自定義快捷鍵

如果上面列出的某些快捷鍵對您不起作用，請檢查您的鍵盤快捷鍵設定。您可以透過在 macOS 上按 Command + K，然後按 Command + S 來訪問設定，或者使用選單 Code > Settings > Keyboard Shortcuts (截至 1.83.1 版本)。您可能會注意到某個特定操作已設定了不同的按鍵組合，或者您可能需要設定新的快捷鍵。您可以自定義鍵盤快捷鍵以適應您的風格和需求。

使用 Zen 模式

在撰寫本文時，我瞭解了 Zen Mode。我發現此功能類似於 Google Docs 中的 Pageless 功能。您可以透過 macOS 上的 Command + K, Z (View > Appearance > Zen Mode) 啟用 Zen Mode。要退出，請使用相同的按鍵組合或按兩次 Esc。如果您喜歡工作區域沒有雜亂或干擾，您可能會喜歡此模式。

個人最愛

我最喜歡的快捷鍵是 Command + D，因為它允許我選擇一個單詞或短語的多個匹配項，並在原地同時編輯它們。例如，要將某個關鍵字的多個匹配項加粗，我使用此按鍵組合選擇它們，然後輸入兩個星號。VS Code 會自動在每個選定詞的兩側加上一個星號（請參閱包圍字元功能），使它們變粗。這通常比使用傳統的“查詢和替換”實用程式更快，尤其是在處理可見幀中較少匹配項時。“查詢和替換”可以在您處理批次替換或需要執行正則表示式搜尋時提供幫助。

您已經在用上面列出的多少個快捷鍵了？您都用過嗎，或者還有其他您覺得更有用的嗎？我發現，在使用 VS Code 工作時，即使只使用幾個快捷鍵也能提高我的效率，更不用說使用這些快捷鍵很有趣了！而且，當您在使用 Google Docs 時這些快捷鍵不起作用時，難道不會有點煩人嗎！？😅

內建功能

VS Code 提供了一些巧妙的功能，可以立即加快您的寫作和編輯速度。

整合終端

VS Code 內建的“終端”允許您直接從編輯器執行 shell 命令，因此您無需在 VS Code 和單獨的終端視窗之間切換。它支援多個終端，您可以輕鬆地在它們之間切換。要開啟終端，請在 Windows 和 macOS 上按 Ctrl + ` (View > Terminal)。終端還支援文字選擇，因此您可以輕鬆地與終端進行文字的複製和貼上。

大綱檢視

VS Code 中的大綱檢視功能以樹形結構顯示文件，顯示檔案中的標題、類、方法和其他重要元素。您可以單擊所需的元素直接導航到檔案中的相應部分。隨著您新增、刪除或重新排列標題，樹形結構會動態調整，使您可以輕鬆地導航到不同部分，而無需滾動文件。除了快速導航之外，它還有助於快速概覽文件的結構。

可以在側邊欄訪問大綱檢視；它通常位於 **Explorer** 選項卡下方。如果它還沒有顯示，您可以透過 View > Open View... 選單啟用它，輸入“Outline”並按 Return。

大綱檢視適用於各種檔案型別，從程式設計到標記語言。在 Markdown 檔案中，標題在“大綱”檢視中會變成一個可單擊的內容目錄。

Screenshot showing Outline view panel in VS Code, displaying a hierarchical structure of a document's headings and subheadings for easy navigation.

Markdown 預覽

為了處理 Markdown 檔案，VS Code 提供了 Markdown 預覽功能。它會顯示您的 .md 檔案格式化輸出的即時預覽，類似於內容在網頁上的顯示方式。要開啟預覽，請在 macOS 上按 Command + K，然後按 V。這將開啟一個並排檢視，其中您的 Markdown 文字會被渲染，並在您編輯檔案時進行更新。

我在編寫和編輯文件時發現此預覽功能非常方便，因為它允許我立即發現並修復任何格式問題。此外，由於預覽會在您鍵入時更新，因此您看到的內容始終是最新的。它有助於您更專注於內容建立，而減少對格式問題的關注。

Screenshot showing Markdown Preview feature in VS Code, with the editor window on the left and the rendered Markdown preview on the right

無論您是建立簡短的 README 還是編寫 extensive documentation，此功能都非常有用。

編輯支援

自動包圍字元：VS Code 的一項出色功能是，當您選擇一個單詞或短語時，鍵入一個字元會用該字元將選定的文字包圍起來。當您需要用引號或括號等字元包裝多個單詞匹配項時，此功能可以節省大量時間。結合我們之前在 macOS 上看到的 Command + D 按鍵組合，您可以一次性快速地對多個選區進行這些編輯。
多游標編輯：這是我的第二個最喜歡的功能。透過按 Option 鍵並單擊滑鼠到所有需要的地方，您可以建立多個游標以同時編輯多行或短語。

此外，您可以單擊一個起點，按住 Option 和 Shift 鍵（在 macOS 上）並拖動以建立多行游標，這對於編輯一行下方的一行很有用。我發現當我需要縮排多行時，此功能非常有效；我無需為每一行按 Tab 鍵，而是透過單擊選定的位置，按住 Option 和 Shift 鍵，然後拖動游標來建立多游標，再透過一次按 Tab 鍵來縮排所有行。

Git 整合

VS Code 的內建 Git 功能有助於管理版本控制，並使處理一些複雜場景更加容易。

解決合併衝突：在處理 MDN 等協作專案時，合併衝突幾乎是不可避免的。VS Code 直觀的 GUI 有助於解決這些衝突。您可以輕鬆地比較衝突的檔案，識別差異，並選擇如何解決它們。
檢視提交歷史：您可以使用原始碼管理檢視（macOS 上為 Control + Shift + G）檢視當前儲存庫中的更改列表和提交歷史記錄，如下圖所示。您甚至可以直接在提供的輸入欄位中輸入提交訊息，以便在提交之前捕獲您的更改。
管理分支：您可以從視窗底部的狀態列快速訪問分支管理功能。單擊當前分支名稱時，您可以透過快速選取選單搜尋並切換到其他分支，甚至建立新分支。原始碼管理檢視提供了另一種管理和訪問不同分支的方式。