文件图标主题
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。文件的语言是根据语言贡献中定义的文件扩展名和文件名进行评估的。请注意,不考虑语言贡献的“第一行匹配”(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 部分允许你声明要使用的任意数量的字形字体。你稍后可以在图标定义中引用这些字体。如果图标定义未指定字体 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