使用者介面

Visual Studio Code 核心是程式碼編輯器。如同許多其他程式碼編輯器,VS Code 採用常見的使用者介面和佈局:左側是檔案總管,顯示您有權存取的所有檔案和資料夾;右側是編輯器,顯示您已開啟檔案的內容。

基本版面配置

VS Code 具有簡潔直觀的版面配置,最大限度地擴展了編輯器的可用空間,同時也保留了充足的空間,供您瀏覽和存取專案或資料夾的完整內容。使用者介面分為六個主要區域

  • 編輯器 - 用於編輯檔案的主要區域。您可以隨心所欲地垂直和水平並排開啟多個編輯器。
  • 主要側邊欄 - 包含檔案總管等不同的檢視,可在您處理專案時提供協助。
  • 次要側邊欄 - 位於主要側邊欄的對面。預設包含「聊天」檢視。您可以從主要側邊欄拖放檢視到次要側邊欄以移動它們。
  • 狀態列 - 顯示有關開啟專案和您編輯檔案的資訊。
  • 活動列 - 位於最左側。它讓您可以在檢視之間切換,並提供額外的上下文相關指示器,例如啟用 Git 時的傳出變更數量。您可以變更活動列的位置。
  • 面板 - 編輯器區域下方用於檢視的額外空間。預設包含輸出、偵錯資訊、錯誤和警告,以及整合式終端機。面板也可以移到左側或右側以獲得更多垂直空間。

Screenshot of the VS Code user interface, highlighting the main areas.

每次啟動 VS Code 時,它都會以您上次關閉時的狀態開啟。資料夾、版面配置和已開啟的檔案都會保留下來。

每個編輯器中開啟的檔案都會在編輯器區域頂部以索引標籤標頭 (索引標籤) 顯示。若要進一步了解索引標籤標頭,請參閱索引標籤區段。

提示

您可以透過以滑鼠右鍵點選活動列並選取將主要側邊欄移至右側,或切換其可見性 (⌘B (Windows、Linux Ctrl+B)),將主要側邊欄移到右側。

深入了解如何使用主要和次要側邊欄

並排編輯

您可以隨心所欲地垂直和水平並排開啟多個編輯器。如果您已經開啟一個編輯器,有許多方法可以在旁邊開啟另一個編輯器

  • 按住 Alt 並在檔案總管檢視中選取一個檔案。
  • ⌘\ (Windows、Linux Ctrl+\) 將作用中的編輯器分割成兩個。
  • 從檔案上的檔案總管內容功能表選取側邊開啟 (⌃Enter (Windows、Linux Ctrl+Enter))。
  • 選取編輯器右上角的分割編輯器按鈕。
  • 將檔案拖放到編輯器區域的任何一側。在拖曳時按住 Ctrl (macOS 上為 Option) 可複製索引標籤而非移動它。
  • 快速開啟 (⌘P (Windows、Linux Ctrl+P)) 檔案清單中按下 ⌃Enter (Windows、Linux Ctrl+Enter)

Side by Side editing

當您開啟另一個檔案時,作用中的編輯器將顯示該檔案的內容。如果您有兩個編輯器並排,並且想要將 'foo.cs' 檔案開啟到右側編輯器中,請務必在開啟 'foo.cs' 檔案之前確保該編輯器處於作用中狀態 (透過點選其內部)。

預設情況下,編輯器會在作用中編輯器的右側開啟。您可以透過 workbench.editor.openSideBySideDirection Open in VS Code Open in VS Code Insiders 設定來變更此行為,改為在作用中編輯器的下方開啟新編輯器。

當您開啟多個編輯器時,可以透過按住 Ctrl 鍵 (macOS 上為 Cmd) 並按下 123 來快速切換。

提示

您可以調整編輯器大小並重新排序。拖放編輯器標題區域以重新定位或調整編輯器大小。

編輯器群組

當您分割編輯器 (使用分割編輯器側邊開啟命令) 時,會建立一個新的編輯器區域 (編輯群組),其中可以容納一組項目。您可以隨心所欲地垂直和水平並排開啟多個編輯器群組。

您可以在檔案總管檢視頂部的開啟的編輯器區段中清楚地看到這些 (在檔案總管檢視中切換... > 開啟的編輯器)。

tabs editor groups

您可以在工作區中拖放編輯器群組,在群組之間移動個別索引標籤,並快速關閉整個群組 (全部關閉)。

注意

無論您是否啟用索引標籤,VS Code 都會使用編輯器群組。如果沒有索引標籤,編輯器群組就是一堆已開啟的項目,最近選取的項目會在編輯器窗格中可見。

在群組中分割

您可以使用檢視:在群組中分割編輯器命令 (⌘K ⇧⌘\ (Windows、Linux Ctrl+K Ctrl+Shift+\)) 分割目前的編輯器,而不會建立新的編輯器群組。若要進一步了解此編輯器模式以及在兩側之間導航的特定命令,您可以閱讀自訂佈局文章中的區段。

浮動視窗

您可以將編輯器、終端機或特定檢視移至它們自己的浮動視窗。如果您有多顯示器設定並希望在不同顯示器上開啟檔案,這會很有用。

Screenshot that shows the OS desktop with VS Code window and a CSV file opened in a floating window.

將編輯器索引標籤拖出目前的 VS Code 視窗,以在浮動視窗中開啟。或者,使用編輯器索引標籤的內容選項移至新視窗複製到新視窗

若要將浮動視窗釘選到螢幕頂部,請從其標題列選取設定永遠在最上層選項 (釘選圖示)。

若要進一步了解浮動視窗,請閱讀自訂佈局文章中的區段。

模式編輯器

VS Code 中的某些組態編輯器會以置中模式疊層的方式在編輯器區域上方開啟,而非以一般編輯器索引標籤的形式開啟。這些模式編輯器包括

  • 設定編輯器
  • 鍵盤快速鍵編輯器
  • 設定檔編輯器
  • 工作區信任編輯器
  • 語言模型編輯器
  • 擴充功能編輯器

您可以透過點選模式編輯器外部、按下 Escape 鍵或選取關閉按鈕來關閉它。您也可以將它最大化以填滿編輯器區域,或將它移回主視窗作為一般編輯器索引標籤。

注意

您可以透過 workbench.editor.useModal Open in VS Code Open in VS Code Insiders 設定來控制此行為。將其設為 off 以始終將編輯器作為一般索引標籤開啟,some 以僅將組態編輯器作為模式疊層開啟 (預設),或 all 以在模式疊層中開啟所有編輯器。

小地圖

小地圖 (程式碼大綱) 提供了原始碼的高層次概覽,這對於快速導航和理解程式碼很有用。檔案的小地圖顯示在編輯器的右側。您可以選取或拖曳陰影區域,以快速跳至檔案中的不同區段。

如果編輯器中有摺疊標記,例如 //#region 註解,則小地圖會顯示摺疊標記名稱。摺疊標記是語言特定的,因此請檢查哪些標記適用於您的語言。

minimap

提示

您可以透過分別在使用者或工作區設定中設定 "editor.minimap.side": "left""editor.minimap.enabled": false,將小地圖移至左側或完全停用它。

懸浮捲動

懸浮捲動會在編輯器頂部顯示目前可見的巢狀範圍的起始行。它透過指示您在檔案中的位置來方便導航,並讓您快速跳回目前範圍的頂部。

stickyScroll

提示

您可以使用 editor.stickyScroll.enabled Open in VS Code Open in VS Code Insiders 設定來啟用/停用懸浮捲動。

懸浮捲動使用多種不同的內容模型來建立其標題。您可以選擇大綱提供者模型、摺疊提供者模型和縮排模型,以決定在懸浮捲動區域中顯示哪些行。如果目前語言沒有可用的模型,VS Code 會依序回退到下一個模型。最初使用的預設模型來自 editor.stickyScroll.defaultModel Open in VS Code Open in VS Code Insiders 設定。

縮排參考線

編輯器會顯示縮排參考線 (垂直線),可協助您快速查看相符的縮排層級。如果您想停用縮排參考線,可以在使用者或工作區設定中將 editor.guides.indentation Open in VS Code Open in VS Code Insiders 設定為 false

麵包屑

編輯器頂部有一個導覽列,也稱為麵包屑。麵包屑始終顯示檔案路徑,如果目前的檔案類型支援符號,則會顯示符號路徑直到游標位置。麵包屑讓您可以快速導覽資料夾、檔案和符號。

Breadcrumbs

您可以透過檢視 > 外觀 > 切換麵包屑功能表項目或檢視:切換麵包屑命令來停用麵包屑。有關麵包屑功能的更多資訊,例如如何自訂其外觀,請參閱程式碼導覽文章的麵包屑區段。

檔案總管檢視

檔案總管檢視用於瀏覽、開啟和管理專案中的檔案和資料夾。VS Code 是以檔案和資料夾為基礎的,您可以立即在 VS Code 中開啟檔案或資料夾來開始使用。

在 VS Code 中開啟資料夾後,資料夾的內容會顯示在檔案總管檢視中。您可以從這裡執行許多操作

  • 建立、刪除和重新命名檔案和資料夾。
  • 透過拖放移動檔案和資料夾。
  • 使用內容功能表探索所有選項。
提示

您可以將檔案從 VS Code 外部拖放到檔案總管檢視中以複製它們。如果檔案總管是空的,VS Code 會改為開啟檔案。您也可以從 VS Code 外部複製貼上檔案到檔案總管檢視中。透過 explorer.autoOpenDroppedFile Open in VS Code Open in VS Code Insiders 設定,您可以配置是否自動開啟檔案。

VS Code 與您可能使用的其他工具配合良好,尤其是命令列工具。如果您想在 VS Code 中目前開啟的資料夾的上下文中執行命令列工具,請以滑鼠右鍵點選資料夾並選取在整合式終端機中開啟

您也可以透過以滑鼠右鍵點選檔案或資料夾,並在 Windows 上選取在檔案總管中顯示,在 macOS 上選取在 Finder 中顯示,或在 Linux 上選取開啟包含資料夾,來導覽至本機作業系統檔案總管中的檔案或資料夾位置。

提示

輸入 ⌘P (Windows、Linux Ctrl+P) (快速開啟) 以透過名稱快速搜尋並開啟檔案。

預設情況下,VS Code 會排除某些資料夾不顯示在檔案總管檢視中,例如 .git。使用 files.exclude Open in VS Code Open in VS Code Insiders 設定來配置從檔案總管檢視中隱藏檔案和資料夾的規則。此設定中的 Glob 模式遵循您作業系統的大小寫敏感規則 (Windows/macOS 上不區分大小寫,Linux 上區分大小寫)。深入了解 Glob 模式

您也可以透過啟用 explorer.excludeGitIgnore Open in VS Code Open in VS Code Insiders 設定來隱藏在 .gitignore 檔案中指定的檔案和資料夾。啟用後,.gitignore 模式在 Windows 和 macOS 上會以不區分大小寫的方式套用,在 Linux 上則會以區分大小寫的方式套用。例如,您 .gitignore 中的模式,如 node_modules,在 Windows 和 macOS 上會比對 node_modules/Node_Modules/NODE_MODULES/ 以及其他大小寫變體,但在 Linux 上只會比對完全相符的項目。

imageCarousel.explorerContextMenu.enabled Open in VS Code Open in VS Code Insiders (實驗性功能) 啟用時,您可以以滑鼠右鍵點選檔案總管中的影像或視訊檔案或資料夾,然後選取在輪播中開啟影像,以在專用的輪播檢視中瀏覽媒體檔案。這也適用於多重選取。

提示

您可以隱藏衍生的資源檔案,例如 Unity 中的 *.meta 或 TypeScript 專案中的 *.js。對於 Unity,要排除 *.cs.meta 檔案,選擇的模式應為:"**/*.cs.meta": true。對於 TypeScript,您可以透過:"**/*.js": {"when": "$(basename).ts"} 排除 TypeScript 檔案生成的 JavaScript。

多重選取

您可以在檔案總管檢視和開啟的編輯器區段中選取多個檔案,以對多個項目執行動作 (刪除、拖放或側邊開啟)。按住 Ctrl (macOS 上為 Cmd) 並選取個別檔案,或按住 Shift 以選取一系列檔案。如果您選取兩個項目,您現在也可以使用內容功能表中的比較選取項目命令來快速比較兩個檔案。

注意

在較早的 VS Code 版本中,按下 Ctrl 鍵 (macOS 上為 Cmd) 並點選,會將檔案開啟到側邊的新編輯器群組中。如果您仍然希望有此行為,您可以使用 workbench.list.multiSelectModifier Open in VS Code Open in VS Code Insiders 設定將多重選取變更為使用 Alt 鍵。

"workbench.list.multiSelectModifier": "alt"

進階樹狀結構導覽

您可以篩選檔案總管檢視中的檔案和資料夾。將焦點放在檔案總管檢視上,按下 ⌥⌘F (Windows、Linux Ctrl+Alt+F) 以開啟「尋找」控制項,然後輸入您要比對的檔案或資料夾名稱的一部分。此導覽功能適用於 VS Code 中的所有樹狀檢視。

按下篩選按鈕可在兩種模式之間切換:醒目提示和篩選。按下 Down 鍵可讓您將焦點放在第一個相符的元素上,並導覽至後續相符的元素。在醒目提示模式中,資料夾上會顯示一個徽章,表示它們包含相符的檔案。

按下模糊比對按鈕可在精確比對和模糊比對之間切換,您可以在其中輸入一串字元以比對檔案或資料夾名稱的任何部分。

Filtering files in the File Explorer

大綱檢視 (Outline view)

大綱檢視是檔案總管檢視底部的一個獨立區段。展開時,它會顯示目前作用中編輯器的符號樹狀結構。

Outline view

大綱檢視具有不同的排序依據模式、選用的游標追蹤,並支援常見的開啟手勢。它還包含一個輸入框,用於尋找或篩選。錯誤和警告也會顯示在大綱檢視中,讓您可以一目了然地看到問題的位置。

對於符號,此檢視依賴於您針對不同檔案類型安裝的擴充功能所計算的資訊。例如,內建的 Markdown 支援會傳回 Markdown 檔案符號的 Markdown 標題階層。

Markdown Outline view

有幾個大綱檢視設定。搜尋以 outline. 開頭的設定,以配置大綱檢視中顯示的資訊。

時間軸檢視

時間軸檢視位於檔案總管底部,是一個統一的檢視,用於視覺化檔案的事件歷史。例如,您可以在時間軸檢視中查看 Git 提交或本機檔案儲存。

Timeline view

時間軸檢視工具列中的篩選動作可讓您在原始檔控制事件和本機檔案事件之間進行篩選

Timeline filter drop down with Git History unchecked and Local History checked

本機檔案歷程記錄

根據您的設定,每次儲存編輯器時,都會向清單中新增一個新項目。每個本機歷程記錄項目都包含建立項目時檔案的完整內容,在某些情況下,可以提供更多語意資訊 (例如,指示重構)。

從一個項目,您可以

  • 比較變更與本機檔案或先前項目。
  • 還原內容。
  • 刪除或重新命名項目。
提示

如果您不小心刪除了檔案,可以透過在時間軸檢視中使用... > 本機歷程記錄:尋找要還原的項目動作,然後從快速選取中選取您的檔案,從本機歷程記錄中還原它。

您可以配置這些設定以使用本機歷程記錄

  • workbench.localHistory.enabled Open in VS Code Open in VS Code Insiders - 啟用或停用本機歷程記錄 (預設值:true)
  • workbench.localHistory.maxFileSize Open in VS Code Open in VS Code Insiders - 建立本機歷程記錄項目時的檔案大小限制 (預設值:256 KB)
  • workbench.localHistory.maxFileEntries Open in VS Code Open in VS Code Insiders - 每個檔案的本機歷程記錄項目限制 (預設值:50)
  • workbench.localHistory.exclude Open in VS Code Open in VS Code Insiders - 用於從本機歷程記錄中排除某些檔案的 Glob 模式
  • workbench.localHistory.mergeWindow Open in VS Code Open in VS Code Insiders - 在此期間,進一步的變更會新增到本機檔案歷程記錄中的最後一個項目 (預設 10 秒)

提交歷史

VS Code 內建的 Git 支援提供指定檔案的 Git 提交歷史。選取一個提交會開啟該提交引入變更的差異檢視。當您以滑鼠右鍵點選一個提交時,您會看到複製提交 ID複製提交訊息的選項。

當您在歷史記錄中以滑鼠右鍵點選一個提交時,您可以

  • 開啟變更 - 開啟檔案中變更的差異檢視。
  • 檢視提交 - 開啟多檔案差異檢視,以檢視提交中所有檔案的變更。
  • 選取以比較 - 選取一個項目以與另一個項目進行比較。
  • 複製提交 ID - 將提交 ID 複製到剪貼簿。
  • 複製提交訊息 - 將提交訊息複製到剪貼簿。

您可以配置此設定以使用 Git 歷史記錄

  • git.timeline.date Open in VS Code Open in VS Code Insiders - 顯示檔案提交的提交日期或作者日期

檢視

檔案總管檢視只是 VS Code 中可用的其中一個檢視。還有其他檢視,例如

  • 搜尋 - 跨您開啟的資料夾提供全域搜尋和取代。
  • 原始檔控制 - VS Code 預設包含 Git 原始檔控制。
  • 執行 - VS Code 的執行與偵錯檢視會顯示變數、呼叫堆疊和中斷點。
  • 擴充功能 - 在 VS Code 中安裝和管理您的擴充功能。
  • 自訂檢視 - 由擴充功能貢獻的檢視。
提示

您可以使用檢視:開啟檢視命令開啟任何檢視。

views

您可以透過以滑鼠右鍵點選活動列來顯示或隱藏檢視,並透過拖放來重新排序它們。在檔案總管檢視中,您可以透過「...」功能表顯示或隱藏區段,或拖放區段以重新排序它們。

命令面板

VS Code 也可以透過鍵盤存取。最需要知道的按鍵組合是 ⇧⌘P (Windows、Linux Ctrl+Shift+P),這會開啟命令選擇區。從這裡,您可以存取 VS Code 中的所有功能,包括最常見操作的鍵盤快速鍵。

Command Palette

命令選擇區提供了許多命令的存取權限。您可以使用同一個互動式視窗執行編輯器命令、開啟檔案、搜尋符號,並查看檔案的快速大綱。以下是一些提示

  • ⌘P (Windows、Linux Ctrl+P) 讓您可以透過輸入其名稱來導覽至任何檔案或符號
  • ⌃Tab (Windows、Linux Ctrl+Tab) 可讓您循環瀏覽最近開啟的檔案集合
  • ⇧⌘P (Windows、Linux Ctrl+Shift+P) 可直接帶您前往編輯器命令
  • ⇧⌘O (Windows、Linux Ctrl+Shift+O) 讓您可以在檔案中導覽至特定的符號
  • ⌃G (Windows、Linux Ctrl+G) 讓您可以在檔案中導覽至特定的行

在輸入欄位中輸入 ? 以取得您可以從命令選擇區執行的可用命令清單。

Quick Open Help

提示

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

Screenshot that shows the Command Palette in a different location, highlighting the Customize Layout control in the title bar and the preconfigured position options.

設定編輯器

VS Code 為您提供了許多配置編輯器的選項。從檢視 > 外觀功能表,您可以隱藏或切換使用者介面的各個部分,例如側邊欄狀態列活動列

隱藏功能表列 (Windows、Linux)

您可以透過將 window.menuBarVisibility Open in VS Code Open in VS Code Insiders 設定從 classic 變更為 togglehidden 來隱藏 Windows 和 Linux 上的功能表列。將設定設為 toggle 表示單次按下 Alt 鍵會再次顯示功能表列。

您也可以使用檢視:切換功能表列命令在 Windows 和 Linux 上隱藏功能表列。此命令將 window.menuBarVisibility Open in VS Code Open in VS Code Insiders classic 設定為 compact,這會導致功能表列移動到活動列中。要將功能表列恢復到 classic 位置,您可以再次執行檢視:切換功能表列命令。

設定

大多數編輯器組態都在設定中管理,您可以直接修改。您可以透過使用者設定全域設定選項,或透過工作區設定依專案/資料夾設定選項。設定值儲存在 settings.json 檔案中。

您可以在設定編輯器中檢視和編輯設定 (選取 檔案 > 偏好設定 > 設定,或按下 ⌘, (Windows、Linux Ctrl+,))。使用使用者工作區索引標籤在使用者和工作區設定之間切換。您可以透過頂部的搜尋框篩選設定。

或者,您可以直接在 settings.json 檔案中修改使用者設定。使用偏好設定:開啟使用者設定 (JSON) 命令開啟 settings.json 檔案。對於工作區設定,請在工作區的 .vscode 資料夾中開啟 settings.json 檔案。

workspace settings

注意

工作區設定會覆寫使用者設定,對於在團隊中共用專案特定的設定很有用。

禪模式

禪模式可讓您透過隱藏所有 UI 元素 (除了編輯器)、將 VS Code 切換為全螢幕,以及將編輯器置中來專注於您的程式碼。禪模式可以透過檢視 > 外觀 > 禪模式功能表、命令選擇區中的檢視:切換禪模式,或使用快速鍵 ⌘K Z (Windows、Linux Ctrl+K Z) 來切換。連按兩次 Esc 即可退出禪模式。可以透過 zenMode.fullScreen Open in VS Code Open in VS Code Insiders 停用全螢幕切換。

禪模式可以透過以下設定進一步調整

  • zenMode.hideActivityBar Open in VS Code Open in VS Code Insiders - 隱藏活動列。預設為 true
  • zenMode.hideStatusBar Open in VS Code Open in VS Code Insiders - 隱藏狀態列。預設為 true
  • zenMode.hideLineNumbers Open in VS Code Open in VS Code Insiders - 隱藏行號。預設為 true
  • zenMode.showTabs Open in VS Code Open in VS Code Insiders - 控制是否顯示多個、單個或不顯示編輯器索引標籤。預設為 multiple
  • zenMode.fullScreen Open in VS Code Open in VS Code Insiders - 將工作區置於全螢幕顯示。預設為 true
  • zenMode.restore Open in VS Code Open in VS Code Insiders - 在重新啟動時還原禪模式。預設為 true
  • zenMode.centerLayout Open in VS Code Open in VS Code Insiders - 使用置中編輯器佈局。預設為 true
  • zenMode.silentNotifications Open in VS Code Open in VS Code Insiders - 不顯示通知。預設為 true

使用勿擾模式減少通知

如果您被彈出的通知所淹沒,有一種方法可以減少通知,無論是針對所有通知,還是針對特定擴充功能的通知。

選取狀態列中的鈴鐺圖示 (如果通知位於右上角,則在標題列中),以開啟通知區域。這是您可以隨時存取所有通知的地方,即使您已啟用勿擾模式。您可以透過 workbench.notifications.position Open in VS Code Open in VS Code Insiders 設定來變更通知位置。深入了解通知位置

Notifications center

找到帶有叉號的鈴鐺圖示,即可存取一個功能表,您可以在其中選擇性地停用來自擴充功能的通知,或啟用全域勿擾模式以停用所有通知。

Notifications do not disturb menu

注意

全域勿擾模式也會隱藏錯誤通知,而擴充功能特定的篩選器仍然允許顯示錯誤通知。

置中編輯器佈局

置中編輯器佈局允許您將編輯器區域置中對齊。這對於在大型顯示器上使用單一編輯器時很有用。您可以使用側邊邊框來調整檢視大小 (按住 Alt 鍵可以獨立移動側邊)。

索引標籤

VS Code 在編輯器上方的標題區域中,以索引標籤 (索引標籤標頭) 顯示開啟的項目。當您開啟檔案時,會為該檔案新增一個新的索引標籤。索引標籤可讓您快速在項目之間導覽。

tabs hero

您可以拖放索引標籤以重新排序它們。若要一次對多個索引標籤執行動作,請按住 Ctrl 鍵 (macOS 上為 Cmd) 並選取您要操作的索引標籤。若要選取一系列索引標籤,請按住 Shift 鍵並選取該範圍內的第一個和最後一個索引標籤。

當您開啟的項目數量超出標題區域可容納的範圍時,您可以使用檔案總管檢視中的開啟的編輯器區段 (透過 ... 按鈕可用) 來顯示索引標籤項目的下拉式清單。

索引標籤和編輯器區域之間也有一個捲軸,用於將編輯器拖曳到檢視中。您可以透過將工作區 > 編輯器:標題捲軸大小 ( workbench.editor.titleScrollbarSizing Open in VS Code Open in VS Code Insiders ) 設定為 large 來增加捲軸的高度,使其更容易拖曳。使用 workbench.editor.titleScrollbarVisibility Open in VS Code Open in VS Code Insiders 設定來控制捲軸的可見性。

如果您不想使用索引標籤,可以透過將 workbench.editor.showTabs Open in VS Code Open in VS Code Insiders 設定設為 single 來停用此功能

    "workbench.editor.showTabs": "single"

請參閱下面的區段,以最佳化 VS Code 的無索引標籤模式

提示

在編輯器標題區域中連按兩下可快速建立新的索引標籤。

索引標籤排序

預設情況下,新索引標籤會新增到現有索引標籤的右側。您可以透過 workbench.editor.openPositioning Open in VS Code Open in VS Code Insiders 設定來控制新索引標籤出現的位置。

例如,您可能希望新的索引標籤項目出現在左側

    "workbench.editor.openPositioning": "left"

您可以透過拖放來重新排序索引標籤。

如果您希望編輯器索引標籤始終可見,可以將其釘選到編輯器索引標籤列。在自訂佈局文章中深入了解釘選索引標籤。

workbench.editor.showTabIndex Open in VS Code Open in VS Code Insiders 設定可讓您在索引標籤標頭中顯示每個索引標籤的索引。這使得使用 Ctrl (macOS 上為 Cmd) + 數字鍵盤快速鍵快速切換到特定索引標籤時,更容易看到要使用哪個數字。

預覽模式

當您在檔案總管檢視中單擊或選取檔案時,它會以預覽模式顯示並重複使用現有的索引標籤 (預覽索引標籤)。如果您正在快速瀏覽檔案,並且不希望每個已造訪的檔案都有自己的索引標籤,這會很有用。當您開始編輯檔案或使用連按兩下來從檔案總管開啟檔案時,該檔案會專門分配一個新的索引標籤。

預覽模式在索引標籤標題中以斜體表示

preview mode

如果您偏好不使用預覽模式並始終建立新索引標籤,您可以透過這些設定控制此行為

  • workbench.editor.enablePreview Open in VS Code Open in VS Code Insiders - 全域啟用或停用預覽編輯器
  • workbench.editor.enablePreviewFromQuickOpen Open in VS Code Open in VS Code Insiders - 從快速開啟開啟時啟用或停用預覽編輯器

自動換行索引標籤

為了顯示更多編輯器索引標籤,您可以使用自動換行索引標籤佈局,其中編輯器索引標籤會自動換行以填滿編輯器區域上方的多個列。透過工作區 > 編輯器:自動換行索引標籤 ( workbench.editor.wrapTabs Open in VS Code Open in VS Code Insiders ) 設定來啟用自動換行索引標籤。

Wrapped editor tabs filling two rows about the editor region

自訂索引標籤標籤

當您同時開啟多個同名檔案時,很難區分不同的索引標籤。為了解決這個問題,您可以為索引標籤套用自訂顯示標籤。您可以選擇要為工作區中的哪些檔案套用自訂標籤到索引標籤上。

若要啟用索引標籤的自訂顯示標籤,請設定 workbench.editor.customLabels.enabled Open in VS Code Open in VS Code Insiders 設定

    "workbench.editor.customLabels.enabled": true

您可以使用 workbench.editor.customLabels.patterns Open in VS Code Open in VS Code Insiders 設定,為索引標籤顯示標籤指定一個或多個命名模式。命名模式由兩個部分組成

  • 項目 - 一個Glob 模式,比對要套用自訂標籤的檔案路徑。例如,**/static/**/*.html
  • - 自訂標籤的範本。範本可以使用諸如 ${filename}${extname}${extname(N)}${dirname}${dirname(N)} 等變數,這些變數會動態替換為檔案路徑中的值。

以下範例顯示 /src/orders/index.html 檔案,其索引標籤標籤為 orders/index

    "workbench.editor.customLabels.patterns": {
        "**/src/**/index.html": "${dirname}/${filename}"
    }

Screenshot of Setting editor to enable and specify custom labels for tabs

以下範例使用 ${extname} 變數來處理檔案 tests/editor.test.ts

  • ${filename} => editor
  • ${extname} => test.ts
  • ${extname(0)} => ts
  • ${extname(1)} => test
  • ${extname(-1)} => test
  • ${extname(-2)} => ts
注意

自訂分頁標籤也會應用在「開啟的編輯器」檢視和 快速開啟 (⌘P (Windows、Linux Ctrl+P))。

格狀編輯器佈局

預設情況下,編輯器群組會以垂直欄位的方式排列。例如,當您分割編輯器時,它會在旁邊開啟另一個編輯器。您可以隨意將編輯器群組垂直或水平排列成任何您喜歡的佈局

為支援彈性佈局,您可以建立空的編輯器群組。預設情況下,關閉編輯器群組的最後一個編輯器也會關閉該群組本身,但您可以透過新的設定 workbench.editor.closeEmptyGroups: false 來改變此行為。

Grid Empty

檢視 > 編輯器佈局選單中,有一組預定義的編輯器佈局。

Grid Editor Layout Menu

預設情況下,並排開啟的編輯器 (例如,透過選取編輯器工具列上的分割編輯器動作) 會在作用中編輯器的右側開啟。如果您偏好在作用中編輯器下方開啟編輯器,請將 workbench.editor.openSideBySideDirection Open in VS Code Open in VS Code Insiders 設定為 down

有許多鍵盤指令可用來透過鍵盤調整編輯器佈局。如果您偏好使用滑鼠,可以透過拖曳來將編輯器分割到任何方向

提示

當您將滑鼠懸停在分割編輯器的工具列動作上時,按住 Alt 鍵,它會提供分割到另一個方向的選項。這是快速分割到右側或底部的方法。

Grid Alt Click

鍵盤快速鍵

以下是一些實用的鍵盤快速鍵,可讓您快速在編輯器和編輯器群組之間導覽。

  • ⌥⌘→ (Windows、Linux Ctrl+PageDown) - 移至右側編輯器。
  • ⌥⌘← (Windows、Linux Ctrl+PageUp) - 移至左側編輯器。
  • ⌃Tab (Windows、Linux Ctrl+Tab) - 開啟編輯器群組中最近使用清單中的上一個編輯器。
  • ⌘1 (Windows、Linux Ctrl+1) - 移至最左側編輯器群組。
  • ⌘2 (Windows、Linux Ctrl+2) - 移至中央編輯器群組。
  • ⌘3 (Windows、Linux Ctrl+3) - 移至最右側編輯器群組。
  • ⌘W (Windows Ctrl+F4、Linux Ctrl+W) - 關閉作用中編輯器。
  • ⌘K W (Windows、Linux Ctrl+K W) - 關閉編輯器群組中的所有編輯器。
  • ⌘K ⌘W (Windows、Linux Ctrl+K Ctrl+W) - 關閉所有編輯器。

如果您想要修改預設鍵盤快速鍵,請參閱鍵盤繫結以瞭解詳細資訊。

無索引標籤模式

如果您不喜歡使用分頁 (分頁標題),您可以將 workbench.editor.showTabs Open in VS Code Open in VS Code Insiders 設定為 singlenone 以完全停用分頁。

停用預覽模式

如果沒有分頁,Explorer 檢視的開啟的編輯器區段是快速進行檔案導覽的方法。然而,啟用預覽編輯器模式後,檔案不會新增到「開啟的編輯器」區段。您可以透過 workbench.editor.enablePreview Open in VS Code Open in VS Code Insiders workbench.editor.enablePreviewFromQuickOpen Open in VS Code Open in VS Code Insiders 設定來停用此功能。

使用鍵盤快速鍵導覽編輯器歷史記錄

您可以變更 Ctrl+Tab 的行為,讓它顯示歷史記錄中所有開啟的編輯器清單,而與作用中的編輯器群組無關。

編輯您的鍵盤快速鍵並新增以下內容

{ "key": "ctrl+tab", "command": "workbench.action.openPreviousEditorFromHistory" },
{ "key": "ctrl+tab", "command": "workbench.action.quickOpenNavigateNext", "when": "inQuickOpen" },

關閉整個群組而非單一編輯器

如果您喜歡 VS Code 在關閉一個編輯器時同時關閉整個群組的行為,您可以將以下內容繫結到您的鍵盤繫結中。

macOS

{ "key": "cmd+w", "command": "workbench.action.closeEditorsInGroup" }

Windows/Linux

{ "key": "ctrl+w", "command": "workbench.action.closeEditorsInGroup" }

視窗管理

VS Code 有各種選項可以控制 VS Code 視窗 (執行個體) 在會話之間如何開啟或還原。

設定 window.openFoldersInNewWindow Open in VS Code Open in VS Code Insiders window.openFilesInNewWindow Open in VS Code Open in VS Code Insiders 提供了配置是開啟新視窗還是重複使用上次作用中的視窗來開啟檔案或資料夾,可能的值為 defaultonoff

如果設定為 default,VS Code 會根據開啟請求的上下文來決定是重複使用還是開啟新視窗。將其切換為 onoff,以始終保持相同的行為。例如,如果您認為從檔案選單中選取檔案或資料夾應始終在新視窗中開啟,請將此設定為 on

注意

在某些情況下,此設定會被忽略,例如當您使用 -new-window-reuse-window 命令列選項時。

設定 window.restoreWindows Open in VS Code Open in VS Code Insiders 會通知 VS Code 如何還原您上次會話中開啟的視窗。預設情況下,VS Code 會還原您上次會話中所有工作過的視窗 (設定:all)。將此設定變更為 none 以永不重新開啟任何視窗,並始終以空的 VS Code 執行個體啟動。將其變更為 one 以重新開啟您上次工作過的視窗,或變更為 folders 以僅還原已開啟資料夾的視窗。

後續步驟

現在您已瞭解 VS Code 的整體佈局,請參閱以下文章來依您喜歡的工作方式自訂編輯器

常見問題

如何變更縮排參考線的顏色?

縮排參考線的顏色是可以自訂的,就像大多數 VS Code 使用者介面元素一樣。若要自訂作用中顏色佈景主題的縮排參考線顏色,請使用 workbench.colorCustomizations Open in VS Code Open in VS Code Insiders 設定並修改 editorIndentGuide.background 的值。

例如,若要讓縮排參考線顯示亮藍色,請將以下內容新增到您的 settings.json

"workbench.colorCustomizations": {
    "editorIndentGuide.background": "#0000ff"
}

我可以在 Explorer 檢視中隱藏「開啟的編輯器」區段嗎?

是的,您可以使用 Explorer 中的「檢視」選單,並切換開啟的編輯器選單項目來顯示或隱藏「開啟的編輯器」區段。

Explorer menu to enable or disable views in the Explorer

© . This site is unofficial and not affiliated with Microsoft.