Skip to content

1ureka/vs-explorer

Repository files navigation

vs-explorer

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 或更高版本

安裝步驟

  1. 前往 GitHub Releases 下載最新的 .vsix 檔案

  2. 在 VS Code 中安裝擴展:

    • 開啟命令面板(Ctrl+Shift+P
    • 輸入並選擇 Extensions: Install from VSIX...
    • 選擇下載的 .vsix 檔案
  3. 安裝完成後,重新啟動 VS Code 即可使用系統瀏覽器功能

About

一個用於增強 VS Code 本地資源與系統管理的個人擴展套件

Topics

Resources

Stars

Watchers

Forks

Releases

Used by

Contributors

Languages