Search code examples
visual-studio-code

Move open tabs bar to bottom in Visual Studio Code


Is there an option in VS Code to move this bar top bar

to the bottom of the screen, just above console? In JetBrains' products, for example, there is a setting for this: Tab placement: Bottom

In JetBrains' products: Pycharm example

Many thanks!


Solution

  • Update ⚠️: See https://github.com/iocave/customize-ui/issues/174, https://github.com/iocave/customize-ui/issues/156, if you install customize UI for a recently released VS Code version, it will crash and your way to recover will be to reinstall VS Code. This solution is sadly no longer working.


    After 2 days of research I have finally come up with solution.

    1. First install Customize UI.

    2. Add this lines to your settings.json:

       "customizeUI.stylesheet": {
           ".editor-group-container": "display: flex !important; flex-direction: column;",
           ".editor-group-container > .title": "order: 1;"
       }
      

    Also you can switch the tabs and breadcrumbs by using this:

        "customizeUI.stylesheet": { 
            ".editor-group-container > .title": "display: flex !important; flex-direction: column; order: 1;", 
            ".editor-group-container > .title > .tabs-and-actions-container": "order: 1;" 
        } 
    

    Note: there's an issue with breadcrumbs popup window, but I don't how to fix this bug.