參加你附近的 ,瞭解 VS Code 中的 AI 輔助開發。

檔案圖示主題

Visual Studio Code 在其整個使用者介面中顯示檔名旁邊的圖示,擴充套件可以貢獻新的檔案圖示集供使用者選擇。

新增新的檔案圖示主題

您可以從圖示(最好是 SVG)和圖示字型建立自己的檔案圖示主題。例如,請檢視兩個內建主題:MinimalSeti

首先,建立一個 VS Code 擴充套件並新增 iconTheme 貢獻點。

{
  "contributes": {
    "iconThemes": [
      {
        "id": "turtles",
        "label": "Turtles",
        "path": "./fileicons/turtles-icon-theme.json"
      }
    ]
  }
}

id 是圖示主題的識別符號。它在設定中用作識別符號,因此請確保其唯一且易讀。label 顯示在檔案圖示主題選擇器下拉選單中。path 指向擴充套件中定義圖示集的檔案。如果您的圖示集名稱遵循 *icon-theme.json 命名方案,您將在 VS Code 中獲得補全支援和懸停提示。

檔案圖示集檔案

檔案圖示集檔案是一個 JSON 檔案,由檔案圖示關聯和圖示定義組成。

圖示關聯將檔案型別(“檔案”、“資料夾”、“json-檔案”等)對映到圖示定義。圖示定義定義了圖示的位置:可以是影像檔案,也可以是字型中的字形。

圖示定義

iconDefinitions 部分包含所有定義。每個定義都有一個 ID,用於引用該定義。一個定義也可以被多個檔案關聯引用。

{
  "iconDefinitions": {
    "_folder_dark": {
      "iconPath": "./images/Folder_16x_inverse.svg"
    }
  }
}

上面的圖示定義包含一個識別符號為 _folder_dark 的定義。

支援以下屬性

  • iconPath:使用 svg/png 時:影像的路徑。
  • fontCharacter:使用字形字型時:要使用的字型中的字元。
  • fontColor:使用字形字型時:字形要使用的顏色。
  • fontSize:使用字型時:字型大小。預設情況下,使用字型規範中指定的大小。應是相對於父字型大小的相對大小(例如 150%)。
  • fontId:使用字型時:字型的 ID。如果未指定,將選擇字型規範部分中指定的第一個字型。

檔案關聯

圖示可以關聯到資料夾、資料夾名稱、檔案、副檔名、檔名和語言 ID

此外,這些關聯中的每一個都可以針對“淺色”和“高對比度”顏色主題進行細化。

每個檔案關聯都指向一個圖示定義。

{
  "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 將檔名與圖示關聯。集合中的鍵是完整的檔名,不包括任何路徑段。可選地,副檔名可以以單個父路徑段 (*) 為字首。不支援模式或萬用字元。檔名匹配不區分大小寫。檔名匹配是最強的匹配,與副檔名和匹配的語言 ID 匹配的圖示相比,將優先使用與檔名關聯的圖示。

(*) 某些屬性鍵(folderNamesfolderNamesExpandedfileExtensionsfileNames)可以以單個父路徑段為字首。只有當資源的直接父資料夾與父路徑資料夾匹配時,才會使用該圖示。這可以用於為特定資料夾(例如 system)中的資源賦予不同的外觀

  "fileNames": {
    "system/win.ini": "_win_ini_file"
  },

system/win.ini 表示該關聯匹配直接位於 system 資料夾中的名為 win.ini 的檔案

  "fileExtensions": {
    "system/ini": "_ini_file"
  },

system/ini 表示該關聯匹配直接位於 system 資料夾中的名為 *.ini 的檔案

副檔名匹配優先於語言匹配,但弱於檔名匹配。帶有父路徑段的匹配優先於不帶有相同型別此類段的匹配。

帶父路徑的檔名匹配 > 檔名匹配 > 帶父路徑的副檔名匹配 > 副檔名匹配 > 語言匹配 ...

lighthighContrast 部分具有與剛剛列出的相同的檔案關聯屬性。它們允許覆蓋相應主題的圖示。

字型定義

fonts 部分允許您宣告要使用的任意數量的字形字型。您以後可以在圖示定義中引用這些字型。如果圖示定義未指定字型 ID,則首先宣告的字型將用作預設字型。

將字型檔案複製到您的擴充套件中並相應地設定路徑。建議使用 WOFF 字型。

  • 將“woff”設定為格式。
  • weight 屬性值定義在此處
  • style 屬性值定義在此處
  • 大小應相對於使用圖示的字型大小。因此,始終使用百分比。
{
  "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