VS Codeのファイルアイコンを変更するには：Visual Studio Code TIPS

VS Codeでは［エクスプローラー］ビューに表示されるファイルやフォルダのアイコンを好みのものに変更できる。その方法を見ていこう。

» 2018年07月06日 05時00分公開

　Visual Studio Code（以下、VS Code）では、［エクスプローラー］ビューに表示される、ファイルやフォルダのアイコン（以下、ファイルアイコン）を自分の好みに合わせて変更できる。その方法を見ていこう。


	操作
ファイルアイコンを変更する	コマンドパレットから［基本設定: ファイルアイコンのテーマ］を実行する
アイコンテーマ拡張機能をインストールする	アイコンテーマの選択画面で［その他のファイルアイコンのテーマをインストール］を選択する
ファイルアイコンの変更方法

ファイルアイコンを変更する

　VS Codeの［エクスプローラー］ビューには、アイコン付きでファイルが一覧されるので、一目でどのファイルがどの種類のファイルであるかを認識できる（ただし、デフォルトの状態では、フォルダについてはアイコンは表示されない）。

VS Codeの［エクスプローラー］ビューにはファイルアイコンが表示される

　ファイルアイコンは、コマンドパレットを開き「file icon」などと入力して、［基本設定: ファイルアイコンのテーマ］コマンドを実行することで変更が可能だ。

コマンドパレットから［基本設定: ファイルアイコンのテーマ］を実行

　これにより、以下の［ファイルアイコンのテーマを選択します］画面が表示される。なお、VS Codeの［ファイル］メニューの下にある［基本設定］－［ファイルアイコンのテーマ］を選択した場合には、この画面が直接表示される（macOSの場合は［ファイル］メニューではなく［Code］メニューの下にある）。

VS Codeにインストール済みのアイコンテーマの選択画面

　このときには、カーソルキーでテーマを上下に移動することで、そのテーマでのファイルアイコンの表示がどう変わるかをプレビューできる。

ファイルアイコンのプレビュー

　デフォルトでは、上の画像に示した通り、「Minimal」と「Seti」の2つのアイコンテーマを利用可能だ（初期状態は「Seti」となっている）。

VS Codeに標準でインストールされている「Minimal」テーマ（上）と「Seti」テーマ（下）

　上の「Minimal」テーマでは、ファイルの種類に関係なく、同じファイルアイコンが表示されるとともに、フォルダのアイコンも表示される。「Seti」テーマではファイルの種類ごとにファイルアイコンが変わるが、フォルダのアイコンは先にも述べたように表示されない。

　これらの2種類から好きな方を選んでもよいが、VS MarketplaceではVS Code用のファイルアイコンのテーマが配布されているので、そこから好みのテーマを検索してもよい。なお、この設定内容はユーザー設定のworkbench.iconTheme項目に保存される。

拡張機能を利用する

　VS Codeにファイルアイコンのテーマを追加するには、コマンドパレットに表示された［ファイルアイコンのテーマを選択します］画面にある［その他のファイルアイコンのテーマをインストール］を選択する。

［その他のファイルアイコンのテーマをインストール］を選択

　これにより、［拡張機能］ビューがサイドバーに表示され、そこにVS Marketplaceで配布されているファイルアイコンのテーマが一覧される。

インストール可能なファイルアイコンのテーマが一覧される

　インストールしてウィンドウを再読み込みすると、以下のようなメッセージが表示されることがある。これは「インストールしたファイルアイコンのテーマをアクティブにして」というプロンプトだ。必要に応じて、［Activate］などと書かれたボタンをクリックしよう（ファイルアイコンのテーマごとに、メッセージを表示するかしないか、表示するとしたらどんなメッセージになるかは異なるようだ）。アクティブにすれば、コマンドパレットからテーマを選択する手間を省ける。