How can I manually change the order that folders are listed in Visual Studio Code Explorer?

Question

I would like to manually change the order that folders are listed, in VSCode. For example, I want to order the sub-folders in my ./components folder like this:

EXPLORER

• components
  • layout
  • ui
  • utils
  • other-folder
  • another-folder

The bold folders should be on the top, with the rest listed in alphabetical order.

By default, VSCode lists folders in alphabetical order. Is there a way to change that?

Answer 1

YES. It is possible by using a 'Favorite' extension

Organizing folder and files is possible by extensions which are named favorites. Indeed personal order is possible in one of them, but I don't know if it is the one you would prefer. Here is the overview:

Favorites by 'kdcro101'
https://marketplace.visualstudio.com/items?itemName=kdcro101.favorites

It is the most popular favorites extension as I know.

You can add files and folders to the favorite area. Special: you can create Favorites Folders to additional organize the folders and files in the favorites.

It is really intuitive as it has a very good UI. Favorites are project based organized. So it is really easy to use and I use it myself in big projects.

What maybe is a disadvantage to your demands is: favorites are not to organize in your personal order. Only traditional a-z|z-a is possible. But as you just add selected files/folders to the favorites there is a really good reduced overview and files can be accessed fast.

Favorites Manager by 'Oleg Shilo'
https://marketplace.visualstudio.com/items?itemName=oleg-shilo.favorites

It is a relative new extension. With this extension it indeed is possible to organize favorite items (folder/files) to your personal demands.

The extension is global organized. That means that all favorites can be accessed in every project. But organizing folders/files specific to single projects is able in separated lists for every project. Organizing such a list is best possible text base and very intuitive this way ... as GUI/UI could be (little) better at all.

Note: if you add folder to the favorites you should activate Show Folder Files in the settings. This is deactivated by default as there is noticed a hint to a 'bug' for VS Code. But to me it worked yet. If not activated VS Code opens every folder in 'project folder view'.

---

As I think that are the two extension which match your demands best you should have a look to...

Favorites panel by 'Sabitov Vladimir'
https://marketplace.visualstudio.com/items?itemName=sabitovvt.favorites-panel

Additional to folders and files you are able to add a lot more: applications, urls, vs code commands.

I used it sometimes but as the settings are complex you need to do it in the settings.json direct. At the end it has been too much work to maintain it but when it is used it is an unbelievable win of speed working in projects.

favorites by 'Howard.Zuo'
https://marketplace.visualstudio.com/items?itemName=howardzuo.vscode-favorites

It is a very simple extension which works very similar as 'Favorites** by kdcro101', - just without favorite groups ... what make it really simple, intuitive and fast to use it. So it is nearly as popular as the other one. To me the missing of the favorite groups makes it very restrictive to larger projects. But it is a really nice and fast solution if projects are limitated which feels really good when using it.

Answer 2

According to VSC doc "User and Workspace Settings" the only options for display order of files and folders in settings.jsonare:

  // Controls sorting order of files and folders in the explorer.
  //  - default: Files and folders are sorted by their names, in alphabetical order. Folders are displayed before files.
  //  - mixed: Files and folders are sorted by their names, in alphabetical order. Files are interwoven with folders.
  //  - filesFirst: Files and folders are sorted by their names, in alphabetical order. Files are displayed before folders.
  //  - type: Files and folders are sorted by their extensions, in alphabetical order. Folders are displayed before files.
  //  - modified: Files and folders are sorted by last modified date, in descending order. Folders are displayed before files.
  "explorer.sortOrder": "default",

Perhaps there are VSC extensions out there which can help you, e.g. Parallel Folders by Alex Crome, didn't try that one myself yet.