Takeaway: Go to settings and uncheck "Compact Folders"

Have you ever been annoyed by VSCode's default folder view? For example, when you have a nested structure like folder/folder/, and you're always clicking on the wrong folder inside another folder. It gets even worse when you try to drag a file into a new folder — you often end up dropping it in the wrong place.

That's why I'm writing this post — to share a one-step fix to prevent this situation while you're developing.

Before

Take a look at the example below. The file views/route.ts is under the api folder. But VSCode shows it as api/views/ in a single line. It's hard to click accurately

Now imagine if your folder structure goes even deeper, like this:

app/(admin)/(dashboard)/api/v1/views/manage/
│   ├── first.ts

That's totally a nightmare right? When you try to drag first.ts into any other folder, you might end up dropping it in the wrong place.

After

Open Settings, search for "Compact Folders", and simply uncheck it.

You'll immediately see a more friendly and readable folder structure.

Now that same api/views/route.ts example becomes:

api/
├── views/
│   ├── route.ts

That's it! Enjoy your smooth developing experience by just one small setting change. Happy coding!