自訂版面配置
Visual Studio Code 具有簡單的使用者介面與方便的預設版面配置。同時，VS Code 也提供各種選項與設定，讓您可以自訂 UI 版面配置以符合您的喜好和工作風格。在本主題中，我們將重點介紹各種 UI 自訂功能，讓您能以最有效率的方式顯示檢視、編輯器和面板。
本文首先討論 Workbench (工作檯) 的自訂功能，以重新排列側邊欄、檢視和面板等 UI 元素。稍後在本文中，我們將介紹如何使用編輯器群組、分割編輯器和編輯器標籤來自訂 Editor (編輯器) 區域。
工作台 (Workbench)
主要側邊欄
依預設，主要側邊欄位於工作檯的左側，並顯示如「總管」、「搜尋」和「原始檔控制」等檢視。您可以透過選取活動列中的圖示來快速切換檢視。
若要變更主要側邊欄的位置，您可以：
- 在活動列上按一下滑鼠右鍵，並選取將主要側邊欄移至右側
- 執行檢視：切換主要側邊欄位置以在右側和左側之間切換主要側邊欄
- 使用檢視 > 外觀 > 將主要側邊欄移至右側功能表項目
- 在設定編輯器中，將 Workbench > Side Bar: Location ( workbench.sideBar.location ) 設定設為
right
次要側邊欄
依預設，VS Code 會在位於編輯器區域左側的主要側邊欄中顯示檢視。同時開啟兩個檢視會非常有用。若要這麼做，您可以使用次要側邊欄在主要側邊欄的對側顯示檢視。無論您是否切換過主要側邊欄的位置，次要側邊欄一律會位於主要側邊欄的對側。
當您第一次開啟資料夾或多根目錄工作區時，次要側邊欄預設會顯示。在空白視窗中，它預設為隱藏。您可以使用 workbench.secondarySideBar.defaultVisibility 設定來設定此行為。
下圖顯示主要側邊欄中的「總管」檢視以及次要側邊欄中的 Copilot Chat 檢視
如果次要側邊欄被隱藏，您可以使用 VS Code 標題列中的版面配置控制項來顯示它。如果看不到版面配置控制項，請在 VS Code 標題列上按一下滑鼠右鍵，然後選取版面配置控制項。
或者，您也可以透過下列方式開啟次要側邊欄：
- 執行檢視：切換次要側邊欄能見度命令 (或按下 ⌥⌘B (Windows、Linux Ctrl+Alt+B))
- 使用檢視 > 外觀 > 次要側邊欄功能表項目
您隨時可以將檢視和面板拖放至主要或次要側邊欄中。VS Code 會記住跨工作階段的檢視和面板版面配置。
您可以使用檢視：重設檢視位置命令將檢視和面板重設回其預設位置。
命令選擇區位置
您可以用滑鼠游標抓住命令面板的上邊緣並將其拖曳到其他位置。您也可以選取標題列中的 自訂版面配置 控制項，然後選取其中一個預先設定的 快速輸入位置。
活動列位置
依預設，活動列會隨主要側邊欄移動，並保留在工作檯的外側邊緣。您也可以選擇隱藏活動列，或將其移至主要側邊欄的頂端或底部。
活動列位置功能表可從活動列操作功能表取得，或在檢視 > 外觀 > 活動列位置下提供預設、頂端、底部或隱藏等選項。
當活動列位於頂端或底部位置時，通常位於活動列底部的帳戶和管理按鈕會移至標題列的右側。
活動列大小
活動列支援兩種大小：較大的預設大小，以及符合傳統活動列外觀的精簡大小。若要切換至精簡模式，請將 workbench.activityBar.compact 設定設為 true。
您也可以在活動列上按一下滑鼠右鍵，並從活動列大小子功能表中選取預設或精簡，藉此在不同大小之間切換。
活動列大小子功能表僅會在活動列處於其預設 (側邊) 位置時出現。如果活動列已移至頂端或底部，則無法使用大小選項。
自訂版面配置控制項
VS Code 標題列也提供按鈕來切換主要 UI 元素 (側邊欄和面板區域) 的能見度。
最右側的按鈕會叫出自訂版面配置下拉式功能表，您可以在其中進一步變更各種 UI 元素的能見度和版面配置，並包含多種版面配置模式：
版面配置模式包括：
- 全螢幕 - 將編輯器設定為填滿整個顯示螢幕。檢視：切換全螢幕 (⌃⌘F (Windows、Linux F11))。
- 禪模式 - 隱藏除編輯器區域之外的所有 UI。檢視：切換禪模式 (⌘K Z (Windows、Linux Ctrl+K Z))。
- 置中版面配置 - 將編輯器置於編輯器區域內的正中央。檢視：切換置中版面配置。
視窗與功能表樣式
您可以使用下列設定來自訂 VS Code 視窗和功能表列的外觀：
-
window.titleBarStyle ：調整 VS Code 視窗標題列的外觀，使其由作業系統原生提供或自訂。變更需要完全重新啟動才能生效。
-
window.title ：根據目前內容 (例如開啟的工作區或使用中編輯器) 設定 VS Code 視窗標題。變數會根據內容進行替代。例如，
${activeEditorShort}會顯示目前使用中編輯器的檔案名稱。您可以結合多個變數，例如${dirty}${activeEditorShort}${separator}${rootName}${separator}${profileName}${separator}${appName}。 -
window.titleSeparator ：用於 window.title 設定中的分隔字元。
-
window.menuStyle ：調整功能表樣式，使其由作業系統原生提供、自訂，或繼承自標題列樣式 (定義於 window.titleBarStyle 中)。這也會影響操作功能表的外觀。變更需要完全重新啟動才能生效。
-
window.menuBarVisibility ：設定功能表列的能見度。
classic：功能表列顯示在視窗頂端，僅在視窗處於全螢幕模式時隱藏。visible：功能表列永遠可見，即使視窗處於全螢幕模式時亦然。toggle：功能表列為隱藏狀態，按一下 Alt 鍵即可使其顯示。compact：功能表已移至側邊欄中。hidden：功能表列永遠隱藏。
面板
「面板」區域會顯示如「問題」、「終端機」和「輸出」等面板的 UI 元素，依預設位於編輯器區域下方。
面板位置
您可以將此區域移至編輯器的左側、右側、底部或頂端。您可以在檢視 > 外觀 > 面板位置底下的功能表中設定這些選項，或透過面板標題列操作功能表進行設定。
您也可以使用命令選擇區中的移動面板命令：
- 檢視：將面板移至左側 (
workbench.action.positionPanelLeft) - 檢視：將面板移至右側 (
workbench.action.positionPanelRight) - 檢視：將面板移至底部 (
workbench.action.positionPanelBottom) - 檢視：將面板移至頂端 (
workbench.action.positionPanelTop)
面板對齊方式
此選項讓您設定底部面板跨越視窗的程度。共有四個選項：
- 置中 - 這是預設行為。面板僅跨越編輯器區域的寬度。
- 左右對齊 - 面板跨越視窗的完整寬度。
- 靠左 - 面板從視窗左側邊緣跨越至編輯器區域右側邊緣。
- 靠右 - 面板從視窗右側邊緣跨越至編輯器區域左側邊緣。
在所有面板對齊選項中，活動列皆被視為視窗的邊緣。
您可以在檢視 > 外觀 > 對齊面板底下的功能表、面板標題操作功能表中設定這些選項，或使用新的將面板對齊方式設為...命令。
最大化面板大小
當面板對齊方式為置中時，您可以使用面板區域右上角的最大化面板大小向下鍵按鈕，快速切換面板區域以填滿整個編輯器區域。在最大化面板中，向下鍵按鈕會朝下，以將面板還原至原始大小。
您也可以透過檢視：切換最大化面板命令來最大化面板區域。
拖放檢視與面板
VS Code 在主要側邊欄和面板區域中具有檢視和面板的預設版面配置，但您可以跨這些區域拖放檢視和面板。例如，您可以將「原始檔控制」檢視拖放到面板區域中，或將「問題」面板放到主要側邊欄中
請記住，您可以使用重設位置操作功能表項目將個別檢視和面板重設回其預設位置，或使用一般檢視：重設檢視位置命令重設所有檢視和面板。
您也可以將檢視和面板新增至現有的檢視或面板來建立群組。例如，您可以將「輸出」面板拖曳到「總管」活動列項目上方，然後放到該檢視中，藉此將其移至「總管」檢視群組
您不限於使用滑鼠來移動檢視和面板。您也可以透過鍵盤使用檢視：移動檢視和檢視：移動焦點檢視命令來自訂版面配置，其中的下拉式功能表可讓您挑選要移動的 UI 元素以及目的地 (例如側邊欄或面板區域等位置，或是現有的檢視或面板以建立群組)。
通知
依預設，Visual Studio Code 會在工作檯右下角顯示通知快顯與通知中心。您可以使用 workbench.notifications.position 設定 (實驗性功能) 來變更通知的位置。
可用的位置包括：
bottom-right(預設) - 通知會出現在右下角。鈴鐺圖示位於狀態列中。bottom-left- 通知會出現在左下角。鈴鐺圖示會移至狀態列的左側。top-right- 通知會從右上角滑入，類似作業系統層級的通知。鈴鐺圖示會從狀態列移至標題列。
您也可以直接從通知中心變更通知位置。選取鈴鐺圖示以開啟通知中心，然後選取標頭工具列中的位置圖示以選擇不同的位置。
當通知位置設定為 top-right 時，請使用 workbench.notifications.showInTitleBar 設定來控制鈴鐺圖示是否在標題列中顯示。
工具列
大多數的 VS Code 檢視和面板都在其 UI 的右上角顯示工具列。例如，「搜尋」檢視具有包含重新整理、清除搜尋結果等動作的工具列。
隱藏工具列中的項目
如果您認為工具列過於擁擠並想要隱藏較少使用的動作，您可以對任何動作按一下滑鼠右鍵並選取其隱藏命令 (例如隱藏「清除搜尋結果」)，或取消勾選下拉式功能表中的任何動作。隱藏的動作會移至 ... 更多動作功能表中，並可從該處叫用。
若要將動作還原至工具列，請在工具列按鈕區域按一下滑鼠右鍵，然後選取重設功能表命令或重新勾選隱藏的動作。若要還原 VS Code 中的所有功能表，請從命令選擇區執行檢視：重設所有功能表 (⇧⌘P (Windows、Linux Ctrl+Shift+P))。
編輯器
您可以獨立於工作檯使用者介面之外，自訂 VS Code 編輯器區域的版面配置。依預設，編輯器區域會顯示如迷你地圖、導覽路徑、編輯器標籤等實用功能，並具有如黏性捲動等選用 UI。您也可以調整編輯器本身的版面配置，或將其移至浮動視窗中。
迷你地圖與導覽路徑
檢視 > 外觀功能表有一個用於自訂編輯器區域的區段。您可以在其中找到下列項目的切換開關：
- 迷你地圖 - 目前檔案的視覺化概觀。檢視：切換迷你地圖。
- 導覽路徑 - 顯示使用中檔案的資料夾、檔案和目前符號資訊。檢視：切換導覽路徑。
- 黏性捲動 - 在使用中檔案中顯示巢狀符號範圍。檢視：切換黏性捲動。
編輯器群組
依預設，每個開啟的編輯器都會進入相同的編輯器群組，並在右側新增一個新的編輯器標籤。您可以建立新的編輯器群組，以便將相似或相關的檔案分組，或是允許對同一檔案進行並排編輯。
將編輯器拖曳到側邊以建立新的編輯器群組，或使用編輯器標籤操作功能表中的其中一個分割命令，將目前的編輯器複製到左側、右側、上方或下方的新編輯器群組中。
分割編輯器命令也可從檢視 > 編輯器版面配置功能表以及命令選擇區中使用。
如果您想要在垂直和水平編輯器群組版面配置之間快速切換，可以使用切換垂直/水平編輯器版面配置命令 (⌥⌘0 (Windows、Linux Shift+Alt+0))。
最大化與展開編輯器群組
當您使用多個編輯器群組時，您可以暫時給予使用中群組更多空間。按兩下編輯器標籤即可切換其編輯器群組的大小，或使用檢視：切換最大化編輯器群組命令 (⌘K ⌘M (Windows、Linux Ctrl+K Ctrl+M))。
Workbench > Editor: Double Click Tab To Toggle Editor Group Sizes ( workbench.editor.doubleClickTabToToggleEditorGroupSizes ) 設定控制當您按兩下標籤時如何調整編輯器群組的大小：
-
expand：編輯器群組會盡可能佔用最多空間，方法是讓所有其他編輯器群組變得盡可能小。這是預設值。 -
maximize：所有其他編輯器群組都會隱藏，且目前的編輯器群組會最大化以填滿整個編輯器區域。 -
off：按兩下標籤時不會調整任何編輯器群組的大小。
此設定僅在 workbench.editor.showTabs 設定為 multiple 時適用。
群組內分割
您也可以使用檢視：在群組中分割編輯器命令 (⌘K ⇧⌘\ (Windows、Linux Ctrl+K Ctrl+Shift+\)) 在同一個群組中分割編輯器以進行並排編輯。
使用群組內分割功能時，有特定的命令可用於切換此模式以及在兩個分割編輯器之間導覽：
- 檢視：在群組中分割編輯器 - 分割目前的編輯器。
- 檢視：切換群組內分割編輯器 - 在使用中編輯器的分割模式之間切換。
- 檢視：在群組中合併編輯器 - 回到使用中檔案的單一編輯器。
- 檢視：切換群組內分割編輯器的版面配置 - 在水平和垂直版面配置之間切換。
若要在各側之間導覽：
- 檢視：將焦點移至使用中編輯器的第一側 - 將焦點移至分割編輯器的第一側 (左側或上方)。
- 檢視：將焦點移至使用中編輯器的第二側 - 將焦點移至第二側 (右側或下方)。
- 檢視：將焦點移至使用中編輯器的其他側 - 在分割編輯器的各側之間切換。
Workbench > Editor: Split in Group Layout ( workbench.editor.splitInGroupLayout ) 設定可讓您將偏好的分割編輯器版面配置設定為水平 (預設) 或垂直。
格線版面配置
如果您想要更充分掌控編輯器群組版面配置，可以使用格線版面配置，在其中您可以顯示多列與多欄的編輯器群組。檢視 > 編輯器版面配置功能表列出了各種編輯器版面配置選項 (例如兩欄、三欄、格線 (2x2))，您可以透過抓取並移動它們之間的分割條來調整群組大小。
浮動視窗
您可以在浮動視窗中開啟編輯器、終端機或特定檢視。這在多螢幕設定中非常有用，您可以將編輯器移至另一個螢幕，甚至移至同一螢幕上的不同位置。
若要在浮動視窗中開啟編輯器，請將其從主視窗中拖出，並放在目前 VS Code 視窗外側的任何位置。
浮動視窗能夠以格線版面配置開啟您想要的任意數量編輯器。重新啟動後，視窗將在其原本的位置還原，並重新開啟內含的所有編輯器。
分離編輯器的另一種方法是在編輯器標籤上按一下滑鼠右鍵，並選取移至新視窗 (workbench.action.moveEditorToNewWindow) 或複製到新視窗 (⌘K O (Windows、Linux Ctrl+K O))。
若要移動整個編輯器群組，請使用將編輯器群組移至新視窗 () 或將編輯器群組複製到新視窗 () 命令。
精簡模式
若要從浮動視窗中移除不必要的 UI 元素並為內容騰出更多空間，請選取浮動視窗標題列中的設定精簡模式選項。再次選取它即可將浮動視窗還原至原始模式。
釘選在最上層
您可以在浮動視窗標題列中選取設定永遠在最上層選項，將浮動視窗釘選在螢幕的最上層。當您在主要的 VS Code 視窗中工作時，這對於保持終端機或預覽視窗隨時可見非常有用。再次選取即可取消釘選浮動視窗。
已釘選的標籤
如果您希望某個編輯器標籤永遠可見，可以將其釘選到編輯器標籤列。您可以從操作功能表中釘選編輯器標籤，或使用檢視：釘選編輯器命令 (⌘K ⇧Enter (Windows、Linux Ctrl+K Shift+Enter))。
已釘選的標籤可協助存取對您重要的檔案，因為：
- 已釘選的標籤永遠會排在未釘選的標籤之前顯示。
- 即使您開啟了許多標籤，它們也不會捲動出檢視範圍外。
- 使用關閉其他或關閉全部等編輯器標籤命令時，它們不會被關閉。
- 即使超過設定的開啟編輯器上限，它們也不會被關閉。
按一下釘選圖示、使用取消釘選編輯器標籤操作功能表項目，或使用檢視：取消釘選編輯器命令，即可取消釘選編輯器。
您可以使用 Workbench > Editor: Pinned Tab Sizing ( workbench.editor.pinnedTabSizing ) 設定來選擇如何顯示已釘選的編輯器。選項包括：
normal：已釘選的標籤會繼承其他標籤的外觀 (預設)shrink：已釘選的標籤會縮小至固定大小，僅顯示編輯器標籤的一部分。compact：已釘選的標籤只會顯示為圖示或編輯器標籤的第一個字母。
您也可以透過設定 Workbench > Editor: Pinned Tabs On Separate Row，將已釘選的編輯器標籤顯示在一般編輯器標籤列上方的獨立列中。您可以透過在兩列之間拖放其標籤來釘選和取消釘選編輯器。
鎖定編輯器群組
當使用多個編輯器時，通常會有一或多個您希望永遠保持可見的編輯器。鎖定的編輯器群組功能 (其中整個編輯器群組會被鎖定並保持可見) 提供穩定的顯示，且任何開啟新編輯器的要求都會在其他群組中建立它。您可以透過編輯器群組工具列中的鎖定圖示來辨別編輯器群組是否已鎖定。
您可以從編輯器工具列的更多動作 ... 下拉式功能表中選取鎖定群組，或執行檢視：鎖定編輯器群組命令來鎖定編輯器群組。
您可以按一下鎖定圖示或執行檢視：解鎖編輯器群組命令來解鎖編輯器群組。
鎖定的群組與未鎖定的群組行為不同：
- 新的編輯器不會在鎖定的群組中開啟，除非明確移至該處 (例如透過拖放)。
- 如果新編輯器略過鎖定的群組，它將會在最近使用過的未鎖定群組中開啟，或在鎖定群組的側邊建立新群組。
- 編輯器群組的鎖定狀態會被持續保留並在重新啟動後還原。
- 您也可以鎖定空白群組，以實現更穩定的編輯器版面配置。
主要的使用案例如用於編輯器區域中的終端機。例如，您可能會希望在左側編輯文字，並在右側擁有一個永遠可見的終端機。當建立終端機編輯器並将其移至側邊時，它將會自動鎖定。這表示即使右側的終端機處於焦點狀態，開啟檔案時也會在左側開啟，而不需要先手動變更焦點。
可以使用 workbench.editor.autoLockGroups 設定來設定自動鎖定群組，該設定預設僅適用於終端機編輯器，但可以新增任何編輯器類型以獲得相同的行為。
與編輯器群組鎖定相關的命令：
- 檢視：鎖定編輯器群組 - 鎖定使用中的編輯器群組。
- 檢視：解鎖編輯器群組 - 解鎖使用中已鎖定的編輯器群組。
- 檢視：切換編輯器群組鎖定 - 鎖定或解鎖使用中的編輯器群組。
您必須擁有多於一個編輯器群組才能使用這些命令。
後續步驟
繼續閱讀以了解
- Visual Studio Code 使用者介面 - VS Code 的快速入門導覽。
- 基本編輯 - 了解功能強大的 VS Code 編輯器。
- 程式碼導覽 - 在原始碼中快速移動。