本站点文档内容均翻译自code.visualstudio.com,仅供个人学习,如有差异请以官网为准。

文件图标主题

Visual Studio Code 在其用户界面中文件名旁边显示图标,并且扩展可以贡献新的文件图标集,用户可以选择。

添加新的文件图标主题

您可以从图标(最好使用SVG)和图标字体创建自己的文件图标主题。例如,请查看两个内置主题:MinimalSeti

首先,创建一个 VS Code 扩展并添加图标主题贡献点。

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

身份证是图标主题的标识符。它在设置中用作标识符,因此使其唯一但易读。Tab在文件图标主题选择器下拉菜单中显示。路径指向扩展中定义图标集的文件。如果您的图标集名称遵循*icon-theme.json名称方案,你将在 VS Code 中获得完成支持和悬停。

文件图标集文件

文件图标集文件是一个由文件图标关联和图标定义组成的JSON文件。

图标关联将文件类型('file','folder','json-file'...)映射到图标定义。图标定义定义了图标的位置:那可以是一个图像文件,也可以是字体中的字形。

图标定义

图标定义该部分包含所有定义。每个定义都有一个id,该id将用于引用定义。一个定义也可以通过多个文件关联来引用。

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

上面的图标定义包含一个标识符为的定义文件夹_暗输入:.

支持以下属性:

  • 图标路径: 当使用svg/png时:图像的路径。
  • 字体字符: 使用字形字体时:要使用的字体中的字符。
  • 字体颜色使用字形字体时:用于字形的颜色。
  • 字体大小使用字体时:字体大小。默认情况下,使用字体规范中指定的大小。应为相对于父字体大小的相对大小(例如150%)。
  • 字体ID使用字体时:字体的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_light",
    "文件": "_file_light",
    "文件扩展名": {
      "ini": "_ini_file_light"
    }
  },
  "高对比度": {}
}
  • 文件是默认文件图标,显示在所有不匹配任何扩展名、文件名或语言ID的文件上。目前,所有由文件图标定义的属性将被继承(仅对字体字形相关,对fontSize有用)。
  • 文件夹是折叠文件夹的文件夹图标,如果文件夹展开未设置,也适用于扩展文件夹。可以使用关联特定文件夹名称的图标。文件夹名称属性。 文件夹图标是可选的。如果未设置,文件夹将不显示图标。
  • 文件夹展开是展开文件夹的文件夹图标。展开文件夹图标是可选的。如果未设置,则为定义的图标文件夹将被显示。
  • 文件夹名称将文件夹名称与图标关联。集合的键是文件夹名称,可选地以单个父路径段(*)前缀。不支持模式或通配符。文件夹名称匹配是不区分大小写的。
  • 文件夹名称展开将文件夹名称与扩展文件夹的图标关联。集合的键是文件夹名称,可选地以单个父路径段(*)前缀。不支持模式或通配符。文件夹名称匹配是不区分大小写的。
  • 根文件夹是折叠的工作区根文件夹的文件夹图标,如果根文件夹展开未设置,也适用于扩展工作区的根文件夹。如果未设置,将使用为 定义的图标。文件夹将显示在工作区根文件夹中。
  • 根文件夹展开是展开工作区根文件夹的文件夹图标。如果没有设置,将使用定义的图标根文件夹将显示扩展工作区根文件夹。
  • 根文件夹名称将根文件夹名称与图标关联。集合的键是文件夹名称。不支持模式或通配符。根文件夹名称匹配是不区分大小写的。
  • 根文件夹名称展开将根文件夹名称与展开文件夹的图标关联。集合的键是文件夹名称。不支持模式或通配符。根文件夹名称匹配是不区分大小写的。
  • 语言编号 将语言与图标关联。集合中的键是根据 语言贡献点 中定义的语言 ID。文件的语言是根据语言贡献中定义的文件扩展名和文件名来评估的。请注意,语言贡献中的“第一行匹配”不被考虑。
  • 文件扩展名将文件扩展名与图标关联。集合中的键是文件扩展名。扩展名是点后(不包括点)的文件名片段。具有多个点的文件名例如lib.d.ts可以匹配多个扩展名;'d.ts' 和 'ts'。可选地,文件扩展名可以以单个父路径段(*)开头。扩展名比较不区分大小写。
  • 文件名将文件名与图标关联。集合中的键是不包括任何路径段的完整文件名。可选地,文件扩展名可以由单个父路径段(*)前缀。不支持模式或通配符。文件名匹配是区分大小写的。'fileName' 匹配是最强匹配,与文件名关联的图标将优先于与匹配文件扩展名和语言 ID 的图标。

(*) 一些属性键 (文件夹名称文件夹名称展开文件扩展名文件名) 可以由单个父路径段前缀。图标只有在资源的直接父文件夹与父路径文件夹匹配时才会使用。这可以用来为特定文件夹中的资源(例如,系统) 不同的外观:

  "文件名": {
    "系统/win.ini": "_win_ini 文件"
  },

系统/Win.ini这意味着该关联匹配名为 的文件win.ini直接放入文件夹系统

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

系统/初始化这意味着该关联匹配名为 的文件*.ini直接放入文件夹系统

文件扩展名匹配优先于语言匹配,但弱于文件名匹配。父路径段匹配优先于没有该段的同类型匹配。

文件名匹配与父级 > 文件名匹配 > 文件扩展名匹配与父级 > 文件扩展名匹配 > 语言匹配 ...

高对比度这些部分具有与刚刚列出的相同的文件关联属性。它们允许覆盖相应主题的图标。

字体定义

字体该部分允许您声明任何数量的字形字体,以便使用。 您可以稍后在图标定义中引用这些字体。如果图标定义没有指定字体ID,则将使用声明的第一个字体作为默认值。

将字体文件复制到您的扩展程序中,并相应地设置路径。 建议使用WOFF字体。

  • 将 'woff' 设为格式。
  • 权重属性值定义在这里
  • 样式属性值定义在这里
  • 尺寸应相对于图标使用的字体大小。因此,始终使用百分比。
{
  "fonts": [
    {
      "id": "turtles-font",
      "src": [
        {
          "path": "./turtles.woff",
          "format": "woff"
        }
      ],
      "weight": "normal",
      "style": "normal",
      "size": "150%"
    }
  ],
  "iconDefinitions": {
    "_file": {
      "fontCharacter": "\\E002",
      "字体颜色": "#5f8b3b",
      "字体ID": "turtles-font"
    }
  }
}

文件图标主题中的文件夹图标

文件图标主题可以指示文件资源管理器在文件图标足够表示文件夹展开状态时,不要显示默认的文件夹图标(旋转的三角形或“折叠标志”)。此模式通过设置启用"隐藏导航箭头": true在文件图标主题定义文件中。

语言默认图标

语言贡献者可以为语言定义一个图标。

{
  "贡献": {
    "语言": [
      {
        "id": "LaTeX",
        // ...
        "图标": {
          "明亮": "./icons/latex-light.png",
          "暗黑": "./icons/latex-dark.png"
        }
      }
    ]
  }
}

如果文件图标主题只有通用文件图标,则使用该图标。

语言默认图标仅在以下情况下显示:

  • 文件图标主题有特定的文件图标。例如最小的没有特定的文件图标,因此不使用语言默认图标
  • 文件图标主题不包含给定语言、文件扩展名或文件名的图标。
  • 文件图标主题未定义"showLanguageModeIcons":false

语言默认图标始终显示,如果

  • 文件图标主题确实定义"showLanguageModeIcons": true