自定義佈局

Visual Studio Code 帶有簡潔的使用者介面和方便的預設佈局。同時，VS Code 也提供了豐富的選項和設定，讓您可以根據自己的偏好和工作風格來自定義 UI 佈局。在本主題中，我們將重點介紹各種 UI 自定義方式，以便您能以最高效的方式顯示檢視、編輯器和麵板。

本文首先討論工作臺的自定義，以重新排列側邊欄、檢視和麵板等 UI 元素。在文章的後半部分，我們將介紹如何透過編輯器組、拆分編輯器和編輯器選項卡來自定義編輯器區域。

工作臺

主側邊欄

預設情況下，主側邊欄位於工作臺的左側，顯示諸如資源管理器、搜尋和原始碼管理等檢視。您可以透過選擇活動欄中的圖示來快速切換檢視。

要更改主側邊欄的位置，您可以：

• 右鍵單擊活動欄並選擇將主側邊欄移到右側
• 執行檢視：切換主側邊欄位置命令，在左右兩側切換主側邊欄
• 使用檢視 > 外觀 > 將主側邊欄移到右側選單項
• 在設定編輯器中將 Workbench > Side Bar: Location (workbench.sideBar.location) 設定為 right

副側邊欄

預設情況下，VS Code 在位於編輯器區域左側的主側邊欄中顯示檢視。有時同時開啟兩個檢視會很有用。為此，您可以使用副側邊欄在主側邊欄的對面顯示檢視。無論您是否切換了主側邊欄的位置，副側邊欄總是位於主側邊欄的對面。

下圖顯示了主側邊欄中的資源管理器檢視和副側邊欄中的 Copilot 聊天檢視

要顯示副側邊欄，您可以使用 VS Code 標題欄中的佈局控制元件。如果佈局控制元件不可見，請右鍵單擊 VS Code 標題欄並選擇佈局控制元件。

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

• 執行檢視：切換副側邊欄可見性命令（或按 ⌥⌘B (Windows, Linux Ctrl+Alt+B)）
• 使用檢視 > 外觀 > 副側邊欄選單項

如果您希望在開啟新視窗或工作區時自動顯示副側邊欄，您可以使用 workbench.secondarySideBar.defaultVisibility 設定進行配置。

您可以隨時將檢視和麵板拖放到主側邊欄或副側邊欄中。VS Code 會在您的會話之間記住檢視和麵板的佈局。

命令面板位置

您可以透過用滑鼠游標抓住命令面板的上邊緣並將其拖到其他地方來移動它。您還可以選擇標題欄中的自定義佈局控制元件，然後選擇一個預配置的快速輸入位置。

活動欄位置

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

活動欄位置選單可從活動欄上下文選單或檢視 > 外觀 > 活動欄位置下找到，選項有預設、頂部、底部或隱藏。

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

自定義佈局控制元件

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)

面板對齊

此選項允許您配置底部面板在視窗中的跨度。有四個選項：

• 居中 - 這是預設行為。面板僅跨越編輯器區域的寬度。
• 兩端對齊 - 面板跨越視窗的整個寬度。
• 左對齊 - 面板從視窗的左邊緣跨越到編輯器區域的右邊緣。
• 右對齊 - 面板從視窗的右邊緣跨越到編輯器區域的左邊緣。

對於所有面板對齊選項，活動欄都被視為視窗的邊緣。

您可以在檢視 > 外觀 > 對齊面板選單、面板標題上下文選單中配置這些選項，或使用新的設定面板對齊方式為...命令。

最大化面板大小

當面板對齊方式為居中時，您可以使用面板區域右上角的最大化面板大小 V 形按鈕快速切換面板區域以填充整個編輯器區域。在最大化面板中，V 形按鈕會指向下方，以將面板恢復到原始大小。

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

注意：除了自定義整個面板區域的顯示外，單個面板也可能有自己的佈局自定義。例如，終端允許您擁有多個開啟的選項卡和拆分現有的終端。

拖放檢視和麵板

VS Code 在主側邊欄和麵板區域中有檢視和麵板的預設佈局，但您可以在這些區域之間拖放檢視和麵板。例如，您可以將原始碼管理檢視拖放到面板區域，或將問題面板放入主側邊欄。

注意：請記住，您可以使用重置位置上下文選單項將檢視和麵板重置回其預設位置，或使用通用的檢視：重置檢視位置命令重置所有檢視和麵板。

您還可以將檢視和麵板新增到現有的檢視或面板中以建立組。例如，您可以透過拖動到資源管理器活動欄項上然後放入檢視中，將輸出面板移動到資源管理器檢視組。

您不限於使用滑鼠來移動檢視和麵板。您還可以透過鍵盤使用檢視：移動檢視和檢視：移動焦點檢視命令自定義佈局，其中下拉選單讓您選擇要移動的 UI 元素和目標位置，目標可以是側邊欄或面板區域等位置，也可以是現有的檢視或面板以建立組。

工具欄

大多數 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: 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 編輯器。
• 程式碼導航 - 快速瀏覽您的原始碼。