に参加して、VS Code の AI 支援開発について学びましょう。

ファイルアイコンテーマ

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 があり、定義を参照するために使用されます。定義は複数のファイル関連付けから参照することもできます。

{
  "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 を定義している場合。
10/09/2025
© . This site is unofficial and not affiliated with Microsoft.