Visual Studio Code (VS Code) を使っていると、左側の ファイルエクスプローラ（Explorer）が見にくいと感じたことはありませんか？
特にデフォルトの設定だと「フォルダが細長く潰れて表示される」「フォルダアイコンがなくて階層が分かりにくい」といった悩みが出やすいです。
この記事では、VS Code のエクスプローラを Windows Explorer 風に改善するための具体的な設定方法を紹介します。
1. Compact Folders をオフにする
VS Code には「Compact Folders」という機能があり、1つのフォルダの中にさらに1つだけフォルダがある場合、それらを横棒でまとめて表示します。
一見スッキリしますが、ディレクトリ構造が分かりにくくなります。
設定方法
Ctrl + ,で設定を開き、「explorer.compactFolders」を検索してチェックを外す- または
settings.jsonに以下を追加：
"explorer.compactFolders": false
これでフォルダは 1階層ずつ展開されるようになります。
2. フォルダをファイルより上に並べる
Windows Explorer では、フォルダが先、ファイルが後に並ぶのが自然ですよね。
同じように VS Code でも順序を変えられます。
設定方法
"explorer.sortOrder": "type"
これでフォルダが上に、ファイルが下に並びます。
3. フォルダアイコンを導入する
実は VS Code のデフォルトでは、フォルダアイコンが地味で分かりにくいです。
ここでおすすめなのが アイコンテーマ拡張です。
おすすめ拡張
インストール後、コマンドパレット (Ctrl+Shift+P) → File Icon Theme → 好きなアイコンテーマを選択。
これでフォルダやファイルに分かりやすいアイコンが付きます。
4. 完成した settings.json の例
最終的に settings.json に以下を追加すれば、かなり Windows Explorer 風に見やすくなります。
{
"explorer.compactFolders": false,
"explorer.sortOrder": "type",
"workbench.iconTheme": "material-icon-theme"
}
まとめ
- Compact Folders をオフ → フォルダ階層が潰れない
- フォルダを先に並べる → Windows Explorer っぽい見た目
- アイコンテーマを導入 → 階層構造が直感的に分かる
これで VS Code のエクスプローラが一気に見やすくなります。
「フォルダ構造が追いやすい VS Code」にしたい人は、ぜひ試してみてください！
コメント