檔案圖示主題
Visual Studio Code 在其 UI 中會在檔名旁邊顯示圖示,擴充套件程式可以提供新的檔案圖示集供使用者選擇。
新增新的檔案圖示主題
您可以從圖示(最好是 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。如果未指定,將選擇字型規範部分中指定的第一個字型。
檔案關聯
圖示可以與資料夾、資料夾名稱、檔案、副檔名、檔名以及語言 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,如語言貢獻點中定義的。檔案的語言是根據語言貢獻中定義的副檔名和檔名來確定的。請注意,不考慮語言貢獻的“第一行匹配”。fileExtensions將副檔名與圖示相關聯。集合中的鍵是副檔名。副檔名是點之後的檔名片段(不包括點)。具有多個點的檔名(例如lib.d.ts)可以匹配多個副檔名;“d.ts”和“ts”。可以選擇性地,副檔名可以以單個父路徑段(*)為字首。副檔名比較時不區分大小寫。fileNames將檔名與圖示相關聯。集合中的鍵是完整的檔名,不包括任何路徑段。可以選擇性地,副檔名可以以單個父路徑段(*)為字首。不支援模式或萬用字元。檔名匹配不區分大小寫。`fileName` 匹配是最強的匹配,關聯到檔名的圖示將優先於匹配的 `fileExtension` 和 `language 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 部分允許您宣告任意數量的字形字型。之後,您可以在圖示定義中引用這些字型。如果在圖示定義中未指定字型 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。