自訂版面配置

Visual Studio Code 具備簡潔的使用者介面和方便的預設版面配置。同時，VS Code 也提供選項和設定，讓您自訂 UI 版面配置，以符合您的偏好和工作風格。在本主題中，我們將重點介紹各種 UI 自訂功能，讓您可以依照對您最有生產力的方式顯示檢視、編輯器和面板。

本文首先討論工作台自訂功能，以重新排列 UI 元素，例如側邊欄、檢視和面板。本文稍後將介紹編輯器區域的自訂功能，包括編輯器群組、分割編輯器和編輯器索引標籤。

注意

如果您是 VS Code 新手，不妨先從使用者介面概觀開始，或參考提示與技巧文章。

工作台

預設情況下，主要側邊欄位於工作台的左側，並顯示檢視，例如 [檔案總管]、[搜尋] 和 [原始碼控制] 檢視。您可以選取活動列中的圖示，快速切換檢視。

Explorer view opened in the Primary Side Bar, located on the left of the screen.

若要變更主要側邊欄的位置，您可以

以滑鼠右鍵按一下活動列，然後選取 [將主要側邊欄移至右側]
執行 [檢視: 切換主要側邊欄位置]，以在主要側邊欄的左右兩側之間切換
使用 [檢視] > [外觀] > [將主要側邊欄移至右側] 功能表項目
在設定編輯器中，將 [工作台] > [側邊欄: 位置] (workbench.sideBar.location) 設定設為 right

預設情況下，VS Code 會在位於編輯器區域左側的主要側邊欄中顯示檢視。同時檢視兩個檢視可能會很有用。若要執行此操作，您可以使用次要側邊欄來顯示與主要側邊欄相對的檢視。次要側邊欄一律與主要側邊欄相對定位，無論您是否已切換主要側邊欄的位置。

下圖顯示主要側邊欄中的 [檔案總管] 檢視，以及次要側邊欄中的 [Copilot 聊天] 檢視

Explorer view in the Primary Side Bar and Copilot Chat view in the Secondary Side Bar.

若要顯示次要側邊欄，您可以使用 VS Code 標題列中的版面配置控制項。如果版面配置控制項不可見，請以滑鼠右鍵按一下 VS Code 標題列，然後選取 [版面配置控制項]。

Title bar buttons to toggle main UI elements, with hover on Toggle Secondary Side Bar.

或者，您也可以依下列方式開啟次要側邊欄

執行 [檢視: 切換次要側邊欄可見性] 命令 (或按下 ⌥⌘B (Windows、Linux Ctrl+Alt+B))
使用 [檢視] > [外觀] > [次要側邊欄] 功能表項目

您隨時可以將檢視和面板拖放到主要或次要側邊欄中。VS Code 會記住您各個工作階段中檢視和面板的版面配置。

Drag and drop views and panels between the Primary and Secondary Side Bar

注意

您可以使用 [檢視: 重設檢視位置] 命令，將檢視和面板重設回其預設位置。

命令面板位置

您可以使用滑鼠游標抓取頂端邊緣並拖曳到其他位置，將命令面板移至另一個位置。您也可以選取標題列中的 [自訂版面配置] 控制項，然後選取其中一個預先設定的 [快速輸入位置]。

Screenshot that shows the Command Palette in a different location, highlighting the Customize Layout control in the title bar and the preconfigured position options.

活動列位置

預設情況下，活動列會隨著主要側邊欄移動，並保持在工作台的外緣。您也可以選擇隱藏活動列，或將其移至主要側邊欄的頂端或底部。

[活動列位置] 功能表可從活動列操作功能表取得，或在 [檢視] > [外觀] > [活動列位置] 下，具有 [預設]、[頂端]、[底部] 或 [隱藏] 選項。

當活動列位於頂端或底部位置時，通常位於活動列底部的 [帳戶] 和 [管理] 按鈕會移至標題列的右側。

Activity Bar in top position with Account and Manage buttons on the right of the title bar

面板

[面板] 區域會顯示 UI 元素，例如 [問題]、[終端機] 和 [輸出] 面板，且預設位於編輯器區域下方。

面板位置

您可以將區域移至編輯器的左側、右側、底部或頂端。您可以在 [檢視] > [外觀] > [面板位置] 下的功能表中，或透過 [面板] 標題列操作功能表設定這些選項。

您也可以使用 [命令面板] 中的 [移動面板] 命令

[檢視: 將面板移至左側] (workbench.action.positionPanelLeft)
[檢視: 將面板移至右側] (workbench.action.positionPanelRight)
[檢視: 將面板移至底部] (workbench.action.positionPanelBottom)
[檢視: 將面板移至頂端] (workbench.action.positionPanelTop)

面板對齊

此選項可讓您設定底部面板在視窗中橫跨的距離。有四個選項

置中 - 這是預設行為。面板只會橫跨編輯器區域的寬度。
左右對齊 - 面板會橫跨視窗的完整寬度。
靠左對齊 - 面板會從視窗的左邊緣橫跨到編輯器區域的右邊緣。
靠右對齊 - 面板會從視窗的右邊緣橫跨到編輯器區域的左邊緣。

使用所有面板對齊選項時，活動列都會被視為視窗的邊緣。

您可以在 [檢視] > [外觀] > [對齊面板] 下的功能表中、[面板] 標題操作功能表中，或使用新的 [將面板對齊設定為...] 命令設定這些選項。

最大化面板大小

當面板對齊方式為 [置中] 時，您可以使用 [面板] 區域右上角的 [最大化面板大小] Chevron 按鈕，快速切換 [面板] 區域以填滿整個編輯器區域。Chevron 按鈕在最大化的面板中會指向下方，以將面板還原為原始大小。

Maximize Panel Size button in the upper right of the Panel region

您也可以透過 [檢視: 切換最大化面板] 命令最大化 [面板] 區域。

注意: 除了自訂整體 [面板] 區域顯示之外，個別面板也可能具有自己的版面配置自訂功能。例如，[終端機] 可讓您擁有多個開啟的索引標籤和分割現有的終端機。

自訂版面配置控制項

VS Code 標題列也有按鈕可切換主要 UI 元素 (側邊欄和面板區域) 的可見性。

Title bar buttons to toggle main UI elements, with hover on Toggle Panel

最右邊的按鈕會顯示 [自訂版面配置] 下拉式清單，您可以在其中進一步變更各種 UI 元素的可見性和版面配置，並包含數個版面配置模式

Customize Layout dropdown shown via the Customize Layout button in the title bar

版面配置模式如下

全螢幕 - 將編輯器設定為填滿整個顯示螢幕。[檢視: 切換全螢幕] (⌃⌘F (Windows、Linux F11))。
Zen 模式 - 隱藏除了編輯器區域之外的所有 UI。[檢視: 切換 Zen 模式] (⌘K Z (Windows、Linux Ctrl+K Z))。
置中版面配置 - 將編輯器置中於編輯器區域內。[檢視: 切換置中版面配置]。

拖放檢視和面板

VS Code 在主要側邊欄和面板區域中具有檢視和面板的預設版面配置，但您可以在這些區域之間拖放檢視和面板。例如，您可以將 [原始碼控制] 檢視拖放到 [面板] 區域中，或將 [問題] 面板放入主要側邊欄中

The Source Control view in the Panel region and Problem panel in the Primary Side bar

注意: 請記住，您可以使用 [重設位置] 操作功能表項目將檢視和面板重設回其預設位置，或使用一般 [檢視: 重設檢視位置] 命令重設所有檢視和面板。

您也可以將檢視和面板新增至現有的檢視或面板，以建立群組。例如，您可以將 [輸出] 面板移至 [檔案總管] 檢視群組，方法是拖曳到 [檔案總管] 活動列項目上方，然後放到檢視中

Output panel moved to the Explorer view group

移動檢視和面板不限於使用滑鼠。您也可以透過鍵盤自訂版面配置，方法是使用 [檢視: 移動檢視] 和 [檢視: 移動焦點檢視] 命令，其中的下拉式清單可讓您選取要移動的 UI 元素和目的地，無論是側邊欄或面板區域等位置，還是要建立群組的現有檢視或面板。

工具列

大多數 VS Code 檢視和面板的 UI 頂端右側都顯示工具列。例如，[搜尋] 檢視具有工具列，其中包含 [重新整理]、[清除搜尋結果] 等動作。

隱藏工具列中的項目

如果您認為工具列太過擁擠，而且想要隱藏較不常用的動作，您可以以滑鼠右鍵按一下任何動作，然後選取其 [隱藏] 命令 (例如 [隱藏 '清除搜尋結果'])，或取消選取下拉式清單中的任何動作。隱藏的動作會移至 ... [更多動作] 功能表，並可從該處叫用。

若要將動作還原到工具列，請以滑鼠右鍵按一下工具列按鈕區域，然後選取 [重設功能表] 命令，或重新選取隱藏的動作。若要還原 VS Code 中的所有功能表，請從 [命令面板] (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 執行 [檢視: 重設所有功能表]。

編輯器

您可以獨立於工作台使用者介面之外，自訂 VS Code 編輯器區域的版面配置。預設情況下，編輯器區域會顯示實用功能，例如迷你地圖、麵包屑、編輯器索引標籤，並具有選擇性 UI，例如 [固定捲動]。您也可以調整編輯器本身的版面配置，或將其移至浮動視窗。

迷你地圖和麵包屑

[檢視] > [外觀] 功能表具有自訂編輯器區域的區段。您會在其中找到下列切換開關

迷你地圖 - 目前檔案的視覺概觀。[檢視: 切換迷你地圖]。
麵包屑 - 顯示使用中檔案的資料夾、檔案和目前符號資訊。[檢視: 切換麵包屑]。
固定捲動 - 顯示使用中檔案中的巢狀符號範圍。[檢視: 切換固定捲動]。

編輯器群組

預設情況下，每個開啟的編輯器都會進入相同的編輯器群組，並在右側新增一個編輯器索引標籤。您可以建立新的編輯器群組，以便將類似或相關的檔案分組，或允許並排編輯同一個檔案。建立新的編輯器群組，方法是將編輯器拖曳到側邊，或使用操作功能表中的其中一個 [分割] 命令，將目前的編輯器複製到左側、右側、上方或下方的新編輯器群組。

Split editor commands in the editor tab context menu

[分割] 編輯器命令也可從 [檢視] > [編輯器版面配置] 功能表和透過 [命令面板] 取得。

如果您想要在垂直和水平編輯器群組版面配置之間快速切換，可以使用 [切換垂直/水平編輯器版面配置] 命令 (⌥⌘0 (Windows、Linux Shift+Alt+0))。

在群組中分割

您也可以使用 [檢視: 在群組中分割編輯器] 命令 (⌘K ⇧⌘\ (Windows、Linux Ctrl+K Ctrl+Shift+\))，在同一個群組中分割編輯器以進行並排編輯。

使用 [在群組中分割] 功能時，有特定的命令可用於切換此模式，以及在兩個分割編輯器之間導覽

[檢視: 在群組中分割編輯器] - 分割目前的編輯器。
[檢視: 切換在群組中分割編輯器] - 切換使用中編輯器的分割模式。
[檢視: 加入群組中的編輯器] - 返回使用中檔案的單一編輯器。
[檢視: 切換在群組中分割編輯器的版面配置] - 切換水平和垂直版面配置。

若要在側邊之間導覽

[檢視: 將焦點放在使用中編輯器中的第一個側邊] - 將焦點移至分割編輯器的第一個 (左側或頂端) 側邊。
[檢視: 將焦點放在使用中編輯器中的第二個側邊] - 將焦點移至第二個 (右側或底部) 側邊。
[檢視: 將焦點放在使用中編輯器中的另一個側邊] - 在分割編輯器側邊之間切換。

[工作台] > [編輯器: 在群組中分割版面配置] (workbench.editor.splitInGroupLayout) 設定可讓您將慣用的分割編輯器版面配置設定為水平 (預設) 或垂直。

格線版面配置

如果您想要更精細地控制編輯器群組版面配置，可以使用格線版面配置，您可以在其中顯示編輯器群組的多個列和欄。[檢視] > [編輯器版面配置] 功能表列出各種編輯器版面配置選項 (例如，[兩欄]、[三欄]、[格線 (2x2)])，而且您可以透過抓取並移動它們之間的窗格調整群組大小。

Editor Grid 2x2 layout with the sash highlighted

浮動編輯器視窗

您可以在浮動視窗中開啟編輯器，例如將編輯器移至監視器上的另一個位置，甚至是另一個監視器。

若要在浮動視窗中開啟編輯器，請將其拖曳出主視窗，然後放到目前 VS Code 視窗外部的任何位置

浮動編輯器視窗能夠在格線版面配置中開啟任意數量的編輯器。視窗會在重新啟動後還原到其位置，並重新開啟其中的所有編輯器。

分離編輯器的另一種方式是以滑鼠右鍵按一下編輯器索引標籤，然後選取 [移至新視窗] (workbench.action.moveEditorToNewWindow) 或 [複製到新視窗] (⌘K O (Windows、Linux Ctrl+K O)) 選項。

Floating windows from editor tab menu

如果您想要移動整個編輯器群組，請選取 [將編輯器群組移至新視窗] () 或 [將編輯器群組複製到新視窗] ()。

釘選索引標籤

如果您希望編輯器索引標籤一律可見，可以將其釘選到編輯器索引標籤列。您可以從操作功能表或使用 [檢視: 釘選編輯器] 命令 (⌘K ⇧Enter (Windows、Linux Ctrl+K Shift+Enter)) 釘選編輯器索引標籤。

Pinned editor tab with pin button highlighted

釘選索引標籤有助於存取對您而言重要的檔案，因為

釘選索引標籤一律會顯示在非釘選索引標籤之前。
如果您開啟許多索引標籤，它們不會捲動出檢視範圍。
使用編輯器索引標籤命令 (例如 [關閉其他] 或 [全部關閉]) 時，它們不會關閉。
即使您超過設定的已開啟編輯器限制，它們也不會關閉。

若要取消釘選編輯器，請按一下釘選圖示、使用 [取消釘選] 編輯器索引標籤操作功能表項目，或 [檢視: 取消釘選編輯器] 命令。

您可以使用 [工作台] > [編輯器: 釘選索引標籤大小調整] (workbench.editor.pinnedTabSizing) 設定，選擇要如何顯示釘選的編輯器。選項如下

normal: 釘選索引標籤會繼承其他索引標籤的外觀 (預設)
shrink: 釘選索引標籤會縮小為固定大小，顯示編輯器標籤的部分內容。
compact: 釘選索引標籤只會顯示為圖示或編輯器標籤的第一個字母。

您也可以透過設定 [工作台] > [編輯器: 將釘選索引標籤放在不同的列]，在一般編輯器索引標籤列上方的不同列中顯示釘選的編輯器索引標籤。您可以透過在兩列之間拖放其索引標籤來釘選和取消釘選編輯器。

鎖定編輯器群組

使用多個編輯器時，通常會有一或多個您想要始終保持可見的編輯器。[鎖定編輯器群組] 功能 (其中整個編輯器群組會鎖定且可見) 提供穩定的顯示，而且任何開啟新編輯器的要求都會在另一個群組中建立它。您可以透過編輯器群組工具列中的鎖定圖示判斷編輯器群組是否已鎖定。

Locked editor group with lock icon highlighted

您可以從編輯器工具列 [更多動作] ... 下拉式清單中選取 [鎖定群組]，或執行 [檢視: 鎖定編輯器群組] 命令，以鎖定編輯器群組。

Lock Group command in the editor tool bar More Actions dropdown

您可以按一下鎖定圖示或執行 [檢視: 解鎖編輯器群組] 命令，以解鎖編輯器群組。

鎖定群組的行為與未鎖定群組不同

新編輯器不會在鎖定群組中開啟，除非明確移至該處 (例如，透過拖放)。
如果新編輯器略過鎖定群組，則會在最近使用的未鎖定群組中開啟，或在鎖定群組的側邊建立新群組。
編輯器群組的鎖定狀態會持續存在，並在重新啟動後還原。
您也可以鎖定空的群組，以允許更穩定的編輯器版面配置。

主要的使用案例是編輯器區域中的終端機。例如，您可能會想要在左側編輯文字，並在右側放置一個始終可見的終端機。建立終端機編輯器並將其移至側邊時，它會自動鎖定。這表示即使焦點位於右側的終端機上，開啟檔案也會在左側開啟，而不需要先手動變更焦點。

自動鎖定群組可以使用 workbench.editor.autoLockGroups 設定進行設定，預設值為僅限終端機編輯器，但可以新增任何編輯器類型以取得相同的行為。

Auto Lock Groups setting with Terminal checked in the Settings editor

與編輯器群組鎖定相關的命令

[檢視: 鎖定編輯器群組] - 鎖定使用中的編輯器群組。
[檢視: 解鎖編輯器群組] - 解鎖使用中的鎖定編輯器群組。
[檢視: 切換編輯器群組鎖定] - 鎖定或解鎖使用中的編輯器群組。

您必須有多個編輯器群組，這些命令才能使用。

後續步驟

繼續閱讀以深入瞭解

Visual Studio Code 使用者介面 - VS Code 快速導覽。
基本編輯 - 瞭解功能強大的 VS Code 編輯器。
程式碼導覽 - 在您的原始碼中快速移動。

03/05/2025