現已釋出！閱讀關於 11 月新增功能和修復的內容。

自定義佈局

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.

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

  • 右鍵單擊活動欄，然後選擇“Move Primary Side Bar Right”（將主側邊欄移至右側）
  • 執行“View: Toggle Primary Side Bar Position”（檢視: 切換主側邊欄位置）命令，將主側邊欄切換到右側和左側
  • 使用“View”（檢視）>“Appearance”（外觀）>“Move Primary Side Bar Right”（將主側邊欄移至右側）選單項
  • 在 設定編輯器 中，將 “Workbench > Side Bar: Location”（工作臺 > 側邊欄：位置）(workbench.sideBar.location) 設定為 right（右側）

輔助側邊欄

預設情況下，VS Code 在編輯器區域左側的主側邊欄中顯示檢視。同時顯示兩個檢視可能很有用。為此，您可以使用“輔助側邊欄”來顯示位於主側邊欄對面的檢視。無論您是否更改了主側邊欄的位置，輔助側邊欄始終位於主側邊欄的對面。

下圖顯示了主側邊欄中的“資源管理器”檢視和輔助側邊欄中的“Copilot Chat”檢視

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

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

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

或者，您也可以按以下方式開啟輔助側邊欄：

  • 執行“View: Toggle Secondary Side Bar Visibility”（檢視: 切換輔助側邊欄可見性）命令（或按 ⌥⌘B （Windows、Linux Ctrl+Alt+B））
  • 使用“View”（檢視）>“Appearance”（外觀）>“Secondary Side Bar”（輔助側邊欄）選單項

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

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

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

注意

您可以使用“View: Reset View Locations”（檢視: 重置檢視位置）命令將檢視和麵板恢復到預設位置。

命令面板位置

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

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 Position”（活動欄位置）選單可從活動欄上下文選單中訪問，或在“View”（檢視）>“Appearance”（外觀）>“Activity Bar Position”（活動欄位置）下找到，選項包括“Default”（預設）、“Top”（頂部）、“Bottom”（底部）或“Hidden”（隱藏）。

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

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

自定義佈局控制元件

VS Code 標題欄還包含用於切換主要 UI 元素（側邊欄和麵板區域）可見性的按鈕。

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

最右側的按鈕會顯示“Customize Layout”（自定義佈局）下拉選單，您可以在其中進一步更改各種 UI 元素的可見性和佈局，幷包含多種佈局模式。

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

佈局模式包括：

  • “Full Screen”（全屏）- 設定編輯器以填滿整個顯示螢幕。命令：“View: Toggle Full Screen”（檢視: 切換全屏）（⌃⌘F （Windows、Linux F11））。
  • “Zen Mode”（禪模式）- 隱藏除編輯器區域外的所有 UI。命令：“View: Toggle Zen Mode”（檢視: 切換禪模式）（⌘K Z （Windows、Linux Ctrl+K Z））。
  • “Centered Layout”（居中佈局）- 將編輯器居中顯示在編輯器區域內。命令：“View: Toggle Centered Layout”（檢視: 切換居中佈局）。

視窗和選單樣式

您可以使用以下設定來自定義 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 元素，預設位於編輯器區域下方。

面板位置

您可以將面板區域移動到編輯器的左側、右側、底部或頂部。您可以在“View”（檢視）>“Appearance”（外觀）>“Panel Position”（面板位置）選單下配置這些選項，或透過面板標題欄上下文選單進行配置。

Panel title bar context menu with Panel Position options

您還可以使用命令面板中的“Move Panel”（移動面板）命令。

  • “View: Move Panel Left”（檢視: 將面板移至左側）（workbench.action.positionPanelLeft）
  • “View: Move Panel Right”（檢視: 將面板移至右側）（workbench.action.positionPanelRight）
  • “View: Move Panel To Bottom”（檢視: 將面板移至底部）（workbench.action.positionPanelBottom）
  • “View: Move Panel To Top”（檢視: 將面板移至頂部）（workbench.action.positionPanelTop）

面板對齊

此選項允許您配置底部面板在視窗中跨越的距離。有四種選項：

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

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

您可以在“View”（檢視）>“Appearance”（外觀）>“Align Panel”（對齊面板）選單、面板標題上下文選單中配置這些選項，或使用新的“Set Panel Alignment to...”（將面板對齊到...）命令。

Align Panel options from Panel title context menu

最大化面板大小

當面板對齊方式為“Center”（居中）時，您可以透過面板區域右上角的“Maximize Panel Size”（最大化面板大小）向下箭頭按鈕，快速將面板區域切換為填滿整個編輯器區域。在最大化面板中，箭頭按鈕指向下方，表示恢復面板到原始大小。

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

您還可以透過“View: Toggle Maximized Panel”（檢視: 切換最大化面板）命令來最大化面板區域。

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

拖放檢視和麵板

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

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

注意：請記住，您可以使用“Reset Location”（重置位置）上下文選單項將單個檢視和麵板恢復到其預設位置，或使用通用的“View: Reset View Locations”（檢視: 重置檢視位置）命令將所有檢視和麵板恢復到預設位置。

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

Output panel moved to the Explorer view group

您不限於僅使用滑鼠來移動檢視和麵板。您還可以使用“View: Move View”（檢視: 移動檢視）和“View: Move Focused View”（檢視: 移動焦點檢視）命令透過鍵盤來自定義佈局，下拉列表允許您選擇要移動的 UI 元素以及目標，可以是側邊欄或面板區域等位置，也可以是現有的檢視或面板以建立組。

工具欄

大多數 VS Code 檢視和麵板在 UI 的右上角顯示工具欄。例如，“搜尋”檢視具有一個工具欄，其中包含“Refresh”（重新整理）、“Clear Search Results”（清除搜尋結果）等操作。

Search view tool bar with hover over Clear Search Results action

隱藏工具欄中的專案

如果您認為工具欄太擁擠，並且想要隱藏不常用的操作，您可以右鍵單擊任何操作並選擇其“Hide”（隱藏）命令（例如“Hide 'Clear Search Results'”（隱藏“清除搜尋結果”））或從下拉列表中取消勾選任何操作。隱藏的操作將移至 ... “More Actions”（更多操作）選單，並可以從那裡呼叫。

要將操作恢復到工具欄，請右鍵單擊工具欄按鈕區域並選擇“Reset Menu”（重置選單）命令，或重新勾選隱藏的操作。要恢復 VS Code 中的所有選單，請從命令面板執行“View: Reset All Menus”（檢視: 重置所有選單）（⇧⌘P （Windows、Linux Ctrl+Shift+P））。

Search tool bar context menu with Reset menu command

編輯器

您可以獨立於工作臺使用者介面來自定義 VS Code 編輯器區域的佈局。預設情況下，編輯器區域顯示諸如迷你地圖、麵包屑、編輯器標籤等有用功能，並具有可選的 UI，如粘滯滾動。您還可以調整編輯器本身的佈局或將它們移動到浮動視窗。

迷你地圖和麵包屑

“View”（檢視）>“Appearance”（外觀）選單有一個用於自定義編輯器區域的部分。您可以在其中找到以下切換選項：

  • “Minimap”（迷你地圖）- 您當前檔案的 視覺化概覽。命令：“View: Toggle Minimap”（檢視: 切換迷你地圖）。
  • “Breadcrumbs”（麵包屑）- 顯示活動檔案的 資料夾、檔案和當前符號 資訊。命令：“View: Toggle Breadcrumbs”（檢視: 切換麵包屑）。
  • “Sticky Scroll”（粘滯滾動）- 顯示活動檔案中 巢狀的符號作用域。命令：“View: Toggle Sticky Scroll”（檢視: 切換粘滯滾動）。

編輯器組

預設情況下，每個開啟的編輯器都進入同一個“編輯器組”，並在右側新增一個新的編輯器標籤。您可以建立新的編輯器組，以便對相似或相關的檔案進行分組，或允許對同一檔案進行 並排編輯。

透過將編輯器拖到側邊來建立新的編輯器組，或者使用編輯器標籤上下文選單中的“Split”（拆分）命令之一，將當前編輯器複製到左側、右側、上方或下方的新的編輯器組中。

Split editor commands in the editor tab context menu

“Split”（拆分）編輯器命令也可在“View”（檢視）>“Editor Layout”（編輯器佈局）選單和命令面板中找到。

如果您想在垂直和水平編輯器組佈局之間快速切換，可以使用“Toggle Vertical/Horizontal Editor Layout”（切換垂直/水平編輯器佈局）命令（⌥⌘0 （Windows、Linux Shift+Alt+0））。

組內分屏

您也可以使用“View: Split Editor in Group”（檢視: 在組內分屏編輯器）命令（⌘K ⇧⌘\ （Windows、Linux Ctrl+K Ctrl+Shift+\））在同一組中拆分編輯器以進行並排編輯。

在使用組內分屏功能時，有一些特定的命令用於切換此模式和在兩個分屏編輯器之間導航。

  • “View: Split Editor in Group”（檢視: 在組內分屏編輯器）- 拆分當前編輯器。
  • “View: Toggle Split Editor in Group”（檢視: 切換組內分屏編輯器）- 切換活動編輯器的分屏模式。
  • “View: Join Editor in Group”（檢視: 合併組內編輯器）- 將活動檔案恢復為單個編輯器。
  • “View: Toggle Layout of Split Editor in Group”（檢視: 切換組內分屏編輯器佈局）- 在水平和垂直佈局之間切換。

要在兩側之間導航：

  • “View: Focus First Side in Active Editor”（檢視: 聚焦活動編輯器中的第一個側）- 將焦點移至分屏編輯器的第一側（左側或頂部）。
  • “View: Focus Second Side in Active Editor”（檢視: 聚焦活動編輯器中的第二個側）- 將焦點移至分屏編輯器的第二側（右側或底部）。
  • “View: Focus Other Side in Active Editor”（檢視: 聚焦活動編輯器中的另一側）- 在分屏編輯器兩側之間切換。

“Workbench > Editor: Split in Group Layout”（工作臺 > 編輯器: 組內分屏佈局）（workbench.editor.splitInGroupLayout）設定 允許您將首選的分屏編輯器佈局設定為水平（預設）或垂直。

網格佈局

如果您希望更精細地控制編輯器組佈局，可以使用 網格佈局，您可以在其中使多個編輯器組的行和列可見。“View”（檢視）>“Editor Layout”（編輯器佈局）選單列出了各種編輯器佈局選項（例如，“Two Columns”（兩列）、“Three Columns”（三列）、“Grid (2x2)”（網格 (2x2)）），您可以透過拖動它們之間的分隔符來調整組大小。

Editor Grid 2x2 layout with the sash highlighted

浮動視窗

您可以將編輯器、終端或特定檢視開啟到浮動視窗中。這在多顯示器設定中很有用，您可以將編輯器移動到另一個顯示器，甚至移動到同一顯示器上的不同位置。

要將編輯器開啟到浮動視窗中，請將其從主視窗中拖出，並將其放在當前 VS Code 視窗之外的任何位置。

浮動視窗可以以網格佈局開啟任意數量的編輯器。視窗將在重啟後恢復到其位置，並重新開啟其中的所有編輯器。

分離編輯器的另一種方法是右鍵單擊編輯器標籤，然後選擇“Move into New Window”（移入新視窗）（workbench.action.moveEditorToNewWindow）或“Copy into New Window”（複製到新視窗）（⌘K O （Windows、Linux Ctrl+K O））選項。

Floating windows from editor tab menu

要移動整個編輯器組，請使用“Move Editor Group into New Window”（將編輯器組移入新視窗）（）或“Copy Editor Group into New Window”（將編輯器組複製到新視窗）（）命令。

緊湊模式

要從浮動視窗中刪除不必要的 UI 元素併為內容騰出更多空間，請選擇浮動視窗標題欄中的“Set Compact Mode”（設定緊湊模式）選項。再次選擇以將浮動視窗恢復到其原始模式。

Floating window title bar with Compact Mode option highlighted

置頂

您可以透過選擇浮動視窗標題欄中的“Set Always on Top”（始終置頂）選項將浮動視窗置頂。這對於在主 VS Code 視窗工作時保持終端或預覽視窗始終可見非常有用。再次選擇以取消置頂浮動視窗。

Floating window title bar with Always on Top option highlighted

固定的標籤頁

如果您希望某個編輯器標籤頁始終可見，可以將其固定到編輯器標籤欄。您可以從上下文選單或使用命令“View: Pin Editor”（檢視: 固定編輯器）（⌘K ⇧Enter （Windows、Linux Ctrl+K Shift+Enter））來固定編輯器標籤頁。

Pinned editor tab with pin button highlighted

固定的標籤頁有助於訪問您重要的檔案，因為：

  • 固定的標籤頁始終顯示在非固定的標籤頁之前。
  • 如果您打開了許多標籤頁，它們不會滾動出檢視。
  • 當使用諸如“Close Others”（關閉其他）或“Close All”（關閉所有）等編輯器標籤頁命令時，它們不會關閉。
  • 即使您超過了設定的開啟編輯器數量限制，它們也不會關閉。

透過單擊固定圖示、使用“Unpin”（取消固定）編輯器標籤頁上下文選單項，或“View: Unpin Editor”（檢視: 取消固定編輯器）命令來取消固定編輯器。

您可以透過“Workbench > Editor: Pinned Tab Sizing”（工作臺 > 編輯器: 固定標籤頁大小）（workbench.editor.pinnedTabSizing）設定來選擇顯示固定編輯器的模式。選項包括：

  • normal：固定標籤頁繼承其他標籤頁的外觀（預設）。
  • shrink：固定標籤頁縮小到固定大小，顯示編輯器標籤的一部分。
  • compact：固定標籤頁僅顯示為圖示或編輯器標籤的第一個字母。

您還可以透過設定“Workbench > Editor: Pinned Tabs On Separate Row”（工作臺 > 編輯器: 固定標籤頁顯示在單獨一行）來在常規編輯器標籤欄上方單獨的行上顯示固定的編輯器標籤頁。您可以透過在兩行之間拖放標籤頁來固定和取消固定編輯器。

鎖定編輯器組

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

Locked editor group with lock icon highlighted

您可以透過選擇編輯器工具欄“More Actions”（更多操作）... 下拉選單中的“Lock Group”（鎖定組）命令，或執行“View: Lock Editor Group”（檢視: 鎖定編輯器組）命令來鎖定編輯器組。

Lock Group command in the editor tool bar More Actions dropdown

您可以透過單擊鎖定圖示或執行“View: Unlock Editor Group”（檢視: 解鎖編輯器組）命令來解鎖編輯器組。

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

  • 除非明確移動到鎖定的組中（例如，透過拖放），否則新編輯器不會在該組中開啟。
  • 如果新編輯器跳過鎖定的組，它將在最近使用的未鎖定組中開啟，或者在鎖定組的側面建立一個新組。
  • 編輯器組的鎖定狀態會被持久化並在重啟後恢復。
  • 您也可以鎖定空組，從而實現更穩定的編輯器佈局。

主要用例是用於 編輯器區域中的終端。例如，您可能希望在左側編輯文字，並在右側有一個始終可見的終端。當建立終端編輯器並將其移至側邊時，它將自動鎖定。這意味著即使終端位於右側並獲得焦點，開啟一個檔案也會在左側開啟，而無需先手動更改焦點。

自動鎖定組可以使用 workbench.editor.autoLockGroups 設定進行配置，該設定預設為僅終端編輯器，但任何編輯器型別都可以新增到其中以獲得相同的行為。

Auto Lock Groups setting with Terminal checked in the Settings editor

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

  • “View: Lock Editor Group”（檢視: 鎖定編輯器組）- 鎖定活動編輯器組。
  • “View: Unlock Editor Group”（檢視: 解鎖編輯器組）- 解鎖活動的鎖定編輯器組。
  • “View: Toggle Editor Group Lock”（檢視: 切換編輯器組鎖定）- 鎖定或解鎖活動編輯器組。

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

後續步驟

繼續閱讀以瞭解：

12/10/2025
© . This site is unofficial and not affiliated with Microsoft.