0%
文件图标主题
VS Code 的文件浏览器中，在文件名旁边显示了一些图标。一个插件可以提供整套的图标，用户可以从多个插件提供的图标以及内置的图标中选择。
添加新的文件图标主题
你可以使用图标（最好是 SVG）和字体图标来创建文件图标主题。举个例子，你可以查看这两个内置的文件图标主题：Minimal、Seti。
开始之前，创建一个 VS Code 插件，添加 iconTheme Contribute 配置项。
json
{
"contributes": {
"iconThemes": [
{
"id": "turtles",
"label": "Turtles",
"path": "./fileicons/turtles-icon-theme.json"
}
]
}
}1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
id 是图标主题的标识符，用于在设置中区分每个主题，所以在设置的时候尽量保持它的唯一性和可读性。label 用于在主题选择器的下拉列表中。path 配置项是插件项目中一图标合集的文件路径，这个文件中记录了一个图标合集的位置。如果图标集的文件名都遵循 *icon-theme.json 的格式，你就可以在 VS Code 中输入文件名时得到输入提示和悬停信息。
图标集文件
图标集文件是一个 JSON 文件，定义了文件图标之间的关联。
图标关联对象将文件类型（('file', 'folder', 'json-file'...)）和图标定义关联在一起，图标定义记录了图标文件的位置，它可以是一个图片文件，也可以是一个字体中的形状。
图标定义
iconDefinitions 字段包含所有的图标定义。每个定义都包含一个 id，此 id 用于在其它位置引用该定义，这样形成了一对多的关系，也就是一个图标定义可以被多个文件关联引用。
json
{
"iconDefinitions": {
"_folder_dark": {
"iconPath": "./images/Folder_16x_inverse.svg"
}
}
}1
2
3
4
5
6
7
2
3
4
5
6
7
上面的是一个标识符为 _folder_mark 的图标定义。
下面是图标定义中支持的属性：
iconPath：当使用 svg 或 png 的时候，iconPath是图片路径。
fontCharacter：当使用符号字体的时候，fontCharacter是字体文件中的字符。
fontColor：当使用符号字体的时候，fontColor是用在符号字体上的颜色。
fontSize：当使用一个字体的时候，fontSize是字体大小。默认情况下将使用字体规格中规定的大小，通常是相对于父元素字体的大小，例如 150%。
fontId：当使用一个字体的时候，fontId是字体的 id。如果没有指定 id，将默认选定字体规格定义中指定的第一个字体。
文件关联
图标可以关联到文件夹、文件夹名称、文件、文件类型、文件名和 语言 ID。
此外，上述的每一个关联中，都可以针对 light 浅色和 highContrast 高对比度进行细化配置。
每一个文件关联都指向一个图标定义。
json
{
"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": {}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
file是默认的文件图标，会在没有匹配到主题的文件、文件名、语言 ID 时作为默认图标显示。现在，所有在图标定义中定义的属性都将被继承（仅与符号字体相关，这对 fontSize 很有用）。
folder是文件夹折叠状态下的图标，如果folderExpanded没有设置，folder也会在文件夹打开状态下显示。也可以使用folderNames来使用文件夹名称来匹配图标。
文件夹图标是可选的，如果没有设置，将不会为文件夹显示图标。
folderExpanded是文件夹展开时的图标。展开文件夹的图标是可选的，如果没有设置，则会显示folder中定义的图标。
folderNames使用文件夹名称关联图标。对象的 key 是文件夹名称，可以使用 * 作为前缀，表示任何父路径下的此名称的文件夹。不支持正则表达式和通配符。文件夹名称在匹配的时候不区分大小写。
folderNamesExpanded和folderNames作用相同，只是特别地用来关联打开的文件夹。
rootFolder是工作区根节点的文件夹图标，如果rootFolderExpanded没有设置，rootFolder同样作为打开的根节点图标。如果没有设置rootFolder，将会使用folder中定义的图标作为工作区根节点图标。
rootFolderExpanded是工作区根节点的打开状态下的图标。如果没有设置，将会使用rootFolder中配置的图标。
rootFolderNames使用名称来关联工作区根节点图标，和folderNamesfolderNamesExpanded的作用方式相同，只不过rootFolderNames关联的是工作区根节点图标。
rootFolderNamesExpanded与rootFolderNames作用相同，只是针对根节点展开状态下的图标。
languageIds使用语言来关联图标。对象中的 key 是 language Contribute 配置项 中配置的语言 ID。一个文件的语言是基于其扩展名和 language Contribute 配置项中中配置的文件名来评估的。
fileExtensions使用文件扩展名来关联图标。对象中的 key 是文件扩展名。扩展名部分是文件名中，点（.）后面的部分，不包括点。文件名中如果有多个点，比如lib.d.ts，这将会匹配到多个扩展名：d.ts和ts。文件扩展名字段中可以使用 * 作为前缀，来表示任何路径中任何文件名的此扩展名的文件。扩展名在匹配的时候同样不区分大小写。
fileNames使用文件名来关联图标。对象中的 key 是完整的文件名，不包含任何路径。可以使用 * 作为前缀，来表示任何路径下的此名称的文件。不支持正则表达式和通配符。文件名匹配的时候不区分大小写。文件名匹配的优先级最高，使用文件名匹配到的图标，会优先于扩展名匹配和语言 ID 匹配。
(*) 一些匹配方式 （folderNames, folderNamesExpanded, fileExtensions, fileNames）可以使用 * 作为前缀。使用这种匹配方式时，只有当对应文件/文件夹/扩展名的直接路径名匹配时，才会匹配成功。这可以给一些特定文件夹赋予特别的外观（如 system）：
json
"fileNames": {
"system/win.ini": "_win_ini_file"
},1
2
3
2
3
system/win.ini 意味着所有名为 system 的文件夹下，所有文件名为 win.ini 的文件都会匹配成功，
json
"fileExtensions": {
"system/ini": "_ini_file"
},1
2
3
2
3
system/ini 意味着所有名为 system 的文件夹下，所有文件名是 *.ini 的文件都会匹配成功。
文件名匹配、扩展名匹配，以及它们各自是否带有父路径，这几种匹配方式的优先级是：
带有父路径的文件名匹配 > 文件名匹配 > 带有父路径的扩展名匹配 > 文件扩展名匹配 > 语言匹配 ...
light 明亮 和 highContrast 高对比度 部分和上述内容相同，都各自具有上述的关联属性。它们都可以覆盖相应的主题图标。
字体定义
font 中你可以定义你想要使用的符号字体。
在后续的开发中，你可以在图标定义中引用这些字体。如果图标定义未指定字体 id，则最先声明的字体将作为默认字体。
复制字体文件到你的插件中，再设置好对应的路径。
更推荐使用 WOFF 格式的字体。
- 设置
woff格式。
- weight 属性值定义。
- style 属性值定义。
- 当使用字体图标时，size 应该是相当于与字体大小的值，通常是一个百分数。
json
{
"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"
}
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
文件图标主题中的文件夹图标
文件图标主题会告诉文件浏览器，当文件图标足以表达文件夹的折叠状态时，就不需要显示默认的文件夹图标了。这个模式可以使用文件图标主题定义文件中，"hidesExplorerArrows":true 配置项来进行配置。
语言默认图标
语言 Contribute 配置项可以为语言配置图标。
jsonc
{
"contributes": {
"languages": [
{
"id": "latex",
// ...
"icon": {
"light": "./icons/latex-light.png",
"dark": "./icons/latex-dark.png"
}
}
]1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
如果一个文件图标主题仅有该语言对应的通用文件图标，那么则使用该图标。
只有在如下情况下才会显示语言默认图标：
- 文件图标主题具有特定的文件图标。例如
Minimal没有指定的文件图标，因此不使用语言的默认图标。
- 文件图标主题对指定的语言、扩展名、文件名没有图标。
- 文件图标主题没有定义
"showLanguageModeIcons":false
语言默认图标通常会在如下情况下显示：
- 文件图标主题定义了
"showLanguageModeIcons":true