VS Code 的工作區域雖然便於管理程式碼專案,但在處理本地資源時仍有不足。當需要整理下載在外部的素材、瀏覽參考檔案、進行批量檔案操作、或是想知道當前系統狀態時,往往必須切換到其他應用,打斷了在 VS Code 中的工作流程。
本擴展就是為了嘗試在 VS Code 內實現更流暢的本地互動。以下,將從使用者介面的四個主要區域來介紹這個系統瀏覽器的功能。
側邊欄
位於畫面左側,可透過按鍵 N 展開或收起,承載所有導航輔助功能。內含多個可獨立收合的子面板,每個子面板皆整合了篩選、排序與拉伸調整高度等操作。
書籤
| 功能名稱 | 功能描述 |
|---|
| 書籤列表 | 列出所有已收藏的資料夾書籤,點擊即可快速導航至該位置 |
| 添加書籤 | 將目前選取的或作用中的資料夾加入書籤 |
| 刪除書籤 | 移除目前選取的書籤項目 |
| 清空書籤 | 一次移除所有書籤 |
| 移至頂部/底部 | 將選取的書籤移動到列表最前方或最後方 |
| 上下移動 | 微調書籤在列表中的排列順序 |
瀏覽記錄
| 功能名稱 | 功能描述 |
|---|
| 最近瀏覽 | 以時間順序列出最近造訪過的資料夾(預設模式),維護至多 50 筆紀錄 |
| 歷史紀錄 | 對應導航歷史堆疊,可以瀏覽完整的前進/後退歷程 |
| 最常瀏覽 | 依據各路徑的造訪次數排序,方便快速回到最常使用的資料夾 |
| 清除記錄 | 清空所有瀏覽紀錄,僅保留當前路徑 |
系統
| 功能名稱 | 功能描述 |
|---|
| 系統資料夾 | 自動列出 Windows 的關鍵資料夾(桌面、下載、音樂、圖片、OneDrive 等),搭配對應圖示,點擊直接導航 |
| 磁碟機列表 | 顯示所有本機邏輯磁碟的名稱、檔案系統格式與已使用/總容量 |
| 重新整理 | 手動重新讀取磁碟機資訊 |
導航欄
位於畫面上方,包含所有主要導航功能,以及對於視圖的檢視設定。
歷史與路徑
| 功能名稱 | 功能描述 |
|---|
| 上一個資料夾 | 回到上一個瀏覽過的資料夾(Alt + ←) |
| 下一個資料夾 | 前往下一個瀏覽過的資料夾(Alt + →) |
| 上層資料夾 | 往上一層目錄(Alt + ↑),已在根目錄時不可用 |
| 重新整理 | 重新讀取當前目錄或圖片(Ctrl + R),tooltip 會顯示上次更新的相對時間 |
| 新增資料夾 | 在當前目錄建立新的資料夾(僅在目錄模式下可用) |
| 路徑顯示 | 地址列顯示當前路徑,過長路徑會自動以 ... 縮短顯示 |
| 路徑跳轉 | 直接在地址列輸入完整路徑,失焦時自動導航至該路徑 |
檢視選項
| 功能名稱 | 功能描述 |
|---|
| 模式切換 | 在「表格檢視」與「圖片網格檢視」之間切換 |
| 模糊搜尋 | 以關鍵字即時搜尋當前目錄中的檔案與資料夾名稱 |
| 排序設定 | 目錄模式下可依名稱、修改日期、建立日期、大小進行排序,點擊相同欄位可切換升序/降序 |
| 網格尺寸 | 圖片模式下可選擇小(5 欄)、中(3 欄)、大(2 欄) |
| 網格間距 | 圖片模式下可切換是否顯示圖片之間的間距 |
| 過濾切換 | 啟用或停用過濾功能(僅在目錄模式下可用) |
| 過濾條件 | 可選擇僅顯示「檔案」、「資料夾」或「剪貼簿中的項目」 |
內容區域
位於畫面中央,瀏覽目錄內容的主要區域。每個目錄都有兩種檢視模式——表格檢視與網格檢視,可從導航欄無縫切換。
表格檢視
| 功能名稱 | 功能描述 |
|---|
| 虛擬化渲染 | 使用虛擬列表技術,數千個檔案也能流暢捲動 |
| 欄位資訊 | 顯示名稱、類型、修改日期、建立日期、大小等欄位,各欄位可點擊標題排序 |
| 單擊選取 | 點擊列即可選取,支援 Ctrl 附加選取與 Shift 範圍選取 |
| 雙擊開啟 | 雙擊資料夾可進入該層級;雙擊檔案則以 VS Code 編輯器開啟 |
| 框選 | 拖曳空白區域可進行框選,自動選取涵蓋範圍內的所有列,接近邊緣時自動捲動 |
| 拖放匯出 | 將選取的檔案拖放至系統檔案總管或 VS Code,支援任意檔案 |
| 檔案類型圖示 | 根據副檔名自動指派對應的 codicon 圖示 |
圖片網格檢視
| 功能名稱 | 功能描述 |
|---|
| 佈局引擎 | 使用自定義虛擬化引擎與二分搜尋演算法,高效渲染大量圖片 |
| 雙擊開啟 | 雙擊圖片即以 VS Code 編輯器開啟 |
| 拖放匯出 | 支援將圖片拖放至外部應用程式 |
操作欄
位於畫面下方(僅在目錄模式下顯示),用於對選取的項目進行單項或批次操作。
單一項目操作
| 功能名稱 | 功能描述 |
|---|
| 重新命名 | 直接在輸入框中修改最後選取項目的名稱,按下確認按鈕送出 |
| 檢視內容 | 開啟屬性對話框,檢視選取項目的詳細資訊 |
選取操作
| 功能名稱 | 功能描述 |
|---|
| 全選 | 選取目前目錄中的所有項目(Ctrl + A) |
| 清除選取 | 取消所有已選取的項目(Ctrl + Shift + A) |
| 反轉選取 | 反轉目前的選取狀態(Ctrl + I) |
已選取項目操作
| 功能名稱 | 功能描述 |
|---|
| 選取數量顯示 | 即時顯示目前已選取的項目數量 |
| 刪除 | 刪除所有已選取的項目(Delete),會彈出確認對話框 |
| 寫入剪貼簿 | 將選取的項目寫入應用程式剪貼簿(Ctrl + C) |
剪貼簿操作
| 功能名稱 | 功能描述 |
|---|
| 剪貼簿數量顯示 | 即時顯示剪貼簿中的項目數量 |
| 放置 | 將剪貼簿中的項目放置到當前資料夾(Ctrl + V),可選擇複製或移動模式,以及是否覆蓋 |
屬性對話框
選取項目後,可從操作欄的「內容」按鈕開啟屬性對話框,檢視完整的詳細資訊。
通用屬性
| 屬性 | 說明 |
|---|
| 名稱與類型 | 顯示檔案/資料夾名稱、對應圖示,以及根據副檔名判定的可讀類型名稱 |
| 路徑 | 完整檔案路徑,附帶複製到系統剪貼簿按鈕 |
| 實際路徑 | 若為符號連結,額外顯示解析後的真實路徑 |
| 建立時間 | 格式化為易讀的日期時間格式 |
| 修改時間 | 格式化為易讀的日期時間格式 |
檔案專屬屬性
| 屬性 | 說明 |
|---|
| 檔案大小 | 以二進位單位(KiB、MiB 等)格式化顯示 |
| Windows 屬性 | 顯示唯讀、隱藏、壓縮等檔案屬性標記 |
| 雲端可用性 | 顯示檔案的雲端同步狀態(本機可用、連線時可用、永遠可用等),搭配對應圖示 |
圖片專屬屬性
| 屬性 | 說明 |
|---|
| 解析度 | 以「寬 × 高 像素」格式顯示 |
| 圖片格式 | 顯示格式名稱(如 PNG)、色彩空間(如 SRGB)、是否含有 Alpha 透明通道 |
資料夾專屬屬性
| 屬性 | 說明 |
|---|
| 項目數量 | 遞迴統計資料夾內的檔案數與子資料夾數 |
| 總大小 | 遞迴計算資料夾的總大小 |
快捷鍵一覽
| 快捷鍵 | 功能 |
|---|
N | 開/關側邊欄 |
Delete | 刪除選取項目 |
Alt + ← | 上一個資料夾 |
Alt + → | 下一個資料夾 |
Alt + ↑ | 上一層資料夾 |
Ctrl + R | 重新整理 |
Ctrl + C | 複製到剪貼簿 |
Ctrl + V | 貼上 |
Ctrl + A | 全選 |
Ctrl + Shift + A | 取消全選 |
Ctrl + I | 反轉選取 |
在任意輸入框中聚焦時,上述快捷鍵將不會觸發。
開啟方式
本擴充套件提供多種方式開啟系統瀏覽器:
| 開啟方式 | 說明 |
|---|
| 命令面板 | 搜尋「開啟系統瀏覽器」,透過系統對話框選擇資料夾後開啟 |
| 檔案總管右鍵選單 | 在 VS Code 檔案總管、檔案標題列等地方,對資料夾或檔案右鍵選擇「在系統瀏覽器中顯示」 |
| 編輯器標題列按鈕 | 點擊編輯器右上角的按鈕,以檔案所在目錄開啟系統瀏覽器 |
| 檔案總管標題列按鈕 | 點擊 VS Code 檔案總管區段標題列的按鈕,直接開啟系統瀏覽器 |
安裝指南
系統需求
- 作業系統: Windows
- VS Code: 1.106.1 或更高版本
安裝步驟
-
前往 GitHub Releases 下載最新的 .vsix 檔案
-
在 VS Code 中安裝擴展:
- 開啟命令面板(
Ctrl+Shift+P)
- 輸入並選擇
Extensions: Install from VSIX...
- 選擇下載的
.vsix 檔案
-
安裝完成後,重新啟動 VS Code 即可使用系統瀏覽器功能