VS Code のファイルおよびフォルダーアイコン!
2016年9月8日 Chris Dias (@chrisdias)
反逆。抵抗。蜂起。
これらの言葉はすべて、2014年にVS Codeのファイルエクスプローラーツリーに初めてアイコンを追加したときの状況を表しています。@dmitar-asenovは、@egammaのチューリッヒの研究所のインターンで、ツリーをさっと見たときにファイルとフォルダーを区別したいという理由から、基本的なアイコンセットをハッキングするのに数時間を費やしました。
「Monaco」エディターの開発を開始したとき、エクスプローラーのアイコンは軽量エディターには採用されませんでした。チームはアイコンのないツリーのシンプルでクリーンな外観を気に入っていました。私たちにとって、アイコンは重く、ほとんど価値がないように感じられました。100以上のアイコンを維持し、Visual Studio IDEと同期させることに不安がありました。将来気が変わる場合に備えてアイコンの実装は残しましたが、有効にすることはありませんでした。
2016年2月に早送りします。PR 3200によって、再びこの議論をせざるを得なくなりましたが、「1.0」の成果物やその他の機能要求(タブなど)があったため、議論を先に延ばす必要がありました。
2016年8月のリリースを計画するにあたり、上位の機能要求の多くが対処され、アイコンのサポートが最優先事項として浮上してきました。
- GitHubで200以上の「いいね」。
- 最近終了したUser Voiceリストで、約2500票で9位。
- 20万回以上のダウンロード、170件のレビュー、5つ星の評価を受けて、Roberto Huertas氏のvscode-icons拡張機能は、マーケットプレイスで5番目に人気のある拡張機能になりました。
![]()
おそらく、2014年の私たちは間違っていました。当時のVS Codeチームの10人は、統計的に有意なデータセットを構成するものではありませんでした。200のいいねは、このフィードバックに耳を傾け、もう一度検討する必要があることを示していました。フィードバックありがとうございます!
最初から、アイコンのテーマ設定をVS Codeの拡張ポイントにする必要があることは明らかでした。誰もが同意する単一のアイコンセットを考案することは不可能でした。適切な拡張メカニズムがなければ、Robertoはvscode-icons拡張機能を適切に機能させるために、インストールされたソースにパッチを適用せざるを得ませんでした。
このアプローチは、拡張機能がVS Codeの毎日の、あるいは毎月の更新ごとに再インストールされる必要があるというだけでなく、出荷後にコア製品が変更されるため、私たちが簡単に診断または修正できない新しい種類の問題を引き起こしました。将来的には、ユーザーが拡張機能をインストールした結果としてVS Codeの再インストールを余儀なくされることがないように、コア製品の破損のリスクを最小限に抑えるように取り組んでいきます。
ファイルアイコンテーマ
VS Code の 1.5 リリースでは、ファイル エクスプローラーのアイコンをサポートするようになりました。
ファイル > 基本設定メニューまたはコマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P))から「ファイルアイコンテーマ」を検索します。
![]()
当初は、フォルダーの開閉アイコンと、すべての種類に共通の単一のファイルアイコンを持つ、Minimalというシンプルで単一のテーマを出荷する予定でした。
![]()
Seti アイコンテーマ
さまざまなアイコンをテストし、Robertoと協力して彼の主要なシナリオをサポートできることを確認する中で、Sublime Textで最初に普及したSeti UIアイコンを発見しました。
そして、私たちは変わりました。

チームのほとんどがSetiアイコンを使用しているため、全員が楽しめるように製品に含めることにしました。ファイルアイコンテーマ選択ダイアログで、Seti (Visual Studio Code)アイコンテーマを選択するだけです。
![]()
注: カラーテーマと同様に、ファイルアイコンテーマのリストを上下に移動して、選択したテーマのプレビューを表示できます!
独自のアイコンテーマを作成する
拡張機能作成者が独自のファイルアイコンテーマパックを作成することは非常に簡単です。生のドキュメントはこちら、VS Codeドキュメントの「新しいアイコンテーマの追加」トピックをご覧ください。今後も、皆様からのフィードバックに基づいてAPIを拡充していく予定です。
皆様からのフィードバック、そして人気のある拡張機能を開発し、優れたAPIの提供に貢献してくれたRobertoに改めて感謝いたします。
ハッピーコーディング、
Chris Dias