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

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

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

[かわさきしんじ,Insider.NET編集部]
「Visual Studio Code TIPS」のインデックス

連載「Visual Studio Code TIPS」

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

拡張機能を利用する

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

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

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

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

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

ファイルアイコンのテーマをアクティブにするダイアログ ファイルアイコンのテーマをアクティブにするダイアログ

 また、ファイルアイコンのテーマをインストールすると、それらはアイコンテーマの選択画面に一覧表示されるようになる。

追加したファイルアイコンのテーマはテーマ一覧に表示される 追加したファイルアイコンのテーマはテーマ一覧に表示される

 数多くのファイルアイコンのテーマが配布されているので、そこから自分の好みにあったもの、あるいは視覚的に認識しやすいものなどを利用することで、日々のVS Codeでの作業が楽しく、効率的になるかもしれない。

「Visual Studio Code TIPS」のインデックス

Visual Studio Code TIPS

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。