Understanding Compact Folders in VS Code
VS Code's default folder view combines single-child folders into a compact display. While this can save space, it might make navigation less intuitive for some developers.
How to Disable Compact Folders Windows
- Open VS Code Settings (File > Preferences > Settings, or use Ctrl+,)
- Search for "explorer.compactFolders" in the settings search bar
- Uncheck the box next to "Explorer: Compact Folders"
How to Disable Compact Folders on Mac
- Open VS Code Settings (Code > Preferences > Settings, or use Cmd+,)
- Search for "explorer.compactFolders" in the settings search bar
- Uncheck the box next to "Explorer: Compact Folders"
The setting change will take effect immediately, showing the full folder structure.
Before and After
With Compact Folders (Default):
Without Compact Folders:
Benefits of Disabling Compact Folders
- Better visualization of the complete folder structure
- Easier to understand nested directory relationships
- More familiar directory tree representation
- Helpful for projects with deep nesting
This setting is particularly useful when working on large projects where understanding the exact folder hierarchy is important.
