使用者介面
Visual Studio Code 的核心是一個程式碼編輯器。與許多其他程式碼編輯器一樣,VS Code 採用了常見的使用者介面和佈局:左側是資源管理器,顯示您可以訪問的所有檔案和資料夾;右側是編輯器,顯示您已開啟檔案的內容。
基本佈局
VS Code 擁有一個簡潔直觀的佈局,它最大化了為編輯器提供的空間,同時為瀏覽和訪問資料夾或專案的完整上下文留出了充足的空間。使用者介面分為六個主要區域:
- 編輯器 - 編輯檔案的主要區域。您可以根據需要並排開啟任意數量的編輯器,支援垂直和水平排列。
- 主側邊欄 - 包含不同的檢視,如資源管理器,以在您處理專案時提供幫助。
- 副側邊欄 - 位於主側邊欄的對面。預設情況下,包含“聊天”檢視。將檢視從主側邊欄拖放到副側邊欄即可移動它們。
- 狀態列 - 顯示有關已開啟專案和您正在編輯的檔案的資訊。
- 活動欄 - 位於最左側。讓您可以在不同檢視之間切換,併為您提供額外的上下文特定指示器,例如在啟用 Git 時顯示傳出更改的數量。您可以更改活動欄的位置。
- 面板 - 編輯器區域下方的一個額外空間,用於顯示檢視。預設情況下,它包含輸出、除錯資訊、錯誤和警告,以及一個整合終端。面板也可以移動到左側或右側,以獲得更多的垂直空間。
每次啟動 VS Code 時,它都會以您上次關閉時的相同狀態開啟。資料夾、佈局和已開啟的檔案都會被保留。
每個編輯器中開啟的檔案都在編輯器區域頂部的選項卡式標題(Tabs)中顯示。要了解有關選項卡式標題的更多資訊,請參閱選項卡部分。
您可以透過右鍵單擊活動欄並選擇向右移動主側邊欄 (Move Primary Side Bar Right) 將主側邊欄移動到右側,或切換其可見性(⌘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)。
當您開啟另一個檔案時,活動的編輯器將顯示該檔案的內容。如果您有兩個並排的編輯器,並且想在右側編輯器中開啟檔案 'foo.cs',請確保在開啟 'foo.cs' 檔案之前,該編輯器是活動的(透過在其中單擊)。
預設情況下,編輯器會在活動編輯器的右側開啟。您可以透過 workbench.editor.openSideBySideDirection 設定更改此行為,讓新編輯器在活動編輯器的下方開啟。
當您開啟多個編輯器時,可以透過按住 Ctrl 鍵(macOS 上為 Cmd 鍵)並按 1、2 或 3 來快速切換。
您可以調整編輯器的大小並重新排序。拖放編輯器標題區域以重新定位或調整編輯器大小。
編輯器組
當您拆分編輯器(使用拆分編輯器或在側邊開啟命令)時,會建立一個新的編輯器區域(編輯器組),它可以容納一組專案。您可以根據需要並排開啟任意數量的編輯器組,支援垂直和水平排列。
您可以在資源管理器檢視頂部的開啟的編輯器 (Open Editors) 部分清楚地看到這些(在資源管理器檢視中切換... > 開啟的編輯器)。
您可以拖放工作臺上的編輯器組,在組之間移動單個選項卡,以及快速關閉整個組(全部關閉)。
無論您是否啟用了選項卡,VS Code 都會使用編輯器組。在沒有選項卡的情況下,編輯器組是您開啟專案的一個堆疊,最近選擇的專案在編輯器窗格中可見。
在組內拆分
您可以使用檢視:在組內拆分編輯器 (View: Split Editor in Group) 命令(⌘K ⇧⌘\ (Windows、Linux 為 Ctrl+K Ctrl+Shift+\))拆分當前編輯器,而無需建立新的編輯器組。要了解有關此編輯器模式以及在兩側之間導航的特定命令的更多資訊,您可以閱讀自定義佈局文章中的部分。
浮動視窗
您可以將編輯器、終端或特定檢視移動到它們自己的浮動視窗中。如果您有多顯示器設定並希望將檔案在不同的顯示器上保持開啟狀態,這將非常有用。
將編輯器選項卡從當前 VS Code 視窗中拖出,以在浮動視窗中開啟它。或者,使用編輯器選項卡上下文選單中的移動到新視窗 (Move into New Window) 或複製到新視窗 (Copy into New Window) 選項。
要將浮動視窗固定在螢幕頂部,請從其標題欄中選擇設定總在最前 (Set Always on Top) 選項(圖釘圖示)。
要了解有關浮動視窗的更多資訊,請閱讀自定義佈局文章中的部分。
縮圖
縮圖(程式碼大綱)為您提供了原始碼的高階概覽,這對於快速導航和程式碼理解非常有用。檔案的縮圖顯示在編輯器的右側。您可以選擇或拖動陰影區域以快速跳轉到檔案中的不同部分。
如果您在編輯器中有摺疊標記,例如 //#region
或 MARK:
註釋,那麼縮圖會顯示摺疊標記的名稱。
您可以透過在使用者或工作區設定中分別設定 "editor.minimap.side": "left"
或 "editor.minimap.enabled": false
來將縮圖移動到左側或完全停用它。
粘滯滾動
粘性滾動(Sticky Scroll)在編輯器頂部顯示當前可見巢狀範圍的起始行。它透過指示您在檔案中的位置來方便導航,並讓您快速跳回到當前範圍的頂部。
您可以使用 editor.stickyScroll.enabled 設定來啟用/停用粘性滾動。
粘性滾動使用幾種不同的內容模型來建立其標題。可以在大綱提供程式模型、摺疊提供程式模型和縮排模型之間進行選擇,以確定在粘性滾動區域中顯示哪些行。如果當前語言的模型不可用,VS Code 將回退到上述順序中的下一個模型。最初使用的預設模型來自 editor.stickyScroll.defaultModel 設定。
縮排參考線
編輯器顯示縮排參考線(垂直線),幫助您快速檢視匹配的縮排級別。如果您想停用縮排參考線,可以在使用者或工作區設定中將 editor.guides.indentation 設定為 false
。
麵包屑導航
編輯器頂部有一個導航欄,也稱為麵包屑導航。麵包屑導航始終顯示檔案路徑,並且如果當前檔案型別支援符號,則顯示到游標位置的符號路徑。麵包屑導航使您能夠快速在資料夾、檔案和符號之間導航。
您可以透過檢視 > 外觀 > 切換麵包屑導航 (View > Appearance > Toggle Breadcrumbs) 選單項或檢視:切換麵包屑導航 (View: Toggle Breadcrumbs) 命令停用麵包屑導航。有關麵包屑導航功能的更多資訊,例如如何自定義其外觀,請參閱程式碼導航文章的麵包屑導航部分。
資源管理器檢視
資源管理器檢視用於瀏覽、開啟和管理專案中的檔案和資料夾。VS Code 是基於檔案和資料夾的,您可以透過在 VS Code 中開啟檔案或資料夾來立即開始。
在 VS Code 中開啟資料夾後,該資料夾的內容會顯示在資源管理器檢視中。您可以在這裡做很多事情:
- 建立、刪除和重新命名檔案和資料夾。
- 透過拖放移動檔案和資料夾。
- 使用上下文選單探索所有選項。
您可以將檔案從 VS Code 外部拖放到資源管理器檢視中以複製它們。如果資源管理器為空,VS Code 將改為開啟這些檔案。您也可以將檔案從 VS Code 外部複製貼上到資源管理器檢視中。透過 explorer.autoOpenDroppedFile 設定,您可以配置是否自動開啟檔案。
VS Code 與您可能使用的其他工具(尤其是命令列工具)配合得很好。如果您想在 VS Code 當前開啟的資料夾的上下文中執行命令列工具,請右鍵單擊該資料夾並選擇在整合終端中開啟 (Open in Integrated Terminal)。
您還可以透過右鍵單擊檔案或資料夾並選擇在 Windows 上的在檔案資源管理器中顯示 (Reveal in File Explorer)、在 macOS 上的在訪達中顯示 (Reveal in Finder) 或在 Linux 上的開啟所在資料夾 (Open Containing Folder) 來導航到檔案或資料夾在本機作業系統檔案資源管理器中的位置。
鍵入 ⌘P (Windows、Linux 為 Ctrl+P) (快速開啟) 以透過檔名快速搜尋和開啟檔案。
預設情況下,VS Code 會從資源管理器檢視中排除某些資料夾,例如 .git
。使用 files.exclude 設定來配置從資源管理器檢視中隱藏檔案和資料夾的規則。
您可以隱藏派生的資原始檔,例如 Unity 中的 *.meta
或 TypeScript 專案中的 *.js
。對於 Unity,要排除 *.cs.meta
檔案,選擇的模式將是:"**/*.cs.meta": true
。對於 TypeScript,您可以透過以下方式排除為 TypeScript 檔案生成的 JavaScript:"**/*.js": {"when": "$(basename).ts"}
。
多選
您可以在資源管理器檢視和開啟的編輯器部分選擇多個檔案,以對多個專案執行操作(刪除、拖放或在側邊開啟)。按住 Ctrl(macOS 上為 Cmd)並選擇單個檔案,或按住 Shift 選擇一系列檔案。如果您選擇兩個專案,現在還可以使用上下文選單的比較所選內容 (Compare Selected) 命令來快速比較兩個檔案。
在早期的 VS Code 版本中,按住 Ctrl(macOS 上為 Cmd)鍵單擊會開啟一個檔案到側邊的新編輯器組中。如果您仍然想要這種行為,可以使用 workbench.list.multiSelectModifier 設定將多選更改為使用 Alt 鍵。
"workbench.list.multiSelectModifier": "alt"
高階樹形導航
您可以在資源管理器檢視中篩選檔案和資料夾。將焦點放在資源管理器檢視上,按 ⌥⌘F (Windows、Linux 為 Ctrl+Alt+F) 開啟查詢控制元件,並鍵入您想要匹配的檔案或資料夾名稱的一部分。此導航功能適用於 VS Code 中的所有樹形檢視。
按篩選按鈕可在兩種模式之間切換:高亮顯示和篩選。按 Down 鍵可讓您將焦點放在第一個匹配的元素上,並導航到後續的匹配元素。在高亮顯示模式下,資料夾上會顯示一個徽章,以指示它們包含匹配的檔案。
按模糊匹配按鈕可在精確匹配和模糊匹配之間切換,您可以在其中鍵入一系列字元以匹配檔案或資料夾名稱的任何部分。
大綱檢視
大綱檢視是資源管理器檢視底部的一個獨立部分。展開後,它會顯示當前活動編輯器的符號樹。
大綱檢視有不同的排序方式模式,可選的游標跟蹤,並支援常見的開啟手勢。它還包括一個用於查詢或篩選的輸入框。錯誤和警告也會顯示在大綱檢視中,讓您一眼就能看到問題的位置。
對於符號,該檢視依賴於您安裝的擴充套件為不同檔案型別計算的資訊。例如,內建的 Markdown 支援為 Markdown 檔案的符號返回 Markdown 標題層次結構。
有幾個大綱檢視設定。搜尋以 outline.
開頭的設定,以配置在大綱檢視中顯示哪些資訊。
時間線檢視
時間線檢視,可從檔案資源管理器底部訪問,是一個統一的檢視,用於視覺化檔案的事件歷史。例如,您可以在時間線檢視中檢視 Git 提交或本地檔案儲存。
時間線檢視工具欄中的篩選操作使您能夠在原始碼管理事件和本地檔案事件之間進行篩選。
本地檔案歷史記錄
根據您的設定,每次儲存編輯器時,都會向列表中新增一個新條目。每個本地歷史記錄條目都包含建立條目時檔案的完整內容,並且在某些情況下,可以提供更多的語義資訊(例如,指示一次重構)。
您可以從一個條目中:
- 比較與本地檔案或先前條目的更改。
- 恢復內容。
- 刪除或重新命名條目。
如果您不小心刪除了一個檔案,您可以透過在時間線檢視中使用 ... > 本地歷史記錄:查詢要恢復的條目 (Local History: Find Entry to Restore) 操作,然後從快速選擇中選擇您的檔案,從本地歷史記錄中恢復它。
您可以配置這些設定來處理本地歷史記錄:
- workbench.localHistory.enabled - 啟用或停用本地歷史記錄(預設:true)
- workbench.localHistory.maxFileSize - 建立本地歷史記錄條目時的檔案大小限制(預設:256 KB)
- workbench.localHistory.maxFileEntries - 每個檔案的本地歷史記錄條目限制(預設:50)
- workbench.localHistory.exclude - 用於從本地歷史記錄中排除某些檔案的 glob 模式
- workbench.localHistory.mergeWindow - 在此時間間隔(秒)內,後續更改將新增到本地檔案歷史記錄的最後一個條目中(預設:10秒)
提交歷史
VS Code 的內建 Git 支援提供了指定檔案的 Git 提交歷史。選擇一個提交將開啟一個差異檢視,顯示該提交引入的更改。當您右鍵單擊一個提交時,您會得到複製提交 ID (Copy Commit ID) 和複製提交訊息 (Copy Commit Message) 的選項。
當您在歷史記錄中右鍵單擊一個提交時,您可以:
- 開啟更改 (Open Changes) - 開啟一個差異檢視,顯示檔案中的更改。
- 檢視提交 (View Commit) - 開啟一個多檔案差異檢視,以檢視提交中所有檔案的更改。
- 選擇以進行比較 (Select for Compare) - 選擇一個條目以與另一個條目進行比較。
- 複製提交 ID (Copy Commit ID) - 將提交 ID 複製到剪貼簿。
- 複製提交訊息 (Copy Commit Message) - 將提交訊息複製到剪貼簿。
您可以配置此設定以處理 Git 歷史記錄:
- git.timeline.date - 顯示檔案提交的提交日期或作者日期
檢視
資源管理器檢視只是 VS Code 中可用的檢視之一。還有以下檢視:
- 搜尋 - 在您開啟的資料夾中提供全域性搜尋和替換。
- 原始碼管理 - VS Code 預設包含 Git 原始碼管理。
- 執行 - VS Code 的執行和除錯檢視顯示變數、呼叫堆疊和斷點。
- 擴充套件 - 在 VS Code 中安裝和管理您的擴充套件。
- 自定義檢視 - 由擴充套件貢獻的檢視。
您可以使用檢視:開啟檢視 (View: Open View) 命令開啟任何檢視。
您可以透過右鍵單擊活動欄來顯示或隱藏檢視,並透過拖放來重新排序它們。在資源管理器檢視中,您可以透過“...”選單顯示或隱藏各個部分,或透過拖放來重新排序它們。
命令面板
VS Code 同樣可以透過鍵盤訪問。最重要的組合鍵是 ⇧⌘P (Windows、Linux 為 Ctrl+Shift+P),它會調出命令面板。從這裡,您可以訪問 VS Code 內的所有功能,包括最常用操作的鍵盤快捷鍵。
命令面板提供了對許多命令的訪問。您可以使用同一個互動式視窗執行編輯器命令、開啟檔案、搜尋符號以及檢視檔案的快速大綱。以下是一些提示:
- ⌘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) 使您能夠導航到檔案中的特定行
在輸入欄位中鍵入 ?
以獲取可以從命令面板執行的可用命令列表。
您可以透過用滑鼠游標抓住命令面板的頂部邊緣並將其拖到其他地方來移動命令面板。您還可以選擇標題欄中的自定義佈局控制元件,然後選擇預配置的快速輸入位置之一。
配置編輯器
VS Code 為您提供了許多配置編輯器的選項。從檢視 > 外觀 (View > Appearance) 選單中,您可以隱藏或切換使用者介面的各個部分,例如側邊欄、狀態列和活動欄。
隱藏選單欄(Windows、Linux)
您可以透過將 window.menuBarVisibility 設定從 classic
更改為 toggle
或 hidden
來隱藏 Windows 和 Linux 上的選單欄。設定為 toggle
意味著再次按下 Alt 鍵會顯示選單欄。
您還可以使用檢視:切換選單欄 (View: Toggle Menu Bar) 命令在 Windows 和 Linux 上隱藏選單欄。此命令會將 window.menuBarVisibility 從 classic
設定為 compact
,從而導致選單欄移動到活動欄中。要將選單欄恢復到 classic
位置,您可以再次執行檢視:切換選單欄命令。
設定
大多數編輯器配置都在設定中管理,您可以直接修改它們。您可以透過使用者設定全域性設定選項,也可以透過工作區設定為每個專案/資料夾設定選項。設定值儲存在 settings.json
檔案中。
您可以在設定編輯器中檢視和編輯設定(選擇 檔案 > 首選項 > 設定,或按 ⌘, (Windows、Linux 為 Ctrl+,))。使用使用者和工作區選項卡在使用者設定和工作區設定之間切換。您可以使用頂部的搜尋框篩選設定。
或者,您可以直接在 settings.json
檔案中修改使用者設定。使用首選項:開啟使用者設定 (JSON) 命令開啟 settings.json
檔案。對於工作區設定,請開啟工作區中 .vscode
資料夾下的 settings.json
檔案。
工作區設定會覆蓋使用者設定,並且對於在團隊之間共享特定於專案的設定非常有用。
禪模式
禪模式透過隱藏除編輯器之外的所有 UI 元素、將 VS Code 切換到全屏並居中編輯器,讓您專注於程式碼。可以使用檢視 > 外觀 > 禪模式 (View > Appearance > Zen Mode) 選單、在命令面板中的檢視:切換禪模式 (View: Toggle Zen Mode) 或快捷鍵 ⌘K Z (Windows、Linux 為 Ctrl+K Z) 來切換禪模式。雙擊 Esc 鍵退出禪模式。可以透過 zenMode.fullScreen 停用向全屏的過渡。
禪模式可以透過以下設定進一步調整:
- zenMode.hideActivityBar - 隱藏活動欄。預設值為
true
。 - zenMode.hideStatusBar - 隱藏狀態列。預設值為
true
。 - zenMode.hideLineNumbers - 隱藏行號。預設值為
true
。 - zenMode.showTabs - 控制是顯示多個、單個還是不顯示編輯器選項卡。預設值為
multiple
。 - zenMode.fullScreen - 將工作臺置於全屏顯示。預設值為
true
。 - zenMode.restore - 在重新啟動時恢復禪模式。預設值為
true
。 - zenMode.centerLayout - 使用居中編輯器佈局。預設值為
true
。 - zenMode.silentNotifications - 不顯示通知。預設值為
true
。
透過“請勿打擾”模式減少通知
如果您被彈出的通知淹沒,有一種方法可以減少通知,無論是針對所有通知,還是針對特定擴充套件的通知。
選擇狀態列中的鈴鐺圖示以開啟通知區域。這是一個您可以隨時訪問所有通知的地方,即使您已啟用“請勿打擾”模式。
找到帶有刪除線的鈴鐺圖示,可以訪問一個選單,您可以在其中有選擇地停用來自擴充套件的通知,或啟用全域性“請勿打擾”模式以停用所有通知。
全域性“請勿打擾”模式也會隱藏錯誤通知,而特定於擴充套件的篩選器仍然允許錯誤通知顯示。
居中編輯器佈局
居中編輯器佈局允許您將編輯器區域居中對齊。這在大型顯示器上使用單個編輯器時非常有用。您可以使用側邊框調整檢視大小(按住 Alt
鍵可獨立移動兩側)。
選項卡
VS Code 在編輯器上方的標題區域使用選項卡(選項卡式標題)顯示開啟的專案。當您開啟一個檔案時,會為該檔案新增一個新選項卡。選項卡可讓您在專案之間快速導航。
您可以拖放選項卡以重新排序。要一次對多個選項卡執行操作,請按住 Ctrl 鍵(在 macOS 上為 Cmd 鍵)並選擇要操作的選項卡。要選擇一系列選項卡,請按住 Shift 鍵並選擇範圍中的第一個和最後一個選項卡。
當您開啟的專案多於標題區域所能容納時,您可以使用資源管理器檢視中的開啟的編輯器部分(透過 ...
按鈕可用)來顯示選項卡式專案的下拉列表。
在選項卡和編輯器區域之間還有一個捲軸,可以將編輯器拖動到檢視中。您可以透過將 工作臺 > 編輯器:標題捲軸大小 (Workbench > Editor: Title Scrollbar Sizing) (workbench.editor.titleScrollbarSizing) 設定為 large
來增加捲軸的高度,使其更易於拖動。使用 workbench.editor.titleScrollbarVisibility 設定來控制捲軸的可見性。
如果您不想使用選項卡,可以透過將 workbench.editor.showTabs 設定為 single
來停用此功能。
"workbench.editor.showTabs": "single"
請參閱以下部分以最佳化 VS Code 以在沒有選項卡的情況下工作。
在編輯器標題區域雙擊以快速建立新選項卡。
選項卡排序
預設情況下,新選項卡會新增到現有選項卡的右側。您可以使用 workbench.editor.openPositioning 設定來控制新選項卡的顯示位置。
例如,您可能希望新的選項卡式專案出現在左側:
"workbench.editor.openPositioning": "left"
您可以透過拖放來重新排序選項卡。
如果您希望某個編輯器選項卡始終可見,可以將其固定到編輯器選項卡欄。在自定義佈局文章中瞭解有關固定選項卡的更多資訊。
workbench.editor.showTabIndex 設定使您能夠在選項卡標題中顯示每個選項卡的索引。這樣可以輕鬆檢視使用 Ctrl(macOS 上為 Cmd)+ 數字鍵盤快捷鍵快速切換到特定選項卡時應使用的數字。
預覽模式
當您在資源管理器檢視中單擊或選擇檔案時,它會以預覽模式顯示並重用現有的選項卡(預覽選項卡)。如果您正在快速瀏覽檔案並且不希望每個訪問過的檔案都有自己的選項卡,這會很有用。當您開始編輯檔案或使用雙擊從資源管理器中開啟檔案時,會為該檔案專門建立一個新選項卡。
預覽模式在選項卡標題中以斜體表示:
如果您不想使用預覽模式並總是建立新選項卡,您可以使用以下設定來控制該行為:
- workbench.editor.enablePreview - 全域性啟用或停用預覽編輯器
- workbench.editor.enablePreviewFromQuickOpen - 從快速開啟中開啟時啟用或停用預覽編輯器
換行選項卡
要檢視更多編輯器選項卡,您可以使用換行選項卡佈局,其中編輯器選項卡會換行以填充編輯器區域上方的多行。使用 工作臺 > 編輯器:換行選項卡 (Workbench > Editor: Wrap Tabs) (workbench.editor.wrapTabs) 設定啟用換行選項卡。
自定義選項卡標籤
當您同時開啟多個同名檔案時,可能很難區分不同的選項卡。為了解決這個問題,您可以為選項卡應用自定義顯示標籤。您可以選擇工作區中的哪些檔案要為其選項卡應用自定義標籤。
要為選項卡啟用自定義顯示標籤,請設定 workbench.editor.customLabels.enabled 設定。
"workbench.editor.customLabels.enabled": true
您可以使用 workbench.editor.customLabels.patterns 設定為選項卡顯示標籤指定一個或多個命名模式。命名模式由兩個部分組成:
- 專案 - 一個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}"
}
以下示例使用 ${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
來更改此行為。
在檢視 > 編輯器佈局 (View > Editor Layout) 選單中有一組預定義的編輯器佈局:
預設情況下,在側邊開啟的編輯器(例如,透過選擇編輯器工具欄的拆分編輯器操作)會在活動編輯器的右側開啟。如果您希望在活動編輯器下方開啟編輯器,請將 workbench.editor.openSideBySideDirection 設定為 down
。
有很多鍵盤命令可以透過鍵盤調整編輯器佈局。如果您更喜歡使用滑鼠,可以使用拖放將編輯器向任何方向拆分:
如果您在將滑鼠懸停在工具欄操作上以拆分編輯器時按住 Alt 鍵,它會提供向另一個方向拆分的選項。這是快速向右或向下拆分的快捷方式。
鍵盤快捷鍵
以下是一些方便的鍵盤快捷鍵,用於在編輯器和編輯器組之間快速導航。
- ⌥⌘→ (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 設定為 single
或 none
來完全停用選項卡。
停用預覽模式
沒有選項卡時,資源管理器檢視的開啟的編輯器部分是進行檔案導航的快捷方式。但是,啟用了預覽編輯器模式後,檔案不會新增到“開啟的編輯器”部分。您可以透過 workbench.editor.enablePreview 和 workbench.editor.enablePreviewFromQuickOpen 設定來停用此功能。
使用鍵盤快捷鍵導航編輯器歷史記錄
您可以更改 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 和 window.openFilesInNewWindow 用於配置為檔案或資料夾開啟新視窗或重用最後一個活動視窗,可能的值是 default
、on
和 off
。
如果配置為 default
,VS Code 會根據發出開啟請求的上下文來決定是重用還是開啟新視窗。將其切換為 on
或 off
以始終保持相同的行為。例如,如果您覺得從檔案選單中選擇檔案或資料夾應始終在新視窗中開啟,請將其設定為 on
。
在某些情況下,此設定會被忽略,例如當您使用 -new-window
或 -reuse-window
命令列選項時。
window.restoreWindows 設定告知 VS Code 如何恢復您上一個會話中開啟的視窗。預設情況下,VS Code 會恢復您在上一個會話中工作過的所有視窗(設定為 all
)。將此設定更改為 none
以永不重新開啟任何視窗並始終以空的 VS Code 例項啟動。將其更改為 one
以重新開啟您工作過的最後一個視窗,或更改為 folders
以僅恢復已開啟資料夾的視窗。
後續步驟
現在您已經瞭解了 VS Code 的整體佈局,可以透過檢視以下文章開始根據您的工作方式自定義編輯器:
常見問題
如何更改縮排參考線的顏色?
縮排參考線的顏色是可自定義的,就像大多數 VS Code 使用者介面元素一樣。要為您的活動顏色主題自定義縮排參考線的顏色,請使用 workbench.colorCustomizations 設定並修改 editorIndentGuide.background
的值。
例如,要使縮排參考線變為亮藍色,請將以下內容新增到您的 settings.json
中:
"workbench.colorCustomizations": {
"editorIndentGuide.background": "#0000ff"
}
我可以隱藏資源管理器檢視中的“開啟的編輯器”部分嗎?
是的,您可以透過使用資源管理器中的“檢視”選單並切換開啟的編輯器選單項來顯示或隱藏“開啟的編輯器”部分。