VS Code 中的檔案和資料夾圖示!
2016 年 9 月 8 日,作者 Chris Dias,@chrisdias
反抗。叛亂。起義。
這些詞都描述了我們第一次在 2014 年為 VS Code 的檔案資源管理器樹新增圖示時的情景。@dmitar-asenov 是 @egamma 蘇黎世實驗室的一名實習生,他花了幾小時“黑”進了一套基本的圖示,因為他想在快速瀏覽檔案樹時區分檔案和資料夾。
當我們開始開發“Monaco”編輯器時,資源管理器中的圖示沒有被納入輕量級編輯器。團隊喜歡無圖示樹的簡潔、乾淨的外觀。對我們來說,圖示顯得笨重,價值不大。我們擔心要維護 100 多個圖示,並讓它們與 Visual Studio IDE 保持同步。我們保留了圖示實現,以防將來改變主意,但我們從未啟用它。
快進到 2016 年 2 月。PR 3200 迫使我們再次討論,但考慮到我們的“1.0”交付內容和其他功能請求(例如選項卡),我們不得不推遲討論。
當我們計劃 2016 年 8 月的釋出時,許多最熱門的功能請求都已得到解決,對圖示的支援也浮出水面
- GitHub 上超過 200 個贊。
- 在最近停用的 User Voice 列表中,以近 2500 票排名第九。
- 憑藉超過 20 萬次下載、170 條評論和 5 星評級,Roberto Huertas 的 vscode-icons 擴充套件已成為 Marketplace 中第五受歡迎的擴充套件。
![]()
也許我們 2014 年錯了。當時 VS Code 團隊的 10 個人很難構成一個具有統計學意義的資料集。200 個贊表明我們需要聽取這些反饋並重新審視這個問題。感謝您的反饋!
從一開始就很清楚,我們需要將圖示主題化作為 VS Code 的擴充套件點。不可能設計出一套所有人都同意的圖示。如果沒有適當的擴充套件機制,Roberto 不得不修補已安裝的原始碼,以使 vscode-icons 擴充套件正常工作。
這種方法不僅意味著每次 VS Code 每日或每月更新時都需要重新安裝擴充套件,而且還引發了一類新的問題,我們無法輕鬆診斷或修復,因為核心產品在我們釋出後被修改了。將來,我們將努力最大限度地降低核心產品損壞的風險,這樣使用者就不會因為安裝擴充套件而被迫重新安裝 VS Code。
檔案圖示主題
隨著 VS Code 1.5 版本的釋出,我們現在支援檔案資源管理器中的圖示。
從 檔案 > 首選項 選單或 命令面板 (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 搜尋檔案圖示主題
![]()
最初我們計劃只發佈一個名為 Minimal 的簡單主題,它只有資料夾開啟/關閉圖示以及所有型別檔案的單個檔案圖示。
![]()
Seti 圖示主題
當我們測試不同的圖示並與 Roberto 合作以確保我們能夠支援他的關鍵場景時,我們發現了 Seti UI 圖示,它最初在 Sublime Text 中流行起來。
我們被“征服”了。

團隊中的大多數人現在都使用 Seti 圖示,所以我們決定將它們包含在產品中供大家享用。只需在檔案圖示主題選擇對話方塊中選擇 Seti (Visual Studio Code) 圖示主題即可。
![]()
注意:您可以在檔案圖示主題列表中上下箭頭移動,並檢視所選主題的預覽,就像您使用顏色主題一樣!
建立自己的圖示主題
擴充套件作者建立自己的檔案圖示主題包非常容易,請在此處檢視原始文件 這裡 以及 VS Code 文件中的 “新增新圖示主題” 主題。展望未來,我們將根據您的反饋繼續完善 API。
再次感謝您的所有反饋,感謝 Roberto 建立了一個流行的擴充套件並幫助我們提供了出色的 API。
程式設計愉快,
Chris Dias