ファイルアイコンテーマ

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

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

アイコン(SVG を推奨)やアイコンフォントを使用して、独自のファイルアイコンテーマを作成できます。例として、組み込みの2つのテーマ MinimalSeti を確認してください。

まず、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 は展開されたフォルダーのフォルダー名をアイコンに関連付けます。キーの仕様は folderNames と同様です。
  • rootFolder は、折りたたまれたワークスペースのルートフォルダーのフォルダーアイコンです。rootFolderExpanded が設定されていない場合は、展開されたワークスペースのルートフォルダーにも使用されます。設定されていない場合、ワークスペースのルートフォルダーには folder で定義されたアイコンが表示されます。
  • rootFolderExpanded は、展開されたワークスペースのルートフォルダーのフォルダーアイコンです。設定されていない場合、展開されたワークスペースのルートフォルダーには rootFolder で定義されたアイコンが表示されます。
  • rootFolderNames は、ルートフォルダー名をアイコンに関連付けます。キーはフォルダー名です。パターンやワイルドカードはサポートされていません。ルートフォルダー名の照合は、大文字と小文字を区別しません。
  • rootFolderNamesExpanded は、展開されたルートフォルダー名をアイコンに関連付けます。キーの仕様は rootFolderNames と同様です。
  • languageIds は言語をアイコンに関連付けます。セットのキーは、言語寄与ポイント で定義されている言語 ID です。ファイルの言語は、言語寄与で定義されたファイル拡張子とファイル名に基づいて評価されます。言語寄与の「最初の行の照合」は考慮されないことに注意してください。
  • fileExtensions はファイル拡張子をアイコンに関連付けます。セットのキーはファイル拡張子名です。拡張子名はドットの後のファイル名セグメント(ドットを含まない)です。lib.d.ts のような複数のドットを持つファイル名は、複数の拡張子('d.ts' と 'ts')に一致する可能性があります。オプションで、ファイル拡張子名に単一の親パスセグメント (*) を付けることができます。拡張子は、大文字と小文字を区別せずに比較されます。
  • fileNames はファイル名をアイコンに関連付けます。セットのキーは完全なファイル名であり、パスセグメントを含みません。オプションで、ファイル名に単一の親パスセグメント (*) を付けることができます。パターンやワイルドカードはサポートされていません。ファイル名の照合は、大文字と小文字を区別しません。「fileName」の照合が最も優先度が高く、ファイル名に関連付けられたアイコンは、一致する fileExtension や言語 ID のアイコンよりも優先されます。

(*) 一部のプロパティキー(folderNamesfolderNamesExpandedfileExtensionsfileNames)には、単一の親パスセグメントを付けることができます。アイコンは、リソースの直接の親フォルダーが親パスフォルダーと一致する場合にのみ使用されます。これは、特定のフォルダー(例: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 セクションでは、使用する任意の数のグリフフォントを宣言できます。これらのフォントは、後でアイコン定義で参照できます。最初に宣言されたフォントは、アイコン定義で font id が指定されていない場合のデフォルトとして使用されます。

フォントファイルを拡張機能にコピーし、それに応じてパスを設定します。WOFF フォントの使用を推奨します。

  • format に '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 を定義している場合。
© . This site is unofficial and not affiliated with Microsoft.