ファイルアイコンテーマ

Visual Studio Code は、UI 全体でファイル名の横にアイコンを表示し、拡張機能はユーザーが選択できる新しいファイルアイコンセットを提供できます。

新しいファイルアイコンテーマの追加

ファイルアイコンテーマは、アイコン (SVG が推奨) とアイコンフォントから作成できます。例として、組み込みの 2 つのテーマ: 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 があります。1 つの定義は、複数のファイル関連付けから参照することもできます。

{
  "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 フォントを使用することをお勧めします。

フォーマットとして '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 が定義されている場合

04/03/2025