🚀 在 VS Code 中！

自訂版面配置

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 元素，例如 [問題]、[終端機] 和 [輸出] 面板，依預設位於編輯器區域下方。

面板位置

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

Panel title bar context menu with Panel Position options

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

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

面板對齊

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

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

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

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

Align Panel options from Panel title context menu

最大化面板大小

當面板對齊方式為 [置中] 時，您可以按一下面板區域右上角的 [最大化面板大小] 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))。
  • 禪模式 - 隱藏除了編輯器區域以外的所有 UI。檢視: 切換禪模式 (⌘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 的右上角都有工具列。例如，[搜尋] 檢視具有工具列，其中包含 [重新整理]、[清除搜尋結果] 等動作。

Search view tool bar with hover over Clear Search Results action

隱藏工具列中的項目

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

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

Search tool bar context menu with Reset menu command

編輯器

您可以獨立於工作台使用者介面之外，自訂 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

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

  • 檢視: 鎖定編輯器群組 - 鎖定現用編輯器群組。
  • 檢視: 解鎖編輯器群組 - 解鎖現用鎖定的編輯器群組。
  • 檢視: 切換編輯器群組鎖定 - 鎖定或解鎖現用編輯器群組。

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

後續步驟

繼續閱讀以瞭解

02/06/2025