きなこもち.net

.NET Framework × UiPath,Orchestrator × Azure × AWS × Angularなどの忘備録

Visual Studio Code × vscode-icon × 拡張機能を使ってエクスプローラのアイコンを見やすくしてみた

この記事の目的

この記事では、
Visual Studio Codeの拡張機能を使ってエクスプローラーのファイルアイコンを見やすくする方法をまとめること
を目的としています。
利用した拡張機能は、vscode-iconsです。
この記事は、Daily .NET Tipsの以下のページを参考にしています。
dailydotnettips.com


本題

Visual Studio Codeで困っていること

基本的にVisual Studio Codeはとても使いやすいエディタなので、今のところ困っていることはないのですが、
参考の記事を見て、確かに以下の点で困っていることに気が付きました。

その1:ファイルが多くなったとき、どのファイルが何の種類のファイルかパッと見てわかりにくい。
その2:(パッと見て)フォルダとファイルが見分けにくい。

ということで、これらの問題を解決してくれる拡張機能vscode-icons」についてみていきたいと思います。

vscode-iconsのインストール

vscode-iconsは、Visual Studio Codeの拡張機能からインストールができます。
手順は以下の通りです。
f:id:kinakomotitti:20180427231239p:plain

Vscode-icons」をインストールした後、下のほうにある歯車をクリックし、
「ファイルアイコンのテーマ」を選択します。
f:id:kinakomotitti:20180427231246p:plain

ファイルアイコンのテーマをクリックすると、以下のような検索Windowが表示されます。
f:id:kinakomotitti:20180427231251p:plain

ここで、新しく追加された【VSCode Icons】を選択することで、機能を有効化することができます。

★インストールした結果

せっかくなので、自分の環境で利用できるアイコンテーマを比較してみました。
f:id:kinakomotitti:20180427231259p:plain

「なし」もシンプルでいいと思いますが、VSCode Iconsのほうが直感的にわかってよいですね!
個人的に、batファイルが歯車アイコンで見えるのがとても気に入っています。


これはいい(´▽`)


作成者の Roberto Huertasさんに感謝です!

まとめ

直感的に何のファイルであるかわかるアイコンは素晴らしい。
同じ悩みがある人はぜひ使ってみてください!

自分は、仕事でもこれを使おうと思います(´・ω・`)