使用者介面

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

基本佈局

VS Code 具備簡單且直觀的佈局,最大化了編輯器區域的空間,同時為瀏覽和存取資料夾或專案的完整內容留出了充足的空間。使用者介面分為六個主要區域:

  • 編輯器 (Editor) - 編輯檔案的主要區域。您可以根據需要垂直或水平並排開啟任意數量的編輯器。
  • 主要側邊欄 (Primary Side Bar) - 包含像「檔案總管」這樣的不同檢視,協助您進行專案工作。
  • 次要側邊欄 (Secondary Side Bar) - 位於主要側邊欄的對面。預設包含「聊天」(Chat) 檢視。您可以將檢視從主要側邊欄拖放到次要側邊欄以移動它們。
  • 狀態列 (Status Bar) - 顯示有關已開啟專案和正在編輯檔案的資訊。
  • 活動列 (Activity Bar) - 位於最左側。讓您可以在不同的檢視之間切換,並提供額外的環境特定指標,例如在啟用 Git 時顯示外發變更的數量。您可以更改活動列的位置。
  • 面板 (Panel) - 編輯器區域下方用於顯示檢視的額外空間。預設包含輸出、偵錯資訊、錯誤與警告,以及整合式終端機。面板也可以移動到左側或右側,以獲得更多的垂直空間。

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

每次啟動 VS Code 時,它都會以您上次關閉時的狀態開啟。資料夾、佈局和已開啟的檔案都會被保留。

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

提示

您可以透過在活動列上按右鍵並選擇將主要側邊欄移至右側,將主要側邊欄移動到右側,或切換其可見度(⌘B (Windows, Linux Ctrl+B))。

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

並排編輯

您可以根據需要垂直或水平並排開啟任意數量的編輯器。如果您已經開啟了一個編輯器,有多種方式可以在旁邊開啟另一個編輯器:

  • 按住 Alt 並在檔案總管檢視中選擇一個檔案。
  • 使用 ⌘\ (Windows, Linux Ctrl+\) 將作用中的編輯器分割成兩個。
  • 在檔案總管的檔案關聯式選單中選擇開啟至側邊 (Open to the Side)⌃Enter (Windows, Linux Ctrl+Enter))。
  • 選擇編輯器右上角的分割編輯器 (Split Editor) 按鈕。
  • 將檔案拖放到編輯器區域的任何一側。拖曳時按住 Ctrl(macOS 上為 Option)可複製索引標籤,而不是移動它。
  • 快速開啟 (Quick Open)⌘P (Windows, Linux Ctrl+P))檔案清單中按下 ⌃Enter (Windows, Linux Ctrl+Enter)

Side by Side editing

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

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

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

提示

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

編輯器群組

當您分割編輯器時(使用分割編輯器開啟至側邊指令),會建立一個新的編輯器區域(編輯群組),其中可以包含一組項目。您可以根據需要垂直或水平並排開啟任意數量的編輯器群組。

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

tabs editor groups

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

注意

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

群組內分割

您可以使用檢視:群組內分割編輯器 (View: Split Editor in Group) 指令(⌘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 視窗中拖出,即可在浮動視窗中開啟。或者,使用編輯器索引標籤上的移至新視窗複製到新視窗關聯選單選項。

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

若要深入了解浮動視窗,請閱讀 自訂佈局 文章中的章節。

強制回應 (Modal) 編輯器

VS Code 中的某些組態編輯器會以置中的強制回應疊加層顯示在編輯器區域上方,而不是作為一般的編輯器索引標籤。這些強制回應編輯器包括:

  • 設定 (Settings) 編輯器
  • 鍵盤快速鍵 (Keyboard Shortcuts) 編輯器
  • 設定檔 (Profiles) 編輯器
  • 工作區信任 (Workspace Trust) 編輯器
  • 語言模型 (Language Models) 編輯器
  • 擴充功能 (Extensions) 編輯器

您可以透過在外部點擊、按下 Escape 鍵或選擇關閉按鈕來關閉強制回應編輯器。您也可以將其最大化以填滿編輯器區域,或將其移回主視窗作為一般的編輯器索引標籤。

注意

您可以使用 workbench.editor.useModal 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定來控制此行為。設定為 off 可將編輯器一律作為一般索引標籤開啟,some 可僅將組態編輯器作為強制回應疊加層開啟(預設),或 all 可將所有編輯器以強制回應疊加層開啟。

小地圖

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

如果您在編輯器中有 摺疊標記(例如 //#region 註解),則迷你地圖會顯示摺疊標記名稱。摺疊標記是語言特定的,請查看您的語言適用哪些標記。

minimap

提示

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

懸浮捲動

黏滯捲動 (Sticky Scroll) 會在編輯器頂部顯示目前可見的巢狀作用域的起始行。它透過指示您在檔案中的位置來促進導覽,並讓您快速跳轉回目前作用域的頂部。

stickyScroll

提示

您可以使用 editor.stickyScroll.enabled 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定來啟用或停用黏滯捲動。

黏滯捲動使用數種不同的內容模型來建立其標題。您可以選擇大綱提供者模型、摺疊提供者模型和縮排模型,以決定在黏滯捲動區域中顯示哪些行。如果目前的語言無法使用某個模型,VS Code 會依上述順序改用下一個模型。最初使用的預設模型來自 editor.stickyScroll.defaultModel 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定。

縮排參考線 (Indent guides)

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

麵包屑

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

Breadcrumbs

您可以使用檢視 > 外觀 > 切換麵包屑選單項目或檢視:切換麵包屑指令來停用麵包屑。有關麵包屑功能的更多資訊(例如如何自訂其外觀),請參閱 程式碼導覽 文章中的 麵包屑 章節。

檔案總管檢視

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

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

  • 建立、刪除和重新命名檔案與資料夾。
  • 透過拖放移動檔案和資料夾。
  • 使用關聯式選單探索所有選項。
提示

您可以將檔案從 VS Code 外部拖放到檔案總管檢視中來複製它們。如果檔案總管是空的,VS Code 會直接開啟這些檔案。您也可以將檔案從 VS Code 外部複製並貼上到檔案總管檢視中。使用 explorer.autoOpenDroppedFile 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定,您可以設定是否自動開啟檔案。

VS Code 與您可能使用的其他工具搭配得很好,特別是命令列工具。如果您想在目前於 VS Code 中開啟的資料夾內容中執行命令列工具,請在資料夾上按右鍵並選擇在整合式終端機中開啟

您也可以透過在檔案或資料夾上按右鍵,並選擇 Windows 上的在檔案總管中顯示、macOS 上的在 Finder 中顯示或 Linux 上的開啟所在資料夾,來導覽至原生作業系統檔案瀏覽器中的檔案或資料夾位置。

提示

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

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

您也可以透過啟用 explorer.excludeGitIgnore 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定,隱藏 .gitignore 檔案中指定的檔案和資料夾。啟用後,.gitignore 模式在 Windows 和 macOS 上套用大小寫不敏感匹配,在 Linux 上套用大小寫敏感匹配。例如,.gitignore 中的 node_modules 模式在 Windows 和 macOS 上會匹配 node_modules/Node_Modules/NODE_MODULES/ 以及其他大小寫變體,但在 Linux 上僅匹配精確匹配項。

imageCarousel.explorerContextMenu.enabled 在 VS Code 中開啟 在 VS Code Insiders 中開啟 (實驗性) 啟用時,您可以在檔案總管中對影像或影片檔案或資料夾按右鍵,並選擇在輪播中開啟影像,以在專屬的輪播檢視中瀏覽媒體檔案。這也支援多重選取。

提示

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

多重選取

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

注意

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

"workbench.list.multiSelectModifier": "alt"

進階樹狀導覽

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

按下篩選按鈕可在兩種模式之間切換:反白和篩選。按下 Down 鍵可讓您聚焦於第一個匹配的元素,並導覽至後續的匹配元素。在反白模式下,資料夾上會顯示一個徽章,表示它們包含匹配的檔案。

按下模糊匹配 (Fuzzy Match) 按鈕可在精確匹配和模糊匹配之間切換,在此模式下,您可以輸入一連串字元來匹配檔案或資料夾名稱的任何部分。

Filtering files in the File Explorer

大綱檢視 (Outline view)

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

Outline view

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

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

Markdown Outline view

有數種大綱檢視 設定。搜尋以 outline. 開頭的設定,以配置在大綱檢視中顯示哪些資訊。

時間軸檢視

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

Timeline view

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

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

本機檔案歷程

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

從一個項目中,您可以:

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

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

您可以針對使用本機歷程設定以下參數:

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

提交歷程

VS Code 的內建 Git 支援提供指定檔案的 Git 提交歷程。選擇一個提交將開啟該提交所引入變更的差異檢視。當您在提交上按右鍵時,您會獲得複製提交 ID複製提交訊息的選項。

當您在歷程中的提交上按右鍵時,您可以:

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

您可以針對使用 Git 歷程設定以下參數:

  • git.timeline.date 在 VS Code 中開啟 在 VS Code Insiders 中開啟 - 顯示檔案提交的提交日期或作者日期

檢視

檔案總管檢視只是 VS Code 中可用的檢視之一。還有其他檢視用於:

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

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

views

您可以透過在活動列上按右鍵來顯示或隱藏檢視,並透過拖放重新排列它們。在檔案總管檢視內,您可以透過 '...' 選單顯示或隱藏區段,或拖放區段以重新排列它們。

命令面板

VS Code 同樣可透過鍵盤輕鬆存取。最重要要記住的組合鍵是 ⇧⌘P (Windows, Linux Ctrl+Shift+P),這會調出命令選擇區 (Command Palette)。從這裡,您可以存取 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 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定從 classic 變更為 togglehidden,來隱藏 Windows 和 Linux 上的功能表列。toggle 設定表示按一下 Alt 鍵即可再次顯示功能表列。

您也可以使用檢視:切換功能表列指令隱藏 Windows 和 Linux 上的功能表列。此指令會將 window.menuBarVisibility 在 VS Code 中開啟 在 VS Code Insiders 中開啟 classic 變更為 compact,導致功能表列移入活動列中。若要將功能表列恢復到 classic 位置,您可以再次執行檢視:切換功能表列指令。

設定

大多數編輯器組態都是在設定中管理的,您可以直接修改它們。您可以透過使用者設定進行全域設定,或透過工作區設定針對每個專案/資料夾進行設定。設定值儲存在 settings.json 檔案中。

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

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

workspace settings

注意

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

禪模式 (Zen Mode)

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

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

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

使用「請勿打擾」模式減少通知

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

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

Notifications center

找到打叉的鈴鐺圖示以存取選單,您可以在該選單中選擇性地停用來自擴充功能的通知,或啟用全域「請勿打擾」模式以停用所有通知。

Notifications do not disturb menu

注意

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

置中編輯器佈局

置中編輯器佈局讓您可以將編輯器區域置中對齊。這在大型螢幕上使用單一編輯器時非常有用。您可以使用側邊框來調整檢視大小(按住 Alt 鍵可獨立移動兩側)。

索引標籤 (Tabs)

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

tabs hero

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

當開啟的項目多到無法容納在標題區域時,您可以使用檔案總管檢視中的已開啟編輯器區段(透過 ... 按鈕存取)來顯示索引標籤項目的下拉式清單。

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

如果您不想使用索引標籤,可以透過將 workbench.editor.showTabs 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定設定為 single 來停用該功能。

    "workbench.editor.showTabs": "single"

請參閱下方的章節,以優化 VS Code 以進行 不使用索引標籤的工作

提示

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

索引標籤順序

預設情況下,新索引標籤會加入到現有索引標籤的右側。您可以使用 workbench.editor.openPositioning 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定來控制新索引標籤出現的位置。

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

    "workbench.editor.openPositioning": "left"

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

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

workbench.editor.showTabIndex 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定可讓您在索引標籤標題中顯示每個索引標籤的索引。這使您可以輕鬆查看要與 Ctrl(macOS 上為 Cmd)+ 數字鍵盤快速鍵配合使用的數字,以快速切換到特定索引標籤。

預覽模式

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

預覽模式由索引標籤標題中的斜體表示。

preview mode

如果您傾向於不使用預覽模式並始終建立新索引標籤,可以使用以下設定控制此行為:

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

換行索引標籤

若要查看更多編輯器索引標籤,您可以使用換行索引標籤佈局,其中編輯器索引標籤會換行以填滿編輯器區域上方的多行。使用工作台 > 編輯器:換行索引標籤 workbench.editor.wrapTabs 在 VS Code 中開啟 在 VS Code Insiders 中開啟 )設定來啟用換行索引標籤。

Wrapped editor tabs filling two rows about the editor region

自訂索引標籤標籤

當您同時開啟多個名稱相同的檔案時,區分不同的索引標籤可能會很困難。為了協助解決此問題,您可以將自訂顯示標籤套用到索引標籤。您可以選擇要對工作區中的哪些檔案套用自訂索引標籤標籤。

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

    "workbench.editor.customLabels.enabled": true

您可以使用 workbench.editor.customLabels.patterns 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定為索引標籤顯示標籤指定一個或多個命名模式。名稱模式由兩個元件組成:

  • 項目 (Item) - 一個 Glob 模式,用於匹配要套用自訂標籤的檔案路徑。例如:**/static/**/*.html
  • 值 (Value) - 自訂標籤的範本。範本可以使用變數,例如 ${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

以下範例針對 tests/editor.test.ts 檔案使用 ${extname} 變數:

  • ${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 在 VS Code 中開啟 在 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) - 關閉所有編輯器。

如果您想要修改預設的鍵盤快速鍵,請參閱鍵盤快速鍵 (Key Bindings) 以取得詳細資訊。

不使用索引標籤進行工作

如果您偏好不使用索引標籤(分頁標題),可以透過將 workbench.editor.showTabs 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定為 singlenone 來完全停用索引標籤。

停用預覽模式

在沒有索引標籤的情況下,「檔案總管」檢視中的「開啟的編輯器」區段是快速進行檔案導覽的方式。然而,若啟用了預覽編輯器模式,檔案將不會被新增至「開啟的編輯器」區段。您可以透過 workbench.editor.enablePreview 在 VS Code 中開啟 在 VS Code Insiders 中開啟 workbench.editor.enablePreviewFromQuickOpen 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定來停用此功能。

使用鍵盤快速鍵來瀏覽編輯器歷程記錄

您可以變更 Ctrl+Tab 的設定,使其顯示歷程記錄中所有已開啟編輯器的清單,而不受限於作用中的編輯器群組。

編輯您的鍵盤快速鍵並加入下列內容

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

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

如果您偏好 VS Code 在關閉一個編輯器時同時關閉整個群組的行為,您可以在鍵盤快速鍵 (keybindings) 中綁定下列設定。

macOS

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

Windows/Linux

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

視窗管理

VS Code 提供了多種選項來控制 VS Code 視窗(執行個體)應如何在工作階段之間開啟或還原。

window.openFoldersInNewWindow 在 VS Code 中開啟 在 VS Code Insiders 中開啟 window.openFilesInNewWindow 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定可用於配置開啟新視窗,或是重複使用上一個作用中的視窗來開啟檔案或資料夾,可能的數值為 defaultonoff

若設定為 default,VS Code 會根據開啟請求發出的上下文來決定要重複使用視窗還是開啟新視窗。將其切換為 onoff 以保持行為一致。例如,如果您認為從「檔案」功能表挑選檔案或資料夾時應該一律在新視窗中開啟,請將其設定為 on

注意

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

window.restoreWindows 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定會告知 VS Code 如何還原前一個工作階段所開啟的視窗。預設情況下,VS Code 會還原您在上一個工作階段中操作的所有視窗(設定:all)。將此設定變更為 none 可永遠不重新開啟任何視窗,並一律以空白的 VS Code 執行個體開始。將其變更為 one 可重新開啟您上一次操作的視窗,或變更為 folders 以僅還原開啟了資料夾的視窗。

後續步驟

現在您已經了解 VS Code 的整體配置,請參考下列文章,開始將編輯器自訂為您喜歡的工作方式:

常見問題

如何變更縮排輔助線的顏色?

與大多數 VS Code 使用者介面元素一樣,縮排輔助線的顏色是可以自訂的。若要為您目前使用的色彩主題自訂縮排輔助線顏色,請使用 workbench.colorCustomizations 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定並修改 editorIndentGuide.background 的值。

例如,若要將縮排輔助線改為亮藍色,請將下列內容新增至您的 settings.json

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

我可以隱藏檔案總管中的「開啟的編輯器」區段嗎?

可以,您可以使用檔案總管中的「檢視」功能表,透過切換「開啟的編輯器」功能表項目來顯示或隱藏該區段。

Explorer menu to enable or disable views in the Explorer

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