自訂版面配置

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

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

工作台 (Workbench)

主要側邊欄

依預設，主要側邊欄位於工作台的左側，並顯示諸如檔案總管、搜尋和原始碼控制等檢視。您可以透過活動列中的圖示快速切換檢視。

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

• 在活動列上按右鍵，並選取 將主要側邊欄移至右側
• 執行 檢視：切換主要側邊欄位置，以在主要側邊欄左右之間切換
• 使用 檢視 > 外觀 > 將主要側邊欄移至右側功能表項目
• 在設定編輯器中，將 工作台 > 側邊欄：位置 ( workbench.sideBar.location Open in VS Code Open in VS Code Insiders ) 設定為 right

次要側邊欄

依預設，VS Code 會在位於編輯器區域左側的主要側邊欄中顯示檢視。同時開啟兩個檢視可能會很有用。為此，您可以使用 次要側邊欄來顯示與主要側邊欄相對的檢視。無論您是否切換了主要側邊欄的位置，次要側邊欄始終位於主要側邊欄的對面。

當您首次開啟資料夾或多根工作區時，次要側邊欄會預設顯示。在空白視窗中，它會預設隱藏。您可以透過 workbench.secondarySideBar.defaultVisibility Open in VS Code Open in VS Code Insiders 設定來設定此行為。

下圖顯示主要側邊欄中的檔案總管檢視和次要側邊欄中的 Copilot Chat 檢視

如果次要側邊欄已隱藏，您可以使用 VS Code 標題列中的版面配置控制項來顯示它。如果版面配置控制項不可見，請在 VS Code 標題列上按右鍵並選取 版面配置控制項。

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

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

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

命令選擇區位置

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

活動列位置

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

活動列位置功能表可從活動列的內容功能表取得，或在 檢視 > 外觀 > 活動列位置下方，具有 預設、頂部、底部或隱藏等選項。

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

活動列大小

活動列支援兩種大小：較大的預設大小和符合經典活動列外觀的精簡大小。若要切換到精簡模式，請將 workbench.activityBar.compact Open in VS Code Open in VS Code Insiders 設定為 true。

您也可以在活動列上按右鍵，然後從 活動列大小子功能表中選取預設或精簡，以在不同大小之間切換。

自訂版面配置控制項

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

最右側的按鈕會彈出 自訂版面配置下拉式選單，您可以在其中進一步變更各種 UI 元素的可見性和版面配置，並包含多種版面配置模式

版面配置模式為

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

視窗和功能表樣式

您可以使用以下設定自訂 VS Code 視窗和功能表列的外觀

• window.titleBarStyle Open in VS Code Open in VS Code Insiders ：調整 VS Code 視窗標題列的外觀，使其由作業系統原生或自訂。變更需要完全重新啟動才能生效。

• window.title Open in VS Code Open in VS Code Insiders ：根據目前的內容 (例如已開啟的工作區或作用中編輯器) 設定 VS Code 視窗標題。變數會根據內容替換。例如，${activeEditorShort} 將顯示目前作用中編輯器的檔案名稱。您可以組合多個變數，例如，${dirty}${activeEditorShort}${separator}${rootName}${separator}${profileName}${separator}${appName}。

• window.titleSeparator Open in VS Code Open in VS Code Insiders ：用於 window.title Open in VS Code Open in VS Code Insiders 設定中的分隔字元。

• window.menuStyle Open in VS Code Open in VS Code Insiders ：調整功能表樣式，使其由作業系統原生、自訂，或繼承自標題列樣式 (定義於 window.titleBarStyle Open in VS Code Open in VS Code Insiders )。這也會影響內容功能表的外觀。變更需要完全重新啟動才能生效。

• window.menuBarVisibility Open in VS Code Open in VS Code Insiders ：設定功能表列的可見性。

  • 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 Open in VS Code Open in VS Code Insiders 設定 (實驗性) 來變更通知的位置。

可用的位置為

• bottom-right (預設) - 通知會出現在右下角。鈴鐺圖示位於狀態列中。
• bottom-left - 通知會出現在左下角。鈴鐺圖示會移動到狀態列的左側。
• top-right - 通知會從右上角滑入，類似於作業系統層級的通知。鈴鐺圖示會從狀態列移動到標題列。

您也可以直接從通知中心變更通知位置。透過選取鈴鐺圖示開啟通知中心，然後在標頭工具列中選取位置圖示以選擇不同的位置。

當通知位置設定為 top-right 時，請使用 workbench.notifications.showInTitleBar Open in VS Code Open in VS Code Insiders 設定來控制鈴鐺圖示是否在標題列中可見。

工具列

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

隱藏工具列中的項目

如果您覺得工具列太過雜亂，想隱藏不常用動作，您可以在任何動作上按右鍵並選取其隱藏命令 (例如隱藏「清除搜尋結果」)，或取消勾選下拉式選單中的任何動作。隱藏的動作會移至... 更多動作功能表，並可從那裡叫用。

若要將動作還原到工具列，請在工具列按鈕區域上按右鍵並選取重設功能表命令，或重新勾選隱藏的動作。若要還原 VS Code 中的所有功能表，請從命令選擇區執行檢視：重設所有功能表 (⇧⌘P (Windows、Linux Ctrl+Shift+P))。

編輯器

您可以獨立於工作台使用者介面，自訂 VS Code 編輯器區域的版面配置。依預設，編輯器區域會顯示實用功能，例如迷你地圖、導覽路徑、編輯器索引標籤，並具有可選的 UI，例如黏性捲動。您也可以調整編輯器本身的版面配置，或將它們移動到浮動視窗中。

迷你地圖和導覽路徑

檢視 > 外觀功能表中有一個用於自訂編輯器區域的區段。您會在那裡找到切換開關，用於

• 迷你地圖 - 您目前檔案的視覺概觀。檢視：切換迷你地圖。
• 導覽路徑 - 顯示作用中檔案的資料夾、檔案和目前符號資訊。檢視：切換導覽路徑。
• 黏性捲動 - 顯示作用中檔案中的巢狀符號範圍。檢視：切換黏性捲動。

編輯器群組

依預設，每個開啟的編輯器都會進入相同的 編輯器群組，並在右側新增一個編輯器索引標籤。您可以建立新的編輯器群組，以便將相似或相關檔案分組，或允許並排編輯相同檔案。

您可以透過將編輯器拖曳到旁邊，或使用編輯器索引標籤內容功能表中的分割命令之一，將目前的編輯器複製到左側、右側、上方或下方的新編輯器群組中，來建立新的編輯器群組。

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

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

在群組內分割

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

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

• 檢視：在群組內分割編輯器 - 分割目前的編輯器。
• 檢視：切換在群組內分割編輯器 - 在作用中編輯器的分割模式之間切換。
• 檢視：在群組內合併編輯器 - 返回作用中檔案的單一編輯器。
• 檢視：切換在群組內分割編輯器的版面配置 - 在水平和垂直版面配置之間切換。

若要在兩側之間導覽

• 檢視：將焦點移至作用中編輯器中的第一側 - 將焦點移至分割編輯器的第一側 (左側或頂部)。
• 檢視：將焦點移至作用中編輯器中的第二側 - 將焦點移至第二側 (右側或底部)。
• 檢視：將焦點移至作用中編輯器中的另一側 - 在分割編輯器兩側之間切換。

工作台 > 編輯器：群組內分割版面配置 ( workbench.editor.splitInGroupLayout Open in VS Code Open in VS Code Insiders ) 設定讓您可以將偏好的分割編輯器版面配置設定為水平 (預設) 或垂直。

格線版面配置

如果您想對編輯器群組版面配置有更多控制權，可以使用格線版面配置，您可以在其中顯示多行和多列編輯器群組。檢視 > 編輯器版面配置功能表列出各種編輯器版面配置選項 (例如，兩欄、三欄、格線 (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.pinnedTabSizing Open in VS Code Open in VS Code Insiders ) 設定來選擇如何顯示釘選的編輯器。選項包括

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

您也可以透過設定 工作台 > 編輯器：釘選索引標籤位於獨立列，在常規編輯器索引標籤列上方顯示釘選的編輯器索引標籤。您可以透過在兩列之間拖曳和放下索引標籤來釘選和取消釘選編輯器。

鎖定編輯器群組

使用多個編輯器時，通常會希望始終保持一個或多個編輯器可見。鎖定編輯器群組功能，其中整個編輯器群組被鎖定並可見，提供穩定的顯示，並且任何開啟新編輯器的請求都將在另一個群組中建立。您可以透過編輯器群組工具列中的鎖定圖示來判斷編輯器群組是否已鎖定。

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

您可以透過點擊鎖定圖示或執行 檢視：解除鎖定編輯器群組命令來解除鎖定編輯器群組。

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

• 除非明確將新編輯器移動到鎖定群組 (例如，透過拖放)，否則它不會在鎖定群組中開啟。
• 如果新編輯器跳過鎖定群組，它將在最近使用的未鎖定群組中開啟，或在鎖定群組旁邊建立一個新群組。
• 編輯器群組的鎖定狀態會持續保存並在重新啟動後還原。
• 您也可以鎖定空群組，以實現更穩定的編輯器版面配置。

主要用例是針對編輯器區域中的終端機。例如，您可能希望在左側編輯文字，並在右側始終顯示終端機。當建立終端機編輯器並將其移動到旁邊時，它將自動鎖定。這表示即使右側的終端機已聚焦，開啟檔案仍將在左側開啟，而無需先手動變更焦點。

自動鎖定群組可以使用 workbench.editor.autoLockGroups Open in VS Code Open in VS Code Insiders 設定進行設定，該設定預設僅適用於終端機編輯器，但任何編輯器類型都可以新增以獲得相同的行為。

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

• 檢視：鎖定編輯器群組 - 鎖定作用中編輯器群組。
• 檢視：解除鎖定編輯器群組 - 解除鎖定作用中的已鎖定編輯器群組。
• 檢視：切換編輯器群組鎖定 - 鎖定或解除鎖定作用中編輯器群組。

您必須擁有一個以上的編輯器群組才能使用這些命令。

後續步驟

繼續閱讀以了解

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