檔案圖示主題
Visual Studio Code 會在整個使用者介面中的檔案名稱旁顯示圖示,擴充功能可以貢獻新的檔案圖示集,供使用者選擇使用。
新增檔案圖示主題
您可以從圖示(建議使用 SVG)和圖示字型建立自己的檔案圖示主題。作為範例,請查看兩個內建主題:Minimal 和 Seti。
首先,建立一個 VS Code 擴充功能並新增 iconTheme 貢獻點。
{
"contributes": {
"iconThemes": [
{
"id": "turtles",
"label": "Turtles",
"path": "./fileicons/turtles-icon-theme.json"
}
]
}
}
id 是圖示主題的識別碼。它會作為設定中的識別碼使用,因此請確保其唯一且易於閱讀。label 會顯示在檔案圖示主題選擇器下拉選單中。path 指向擴充功能中定義圖示集的檔案。如果您的圖示集名稱遵循 *icon-theme.json 的命名格式,您將能在 VS Code 中獲得自動完成支援與懸停提示。
檔案圖示集檔案
檔案圖示集檔案是一個 JSON 檔案,由檔案圖示關聯和圖示定義組成。
圖示關聯將檔案類型('file'、'folder'、'json-file' 等)對應至圖示定義。圖示定義規定了圖示的位置:這可以是圖片檔案,也可以是字型中的字元。
圖示定義
iconDefinitions 區段包含所有定義。每個定義都有一個 ID,將用於參照該定義。一個定義也可以被多個檔案關聯所參照。
{
"iconDefinitions": {
"_folder_dark": {
"iconPath": "./images/Folder_16x_inverse.svg"
}
}
}
上述圖示定義包含一個識別碼為 _folder_dark 的定義。
支援下列屬性
iconPath:使用 svg/png 時:圖片的路徑。fontCharacter:使用字型時:要在字型中使用的字元。fontColor:使用字型時:要用於該字元的顏色。fontSize:使用字型時:字型大小。預設會使用字型規格中指定的大小。應為相對於父級字型大小的相對值(例如 150%)。fontId:使用字型時:字型的 ID。如果未指定,將會選取字型規格區段中指定的 erster (第一個) 字型。
檔案關聯
圖示可以與資料夾、資料夾名稱、檔案、副檔名、檔案名稱以及 語言 ID 進行關聯。
此外,這些關聯中的每一項都可以針對「淺色 (light)」和「高對比 (highContrast)」色彩主題進行調整。
每個檔案關聯都指向一個圖示定義。
{
"file": "_file_dark",
"folder": "_folder_dark",
"folderExpanded": "_folder_open_dark",
"folderNames": {
".vscode": "_vscode_folder"
},
"fileExtensions": {
"ini": "_ini_file"
},
"fileNames": {
"win.ini": "_win_ini_file"
},
"languageIds": {
"ini": "_ini_file"
},
"light": {
"folderExpanded": "_folder_open_light",
"folder": "_folder_light",
"file": "_file_light",
"fileExtensions": {
"ini": "_ini_file_light"
}
},
"highContrast": {}
}
file是預設的檔案圖示,顯示給所有不符合任何副檔名、檔案名稱或語言 ID 的檔案。目前,檔案圖示定義所定義的所有屬性都將被繼承(僅對字型字元相關,對fontSize很有用)。folder是摺疊資料夾的資料夾圖示;如果未設定folderExpanded,則也用於展開的資料夾。特定資料夾名稱的圖示可以使用folderNames屬性進行關聯。資料夾圖示是選用的。如果未設定,資料夾將不會顯示圖示。folderExpanded是展開資料夾的資料夾圖示。展開後的資料夾圖示是選用的。如果未設定,則會顯示為folder定義的圖示。folderNames將資料夾名稱關聯至圖示。此集合的鍵是資料夾名稱,可選擇性地加上單一父路徑區段 (*) 作為前綴。不支援模式或萬用字元。資料夾名稱比對不區分大小寫。folderNamesExpanded將資料夾名稱關聯至展開後的資料夾圖示。此集合的鍵是資料夾名稱,可選擇性地加上單一父路徑區段 (*) 作為前綴。不支援模式或萬用字元。資料夾名稱比對不區分大小寫。rootFolder是摺疊工作區根資料夾的資料夾圖示;如果未設定rootFolderExpanded,則也用於展開的工作區根資料夾。如果未設定,工作區根資料夾將顯示為folder定義的圖示。rootFolderExpanded是展開工作區根資料夾的資料夾圖示。如果未設定,展開的工作區根資料夾將顯示為rootFolder定義的圖示。rootFolderNames將根資料夾名稱關聯至圖示。此集合的鍵是資料夾名稱。不支援模式或萬用字元。根資料夾名稱比對不區分大小寫。rootFolderNamesExpanded將根資料夾名稱關聯至展開後的資料夾圖示。此集合的鍵是資料夾名稱。不支援模式或萬用字元。根資料夾名稱比對不區分大小寫。languageIds將語言關聯至圖示。此集合中的鍵是 語言貢獻點 中定義的語言 ID。檔案的語言是根據語言貢獻中定義的副檔名和檔案名稱進行評估的。注意,語言貢獻的「首行比對 (first line match)」不在此列。fileExtensions將副檔名關聯至圖示。此集合中的鍵是副檔名名稱。副檔名是檔案名稱中點號後的部分(不包含點號)。具有多個點號的檔案名稱(例如lib.d.ts)可以比對多個副檔名;即 'd.ts' 和 'ts'。副檔名名稱可選擇性地加上單一父路徑區段 (*) 作為前綴。副檔名比較不區分大小寫。fileNames將檔案名稱關聯至圖示。此集合中的鍵是完整檔案名稱,不包含任何路徑區段。副檔名名稱可選擇性地加上單一父路徑區段 (*) 作為前綴。不支援模式或萬用字元。檔案名稱比對不區分大小寫。「fileName」比對是最強的比對,關聯至檔案名稱的圖示將優先於比對到的 fileExtension 和語言 ID 的圖示。
(*) 部分屬性鍵(folderNames、folderNamesExpanded、fileExtensions、fileNames)可以加上單一父路徑區段作為前綴。僅當資源的直接父資料夾符合該父路徑資料夾時,才會使用該圖示。這可用於為特定資料夾(例如 system)中的資源提供不同的外觀。
"fileNames": {
"system/win.ini": "_win_ini_file"
},
system/win.ini 表示該關聯僅比對位於 system 資料夾內名為 win.ini 的檔案。
"fileExtensions": {
"system/ini": "_ini_file"
},
system/ini 表示該關聯僅比對位於 system 資料夾內名為 *.ini 的檔案。
副檔名比對的優先順序高於語言比對,但低於檔案名稱比對。具有父路徑區段的比對優先於同一類型但沒有此區段的比對。
帶父路徑的檔案名稱比對 > 檔案名稱比對 > 帶父路徑的副檔名比對 > 副檔名比對 > 語言比對 ...
light 和 highContrast 區段擁有與上述相同的檔案關聯屬性。它們允許針對相應的主題覆寫圖示。
字型定義
fonts 區段讓您可以宣告您想要使用的任意數量的字型。隨後您可以在圖示定義中參照這些字型。如果圖示定義未指定 font id,則會使用最先宣告的字型作為預設值。
將字型檔案複製到您的擴充功能中,並相應地設定路徑。建議使用 WOFF 字型。
{
"fonts": [
{
"id": "turtles-font",
"src": [
{
"path": "./turtles.woff",
"format": "woff"
}
],
"weight": "normal",
"style": "normal",
"size": "150%"
}
],
"iconDefinitions": {
"_file": {
"fontCharacter": "\\E002",
"fontColor": "#5f8b3b",
"fontId": "turtles-font"
}
}
}
檔案圖示主題中的資料夾圖示
當資料夾圖示足以指示資料夾的展開狀態時,檔案圖示主題可以指示檔案總管不要顯示預設的資料夾圖示(旋轉的三角形或「箭頭」)。此模式透過在檔案圖示主題定義檔案中設定 "hidesExplorerArrows":true 來啟用。
語言預設圖示
語言貢獻者可以為語言定義一個圖示。
{
"contributes": {
"languages": [
{
"id": "latex",
// ...
"icon": {
"light": "./icons/latex-light.png",
"dark": "./icons/latex-dark.png"
}
}
]
}
}
如果檔案圖示主題僅具有該語言的通用檔案圖示,則會使用此圖示。
僅在以下情況才會顯示語言預設圖示:
- 檔案圖示主題具有特定的檔案圖示。例如,
Minimal沒有特定的檔案圖示,因此不會使用語言預設圖示。 - 檔案圖示主題未包含針對該特定語言、副檔名或檔案名稱的圖示。
- 檔案圖示主題沒有設定
"showLanguageModeIcons":false
在以下情況下,語言預設圖示會一律顯示:
- 檔案圖示主題有設定
"showLanguageModeIcons":true