VS Code 用戶界面

布局

VS Code 希望工作臺(tái)的布局盡可能地簡(jiǎn)單直觀，目的是最大限度地為代碼編輯提供空間，同時(shí)留下足夠的空間瀏覽和訪問(wèn)項(xiàng)目文件夾。分為以下區(qū)域：

• 編輯區(qū)（Editor）：位于工作臺(tái)的正中間，是進(jìn)行代碼編輯的主要區(qū)域。您可以在垂直或水平方向上并排打開(kāi)任意多個(gè)編輯器；
• 側(cè)邊欄（Side Bar）：位于工作臺(tái)的左側(cè)，包含不同的面板視圖，每個(gè)面板是一個(gè)完整的功能，由活動(dòng)欄觸發(fā)顯示或隱藏。如資源管理器、跨文件搜索、源代碼管理等；
• 活動(dòng)欄（Activity Bar）：位于工作臺(tái)的最側(cè)邊，由一組圖標(biāo)按鈕組成，每個(gè)按鈕用于顯示或隱藏側(cè)邊欄面板，不同按鈕的點(diǎn)擊將進(jìn)行面板切換。圖標(biāo)按鈕還將顯示面板功能的提示，例如 Git 圖標(biāo)會(huì)顯示當(dāng)前分支的文件更改數(shù)；
• 輔助面板（Panels）：在編輯區(qū)的正下方，可以切換不同的操作面板，例如：工作臺(tái)輸出、調(diào)試控制臺(tái)、應(yīng)用的檢測(cè)提醒（錯(cuò)誤和警告）或集成終端；
• 狀態(tài)欄（Activity Bar）：位于工作臺(tái)的底部，顯示當(dāng)前項(xiàng)目和您編輯的文件的信息；
• 標(biāo)題欄：位于工作臺(tái)的最上方，用于操作工作臺(tái)窗口：雙擊將最大化窗口，按住可拖動(dòng)窗口在屏幕上的位置；
• 菜單欄：各種操作的快速導(dǎo)航。

每次啟動(dòng)工作臺(tái)時(shí)，它都會(huì)以上次關(guān)閉時(shí)的狀態(tài)打開(kāi)，保留布局和打開(kāi)的文件。

每個(gè)編輯器中打開(kāi)的文件都顯示在編輯區(qū)頂部，并帶有選項(xiàng)卡式標(biāo)題。要了解有關(guān)選項(xiàng)卡式的更多信息，請(qǐng)參閱下面的選項(xiàng)卡部分的內(nèi)容。

側(cè)邊欄

在側(cè)邊欄中包含了以下功能面板：

• 資源管理器：用于瀏覽、打開(kāi)和管理項(xiàng)目中的所有文件和文件夾；
• 跨文件搜索：在項(xiàng)目中提供全局搜索和替換；
• 源代碼管理：Git 倉(cāng)庫(kù)的管理操作；
• 應(yīng)用大綱樹(shù)：用于預(yù)覽項(xiàng)目的組織和進(jìn)行依賴管理、npm 腳本執(zhí)行等操作。

面包屑

編輯器的內(nèi)容上方有一個(gè)面包屑的導(dǎo)航欄。它顯示文件和符號(hào)的當(dāng)前位置，并允許您在文件夾、文件和符號(hào)之間快速導(dǎo)航。

選項(xiàng)卡

在編輯器中打開(kāi)的文件通過(guò)標(biāo)題選項(xiàng)卡的方式在編輯器上方進(jìn)行顯示。

每次打開(kāi)文件時(shí)，都會(huì)為該文件添加新的選項(xiàng)卡。

選項(xiàng)卡允許您在文件之間快速導(dǎo)航，您可以拖拽選項(xiàng)卡以重新對(duì)其進(jìn)行排序。

預(yù)覽模式

當(dāng)您在資源管理器中單擊文件時(shí)，將顯示為預(yù)覽模式，并重用現(xiàn)有的選項(xiàng)卡。如果您正在快速瀏覽文件，并且不希望每個(gè)訪問(wèn)的文件都新建一個(gè)的選項(xiàng)卡，則這個(gè)功能會(huì)非常有用。當(dāng)您開(kāi)始編輯文件或在從資源管理器中雙擊打開(kāi)文件時(shí)，就會(huì)關(guān)于為該文件創(chuàng)建一個(gè)新的選項(xiàng)卡。

預(yù)覽模式在選項(xiàng)卡標(biāo)題中用斜體進(jìn)行表示：

并排編輯

您可以在垂直和水平方向上并排打開(kāi)任意多個(gè)編輯器。如果已經(jīng)有一個(gè)編輯器打開(kāi)，則有多種方法打開(kāi)另一個(gè)編輯器到現(xiàn)有的編輯器的一側(cè)：

• 使用 ?\ 快捷鍵將當(dāng)前的編輯器分成兩部分；
• 單擊編輯器右上角的“拆分編輯器”圖標(biāo)；
• 將資源管理內(nèi)文件或選項(xiàng)卡的項(xiàng)目拖放到編輯器區(qū)域的任意一側(cè)。

每當(dāng)打開(kāi)一個(gè)文件時(shí)，處于活動(dòng)狀態(tài)的編輯器將顯示該文件的內(nèi)容。因此，如果您有兩個(gè)并排的編輯器，并且希望將文件“foo.js”打開(kāi)到右側(cè)的編輯器中，請(qǐng)?jiān)诖蜷_(kāi)文件“foo.js”之前確保編輯器處于活動(dòng)狀態(tài)（光標(biāo)在該編輯器中）。

如果你有多個(gè)編輯器打開(kāi)時(shí)，您可以按住 ? 鍵并按 1、2 或 3 在它們之間快速切換。

您可以調(diào)整編輯器的窗口大小并對(duì)其重新排序：拖動(dòng)編輯器左側(cè)邊欄以調(diào)整編輯器的窗口大小，拖放編輯器標(biāo)題區(qū)域以重新定位。

編輯器組

拆分編輯器時(shí)，將創(chuàng)建一個(gè)新的編輯器區(qū)域，該區(qū)域可以自己管理一組選項(xiàng)卡?？梢栽诖怪被蛩椒较蛏喜⑴糯蜷_(kāi)任意多個(gè)編輯器區(qū)域。

您可以在資源管理器視圖頂部的“打開(kāi)編輯器”部分中看到這些內(nèi)容：

您在編輯器組之間移動(dòng)各個(gè)選項(xiàng)卡，或快速關(guān)閉整個(gè)編輯器組（使用編輯器右上角的 ... 更多操作按鈕）。

編輯器網(wǎng)格布局

默認(rèn)情況下，編輯器組是垂直并列布局的（例如，拆分編輯器將在其另一側(cè)打開(kāi)）。您可以輕松地對(duì)編輯器組進(jìn)行任意布局，包括垂直和水平布局。您可以通過(guò)鼠標(biāo)拖放快速將編輯器拆分到任意方向：

縮略圖

縮略圖為您提供了源代碼的抽象概述，這對(duì)于快速導(dǎo)航非常有用。文件的縮略圖顯示在編輯器的右側(cè)?？梢詥螕艋蛲蟿?dòng)著色區(qū)域以快速跳轉(zhuǎn)到文件的不同部分。

您可以在設(shè)置中禁用縮略圖(minimap)。

命令面板

通過(guò) ??P 打開(kāi)命令面板。您在這里訪問(wèn)工作臺(tái)的所有功能，列表的右側(cè)還顯示了常見(jiàn)操作的鍵盤(pán)快捷鍵。

命令面板提供了對(duì)許多命令以供執(zhí)行。您可以使用該交互窗口執(zhí)行編輯器命令、打開(kāi)文件、搜索符號(hào)和查看文件的大綱。以下是使用快捷鍵喚起命令面板的一些示例：

• ?P：通過(guò)輸入任意文件或符號(hào)的名稱來(lái)導(dǎo)航到該文件或符號(hào)；
• ??P：將直接轉(zhuǎn)到編輯器命令；
• ??O：將允許您導(dǎo)航到文件中的特定符號(hào)；
• ?G：將允許您導(dǎo)航到文件中的特定行。