ここから本文です

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

7/9(月) 7:50配信

@IT

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

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

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

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

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

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

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

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

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

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

●拡張機能を利用する

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

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

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

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

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

最終更新:7/9(月) 7:50
@IT