vscode-iconsをカスタマイズして、オシャレなエクスプローラーを実現しよう！

Visual Studio Codeのエクスプローラーのアイコンをリッチな見た目にする「vscode-icons」は、非常に多くの名称・拡張子に対応するアイコンが用意されています。

ただし、対応していない名称・拡張子の場合、シンプルなフォルダ(orファイル)アイコンになってしまいます。こうなると少しテンションが下がります。
先日Atomic Designに則ったディレクトリ構成のプロジェクトに参画したのですが、名称に対応しておらずアイコンがデフォルトのもので、少しテンションが下がりました。

しかしご安心ください。vscode-iconsは、自分でアイコンのカスタマイズを追加することもできます！
この機能により、アイコンの見た目をさらにリッチにすることができました！
（なんか「目がチカチカする」とか、「逆に見にくくなってない？」とか言われそうですが、自分のテンションは上がっているのでよしとします。）

設定方法

以下、今回はフォルダアイコン用の設定を掲載します。
ファイルアイコンの設定方法は、以下記事にて詳しく述べられていましたので、こちらをご参照ください。
https://medium.com/@chih.hsi.chen/how-to-add-your-custom-icons-to-vscode-icons-9ab8c3f9abc1

1. アイコン用のフォルダ「vsicons-custom-icons」を作成する

アイコンファイルを配置するためのフォルダを作成します。
注意点は以下のとおりです。

• アイコン用フォルダ名はvsicons-custom-iconsとする。（自分は、~/.vscode/vsicons-custom-iconsというパスにしました。）

• フォルダはローカルに配置する（vsiconsはローカルで動作するプラグインのため、リモートサーバーを利用している場合などでもローカルにフォルダを配置する必要があります。）

2. フォルダに、アイコンファイルを配置する

先ほど作成したフォルダに、アイコンファイルを配置します。
注意点は以下のとおりです。

• 使用可能な拡張子はsvg, png, jpg, gif, bmp, tiff, icoです。

• アイコンのファイル名は、「folder_type_」というプレフィックスが必要です。（例：folder_type_molecules.svg）

• 「_opened」というサフィックスがついたアイコンファイルを用意することで、フォルダ開閉時のアイコンを切り替えることができます。（例：folder_type_molecules_opened.svg）

• 「folder_type_light_」というサフィックスがついたアイコンファイルを用意することで、ライトテーマのアイコンを切り替えることができます。（例：folder_type_light_atoms.svg）

3. setting.jsonを編集します。

settings.jsonのvsiconsの設定を追加します。

"vsicons.customIconFolderPath": "~/.vscode", // 1で配置したディレクトリのパス
"vsicons.associations.folders": [
  {
    // アイコンファイル名から、プレフィックスと拡張子を除いた部分
    // 例: file_type_atoms.svg→atoms
    "icon": "atoms", 
    // アイコンを紐づけたいフォルダ名
    "extensions": ["atoms"],
    // アイコンファイルの拡張子
    "format": "svg"
  },
  ・・・
]

まとめ

かっこいい見た目にすることは（個人的に）テンション上昇につながります。
もし同じようにテンション高めたい方がいらっしゃれば、カスタマイズしてみていただければと思います。

(例のatomic-designのアイコンは自作しました。もしよければ使ってください。）
https://github.com/go0dev/atomic-design-folder-icons.git