ファイルアイコンテーマ
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"
}
}
}
ファイルアイコンテーマのフォルダーアイコン
ファイルアイコンテーマは、フォルダーアイコンがフォルダーの展開状態を示すのに十分な場合に、ファイルエクスプローラーにデフォルトのフォルダーアイコン（回転する三角形または「twisties」）を表示しないように指示できます。このモードは、ファイルアイコンテーマ定義ファイルで"hidesExplorerArrows":true を設定することで有効になります。
言語のデフォルトアイコン
言語寄与者は、その言語のアイコンを定義できます。
{
"contributes": {
"languages": [
{
"id": "latex",
// ...
"icon": {
"light": "./icons/latex-light.png",
"dark": "./icons/latex-dark.png"
}
}
]
}
}
アイコンは、ファイルアイコンテーマがその言語に対して汎用ファイルアイコンしか持っていない場合に使用されます。
言語のデフォルトアイコンは、次の場合にのみ表示されます。
- ファイルアイコンテーマに特定のファイルアイコンがある場合。例：
Minimalには特定のファイルアイコンがないため、言語のデフォルトアイコンを使用しません。 - ファイルアイコンテーマが、指定された言語、ファイル拡張子、またはファイル名にアイコンを含まない場合。
- ファイルアイコンテーマが
"showLanguageModeIcons":falseを定義していない場合。
言語のデフォルトアイコンは、次の場合に常に表示されます。
- ファイルアイコンテーマが
"showLanguageModeIcons":trueを定義している場合。