VS Code 擴充推薦 - Material Icon Theme 主題

Material Icon Theme 是 VS Code 擴充中著名的 VS Code 主題，擁有 4.9 顆星的評價， 1,900+ 萬個安裝數，是我個人正在使用的主題，也推薦給大家。

本文將介紹如何安裝與設定 Material Icon Theme 。

本文環境 #

• VS Code
• Material Icon Theme

Material Icon Theme #

Material Icon Theme 支援超多種檔案/資料夾的圖示(Icon)：

1. 檔案類型，包含 HTML, CSS, JavaScript, XML, YAML, JSON, SVG 等等
2. 程式語言，包含 TypeScript, Python, Go, Rust, Java, Scala 等等
3. Framework 類型，包含 React, Vue, Next, Nuxt 等等

涵蓋率之廣，可說應有盡有，如果沒涵蓋到的話，也能夠自訂圖示。

設定圖示飽和度(saturation) #

安裝完 Material Icon Theme 之後，如果會覺得圖示色彩過於繽紛，可以選擇降低圖示的飽和度，視覺上看起來就會舒服很多，降低圖示飽和度可以用 Command Palette, 按下 Command + Shift + P 或 Ctrl + Shift + P ，然後輸入 change saturation 就可以設定介於 0 - 1 之間的值， 1 代表飽和度 100%, 建議可以改為 0.5 左右，感受會舒適一點（不改也可以，久了就會習慣）。

設定圖式灰階(grayscale)顯示 #

如果不想要圖示顯示色彩，可以開啟灰階模式，圖示會以灰色顯示，按下 Command + Shift + P 或 Ctrl + Shift + P 叫出 Command Palette 後，輸入 toggle grayscale ，選擇 ON 就可以了：

改變資料夾圖示/顏色 #

Material Icon Theme 預設會盡量將各種資料夾加上圖示，例如資料夾名稱為 Error 就會被替換為紅色資料夾，如果習慣用預設的資料夾圖示代表就好，可以叫出 Command Palette 後，輸入 change folder theme 後，選擇 Classic 就會變回 VS Code 預設的資料夾圖示：

如果想改變資料夾顏色可以叫出 Command Palette 後，輸入 change folder color後進行選擇：

總結 #

以上是個人覺得比較實用的設定， Material Icon Theme 頁面也有提供如何自訂圖示的說明，只是我用了一段時間倒沒發現自己有這個需要，有興趣的話可以查閱 Material Icon Theme 的官方頁面了解更多設定選項。

Enjoy!

References #

Material Icon Theme - Visual Studio Marketplace

vscode