MENU

今回はVS Codeのアイコンテーマをカスタマイズして、デフォルトでは表示されないフォルダアイコンを表示する方法をメモしていこうと思います。

VS Codeはデフォルトで(var.1.21 時)素敵なアイコンが使用できるのですが、よく見るとフォルダにだけアイコンがないんですよね。

下の画像のような感じです。

image

小さな三角だけ!笑

こちらを、以下のように変更していく手順を紹介します。

image

フォルダが見やすい!開閉でアイコンも変わるし、ワークスペースのルートフォルダが見分けやすいのもいいですね。

では、カスタマイズしていきましょう。

目次

ファイルアイコンはテーマで管理されている

配色テーマと同じように、ファイルアイコンにもテーマがあります。

コマンドパレットで「icon」と検索すると「ファイルのアイコンのテーマ」というのが出てきます。

image

これを選択すると、以下のように2種類のテーマが用意されていることがわかります。

image

Minimal」 と 「Seti」の2種類ですね。デフォルトでは「Seti」が適用されています。

試しに、「Minimal」を選択してみましょう。

左メニューのエクスプローラーの見た目が以下のように変更されます。

image

かなりシンプルですね。拡張子によるアイコンは用意されておらず、「ファイル」なのか「フォルダ」なのかだけがわかりやすくなっています。

 

...あれ?

フォルダのアイコン、すでに用意されてますやん。

はい。気づいてしまいましたね。

ファイルの識別は「Seti」の方がわかりやすく、フォルダのアイコンは「Minimal」の方にある。

じゃあ、合体させればめっちゃいい感じになりそう!ってことで、合体させてみましょう。

デフォルトで用意されている2つのテーマを合わせて新しいテーマを作成する

ここでは、「Seti」をベースにした新しいテーマ「Seti Customized」を作成するとします。

手順は以下の通りです。

  • アイコンテーマの設定ファイルの場所を見つける
  • 「Seti」テーマファイルを拡張機能用フォルダへコピペする
  • 「Minimal」テーマの中からフォルダに関する記述や画像ファイルを探す
  • フォルダに関するする記述や画像ファイルを「Seti」をコピーしたファイルに書き加える
  • 既存の「Seti」テーマと重複しないようにオリジナルの名前を設定する

アイコンテーマの設定ファイルの場所を見つける

「Seti」はtheme-seti、「Minimal」はtheme-defaultsという名前のフォルダで管理されています。

MacとWindowsでのそれぞれのフォルダまでのパスは以下の通りです。

Macの場合

/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/theme-seti/
/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/theme-defaults/

image

Windowsの場合

C:\Program Files\Microsoft VS Code\resources\app\extensions\theme-seti\
C:\Program Files\Microsoft VS Code\resources\app\extensions\theme-defaults\

「Seti」テーマファイルを拡張機能用フォルダへコピペする

次に、theme-setiの中身を、拡張機能・オリジナルテーマ用のフォルダへコピペします。

ペースト先のフォルダは以下の通りです。

Macの場合

~/.vscode/extensions

Windowsの場合

%USERPROFILE%\.vscode\extensions

※ : Macの「~」やWindowsの「%USERPROFILE%」は、ユーザーのホームディレクトリです。Windowsはそのまま上記をコピペで大丈夫です。

それぞれのOSにて上記の場所にtheme-setiを好きな名前に変更してコピペしておきます。

私はtheme-seti-customizedという名前にしてみました。

image

「Minimal」テーマの中からフォルダに該当する箇所を探す

次に、「Minimal」テーマの中からフォルダアイコンを定義している記述を探し出します。

theme-defaults/fileicons/vs_minimal-icon-theme.json というjsonファイルをエディタで開いてください。

image

2行目付近に"iconDefinitions"と書かれており、その中にフォルダやファイルの状況に合わせてどの画像を使用するかが定義されています。

下の画像の部分です。

image

この中でファイルに関する記述("_file_dark"と"_file_light")を省いてフォルダに関する記述だけをコピーしておきます。

具体的には以下の部分です。

"_root_folder_dark": {
    "iconPath": "./images/RootFolder_16x_inverse.svg"
},
"_root_folder_open_dark": {
    "iconPath": "./images/RootFolderOpen_16x_inverse.svg"
},
"_folder_dark": {
    "iconPath": "./images/Folder_16x_inverse.svg"
},
"_folder_open_dark": {
    "iconPath": "./images/FolderOpen_16x_inverse.svg"
},
"_root_folder": {
    "iconPath": "./images/RootFolder_16x.svg"
},
"_root_folder_open": {
    "iconPath": "./images/RootFolderOpen_16x.svg"
},
"_folder_light": {
    "iconPath": "./images/Folder_16x.svg"
},
"_folder_open_light": {
    "iconPath": "./images/FolderOpen_16x.svg"
},

これを「 フォルダの記述① 」とします。

また、これを見ると、このjsonファイルと同じ場所にあるのimagesフォルダの中にある画像をアイコンとして使用していることがわかります。つまり、フォルダアイコンにはこれらが必要なので、こちらもコピーしておきましょう。

これを「アイコンの画像フォルダ(images)」とします。

次に、上記で定義されたパスを使用しますよ、という記述をしている箇所があるので、そちらもコピーしておきます。

下の画像のハイライト部分です。light版と合わせて2箇所で記述されています。

image

こちらも、ファイルに関する記述は不要ですので、フォルダの部分だけをコピーしておきます。

具体的には以下になります。

"folderExpanded": "_folder_open_dark",
"folder": "_folder_dark",
"rootFolderExpanded": "_root_folder_open_dark",
"rootFolder": "_root_folder_dark",

"light"の中

"folderExpanded": "_folder_open_light",
"folder": "_folder_light",
"rootFolderExpanded": "_root_folder_open",
"rootFolder": "_root_folder",

フォルダに関するする記述や画像ファイルを「Seti」をコピーしたファイルに書き加える

さて、フォルダアイコンを追加するのに必要な記述やファイルが揃いましたので、「Seti Customized」に追加していきましょう。

theme-seti-customizedフォルダ内のiconsフォルダを開いてください。この中に「アイコン画像フォルダ(images)」をペーストし、vs-seti-icon-theme.jsonというファイルを編集します。

image

jsonファイルの冒頭付近に、「Minimal」テーマと同様、"iconDefinitions"という記述があるかと思いますので、その中に「フォルダに関する記述①」をペーストします。

image

次に、この"iconDefinitions"ブロックの閉じカッコ「 } 」のすぐ下の行に 「"file":"_default"」という記述がありますので、その間に「フォルダに関する記述②」をペーストします。

image

ここからさらに下の方へスクロールすると、light版の記述があり、「"file":"_default_light"」という記述があるので、そのすぐ上に「フォルダに関する記述③」をペーストします

image

以上です。

計3箇所にペーストできたら、保存してjsonファイルを閉じましょう。

既存の「Seti」テーマと重複しないようにオリジナルの名前を設定する

さて、仕上げの作業です。

theme-seti-customizedフォルダ内の、package.jsonを編集します。

image

この中でテーマ名などを定義するのですが、今はまだ「Seti」のままで、重複してしまうので書き換えましょう。

下記画像の3ヶ所を好きな名前に書き換えてください。(画像は書き換えた後です。)

image

書き換えが完了したら、保存して閉じておきましょう。

これにて、新テーマ「Seti Customized」が完成しました!

新しく作ったテーマを有効化する

最後に、新しく作成した「Seti Customized」を有効化しましょう。

VS Codeのコマンドパレットから、作成したアイコンテーマ「Seti Customized」が選択できるようになっているはずです。

image

Seti Customized」を選択し、VS Codeを再起動すれば完了です!

「Seti」のファイルアイコンたちはそのままに、フォルダにもアイコンが追加されたかと思います!

image

おわりに

いかがだったでしょうか。

フォルダがより明確になり、ルートフォルダも個別のアイコンがあるのですごく見やすくなりました!

そのうちアップデートで「Seti」にもデフォルトでフォルダアイコンが追加されそうな気もしますが。笑

そんなの待てない!という方は是非参考にして見てください。

良きvscodeライフを。

 

- Thank you for reading this to the end. -
TOPへ Top